開發(fā)的時(shí)候需要根據(jù)用戶 id 獲取用戶名，我的設(shè)想是將用戶列表存在 sessionStorage 里面,
然后寫一個(gè)公共方法，傳入 id 即可獲得用戶名。若是發(fā)現(xiàn) sessionStorage 里面沒(méi)存，則發(fā)送
axios 請(qǐng)求獲取列表，存在 sessionStorage 里面，再根據(jù) id 獲取用戶名

因?yàn)槭钱惒降?，所以想?async/await 獲得。

Tools.js 中的公共方法代碼如下

getUserName: function (userId) {  // 根據(jù) userId 獲取 用戶名 (用戶登錄名和中文名)
      return new Promise(resolve => {
        if (sessionStorage.getItem('octet_user_list')) {
        let user_list = JSON.parse(sessionStorage.getItem('octet_user_list'));
        let select_user = user_list.filter(option => { return option.core_user_id == userId})[0] || {};
        resolve({user_name: select_user.core_user_name, display_name: select_user.display_name});
      } else {
        Tools.axios('/core/CoreUserController/getUserList/leqeeaa',{}).then(response => {
          let user_list = response.data.data;
          sessionStorage.setItem('octet_user_list', JSON.stringify(user_list));
          let select_user = user_list.filter(option => { return option.core_user_id == userId})[0] || {};
          resolve({user_name: select_user.core_user_name, display_name: select_user.display_name});
        })
      }
   })
}

然后調(diào)用公共方法

methods: {
    async getUserName (id) {
      let user_obj = await Tools.getUserName(id);
      return user_obj.display_name + '（'+ user_obj.user_name+ '）'
    }
}

視圖中顯示

<span>{{ getUserName(a.user_id) }}</span>

但是 async 函數(shù)返回的是 promise 對(duì)象，所以在視圖中調(diào)用 async 方法并不能返回我想要的值。但是我又不想在 data 里面建一個(gè)字段來(lái)保存 user_obj, 所以想問(wèn)問(wèn)有沒(méi)有好的解決方案解決這個(gè)問(wèn)題。

備用方案

在登陸后直接請(qǐng)求到所有用戶數(shù)據(jù)，然后用 localStorage 存，這樣在界面中就不用再通過(guò)請(qǐng)求獲取，沒(méi)有了異步的煩惱。
但是這樣就有問(wèn)題，當(dāng)新增用戶之后 localStorage 并不會(huì)更新，你要重新登陸一下獲取用戶列表。