React 博客系列 (3) Promise异步更新React状态

Promise封装axios数据查询

github个人博客源码持续更新中。。。

小白在实施的过程中，前端请求数据刷新数据遇到了数据同步的问题。

• 数据请求方法

getAtricles() {
    console.log("getAtricles")
    const url = `${CONFIG.server}/api/article/queryall`
    var result;   
      console.log(url)
      axios.post(url)
        .then(function(response) {
          if (response.data.status == -1) {
            message.info(response.data.msg);
          } else {
          console.log("查询成功")
            return response.data.result;
          }
        })
        .catch(function(error) {
          message.info(error);
        })
  }

• 状态刷新方法

reloadData = () => {
    this.setState({
      loading: true
    });

    console.log("开始查询");

    let atricles = this.getAtricles();  
    console.log(atricles);
      let data = [];

      console.log("结果映射");

      atricles.map((item, index) => {
        data.push({
          key: item._id,
          index: index,
          title: item.title
        });
      })

      console.log("更新状态");

      this.setState({
        selectedRowKeys: [],
        loading: false,
        data: data
      });
  }

• 执行后结果

  • 开始查询
  • undefined
  • 结果映射
  • ×××报错
  • 查询成功

  未待查询结果返回，就执行了状态刷新，故 console.log(atricles)会出现undefined

---

• 解决方法
  查阅资料后，用Promise解决此问题

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。

数据请求方法返回promise

 getAtricles() {
    console.log("getAtricles")
    const url = `${CONFIG.server}/api/article/queryall`
    var result;
    var promise = new Promise((resolve, reject)=> {
      console.log(url)
      axios.post(url)
        .then(function(response) {
          if (response.data.status == -1) {
            message.info(response.data.msg);
          } else {
            console.log("查询成功")
            resolve(response.data.result);
          }
        })
        .catch(function(error) {
          message.info(error);
        })
    })
    return promise;
  }

状态刷新方法在resolve中执行，个人理解resolve，reject都是一种回调函数callback

reloadData = () => {
    this.setState({
      loading: true
    });

    console.log("开始查询");
    const promise = this.getAtricles();
    promise.then(atricles => {
      console.log(atricles);
      let data = [];
      if (!atricles) return;
      console.log("结果映射");
      atricles.map((item, index) => {
        data.push({
          key: item._id,
          index: index,
          title: item.title
        });
      })

      console.log("更新状态");
      this.setState({
        selectedRowKeys: [],
        loading: false,
        data: data
      });

    }).catch((error) => {
      message.error(error)
    });

  }

• 执行结果
  
  • 开始查询
  • 查询成功
  • atricles [Object]
  • 结果映射
  • 更新状态