promise 异步问题。导致页面没有实时刷新的解决办法:改成同步

今天排查了好久。还是表哥这个老前端帮我解决了问题:

知识点:

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);
    }
  });
}

猜你喜欢

转载自blog.csdn.net/qq_22182989/article/details/108348120
今日推荐