promise 异步问题。导致页面没有实时刷新的解决办法:改成同步
程序员文章站
2024-02-22 12:59:58
...
今天排查了好久。还是表哥这个老前端帮我解决了问题:
知识点:
promise 异步对象,和async await,
问题:这个地方在我们关注前后。需要实时变化。虽然我在点击了关注或者取消之后。都去再次请求了数据。但是因为异步的原因。总是慢半拍。每次关注的请求还没执行完。页面就提前去加载数据了。所以有一个加载的先后顺序。在network里面可以看见加载时间和顺序。我们下次避免这种问题就按同步处理就行,需要用到async await,
我的代码:
// 关注问题
async followQuestion() {
await followQuestion(this.questionId)
this.getQuestionDetail(this.questionId);
},//取消关注问题
async unFollowQuestion() {
//await 也就是等待这个请求执行完成了,才执行以下的操作
await unFollowQuestion(this.questionId)
this.getQuestionDetail(this.questionId);
},
import apiRequest from "../utils/request";
// 关注/取消关注问题actionContentId 是 String 被操作的内容的id(关注的问题ID)
export function followQuestion(actionContentId) {
let userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
// console.log(userInfo)
// 这里就是promise 对象return出去了,只有它能 await
return apiRequest("post", "qas/api/action/questionOpt", {
actionUserId: userInfo.userid,//操作人id注意id是小写的
actionType: 2,//操作类型。2是关注
actionContentId: actionContentId,//被操作的内容的id(关注的问题ID)
}).then((res) => {
// console.log(res)
if (res.state === 200) {
console.log("关注问题成功!")
}
}).catch((err) => {
if (err) {
console.log(err.message);
}
});
}
//取消关注问题actionContentId 是 String 被操作的内容的id(关注的问题ID)
export function unFollowQuestion(actionContentId) {
let userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
// console.log(userInfo)
return apiRequest("post", "qas/api/action/questionOpt", {
actionUserId: userInfo.userid,//操作人id
actionType: 2,//操作类型。2是关注
actionContentId: actionContentId,//被操作的内容的id(关注的问题ID)
isCancel: true
}).then((res) => {
// console.log(res)
if (res.state === 200) {
console.log("取消关注问题成功!")
}
}).catch((err) => {
if (err) {
console.log(err.message);
}
});
}