关于 javascript 异步获取返回数据的问题

Question

开发的时候需要根据用户 id 获取用户名，我的设想是将用户列表存在 sessionStorage 里面,
然后写一个公共方法，传入 id 即可获得用户名。若是发现 sessionStorage 里面没存，则发送
axios 请求获取列表，存在 sessionStorage 里面，再根据 id 获取用户名

因为是异步的，所以想用 async/await 获得。

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

getUserName: function (userId) {  // 根据 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});
        })
      }
   })
}

然后调用公共方法

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 函数返回的是 promise 对象，所以在视图中调用 async 方法并不能返回我想要的值。但是我又不想在 data 里面建一个字段来保存 user_obj, 所以想问问有没有好的解决方案解决这个问题。

备用方案

在登陆后直接请求到所有用户数据，然后用 localStorage 存，这样在界面中就不用再通过请求获取，没有了异步的烦恼。
但是这样就有问题，当新增用户之后 localStorage 并不会更新，你要重新登陆一下获取用户列表。

Answer 1

想要从promise中拿到数据，还是存到data中方便。data是双向绑定的数据，直接就能更新视图了。

getUserName: async function (userId) {
    const octet_user_list = sessionStorage.getItem('octet_user_list')
    let user_list;
    let select_user;
    if (octet_user_list) {
        user_list = JSON.parse(octet_user_list);
        select_user = user_list.find(option=>option.core_user_id === userId) || {};
    } else {
        const response = await Tools.axios('/core/CoreUserController/getUserList/leqeeaa',{});
        user_list = response.data.data;
        sessionStorage.setItem('octet_user_list', JSON.stringify(user_list));
        select_user = user_list.find(option=>option.core_user_id === userId) || {};
    }
    return {
        user_name: select_user.core_user_name,
        display_name: select_user.display_name
    };
}

data(){
    return {
        user_obj:{
            display_name:'',
            user_name:''
        }
    };
}

methods: {
    async getUserName (id) { 
      this.user_obj = await Tools.getUserName(id); 
    }
}

<span>{{ user_obj.display_name + '（'+ user_obj.user_name+ '）' }}</span>