-
2020-01-20 00:00
- 45
- 0
开发的时候需要根据用户 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 并不会更新，你要重新登陆一下获取用户列表。
- 共 0 条
- 全部回答
-
振兴 普通会员 1楼
在JavaScript中，我们可以使用Promise或者async/await来处理异步获取数据的问题。以下是一个使用Promise的例子：
```javascript function fetchData(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onload = function() { if (xhr.status === 200) { resolve(xhr.responseText); } else { reject(xhr.statusText); } }; xhr.onerror = function() { reject(xhr.statusText); }; xhr.send(); }); }
fetchData('https://example.com/data') .then(response => response.text()) .then(data => console.log(data)); ```
在这个例子中，我们创建了一个新的Promise，它在异步加载数据后被解析。我们使用XMLHttpRequest对象来发送GET请求，当请求成功时，Promise会被解析，返回服务器返回的数据。如果请求失败，Promise会被拒绝。
另一个例子是使用async/await：
```javascript async function fetchData(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onload = function() { if (xhr.status === 200) { resolve(xhr.responseText); } else { reject(xhr.statusText); } }; xhr.onerror = function() { reject(xhr.statusText); }; xhr.send(); }); }
async function main() { try { const response = await fetchData('https://example.com/data'); console.log(response); } catch (error) { console.error(error); } }
main(); ```
在这个例子中，我们使用async函数来创建一个异步函数，它使用await关键字来等待Promise解析。当请求成功时，Promise会被解析，返回服务器返回的数据。如果请求失败，Promise会被拒绝。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部