欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-02-22 12:59:58
...

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

知识点:

promise 异步对象,和async await,

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

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

 

我的代码:

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