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

男娘i 2022-12-03 05:13 136阅读 0赞

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

知识点：

promise 异步对象，和async await，

问题：这个地方在我们关注前后。需要实时变化。虽然我在点击了关注或者取消之后。都去再次请求了数据。但是因为异步的原因。总是慢半拍。每次关注的请求还没执行完。页面就提前去加载数据了。所以有一个加载的先后顺序。在network里面可以看见加载时间和顺序。我们下次避免这种问题就按同步处理就行，需要用到async await，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70][]

我的代码：

// 关注问题
        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);
        }
      });
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70]: /images/20221123/5960b6a9b03849cc9ba90f03bce59840.png