提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

ES6 async 与 await 实战

ES6async 实战 await
2023-09-11 14:15:30 时间

下面来说一说通过async和await方式来辅助请求和封装

首先我们定义一个类，定义一个async方法，才可以使用await

class JForm extends React.Component {
 
  handleSubmit = () => {
    ...
    this.handleInsert(obj)
    ... 
  }

  async handleInsert(obj) {
    let url = '...'
    let res = await insert(url, obj)
    if(res){
      this.hideModal();
      this.props.refresh();
    }
  };
}

上面是一个react的一段代码，当触发handleSubmit 表单提交方法，会调用handleInsert方法，此时会等await insert 执行完返回结果再执行if(res)的判断

我们再来看看重要的insert方法应该怎么写呢

export function insert(url, obj) {
  return new Promise(function (resolve, reject) {
    const hide = message.loading('正在新增...', 0);
    let res = apiPost(url, obj).then(function (res) {
      const {data, ret, msg} = res;
      hide();
      if(ret==200) {
        Success(`添加1条数据`);
      } else {
        Error(res.msg);
      }
      resolve(ret==200?true:false)
    })
  })
}

看起来貌似有点复杂？其实核心的代码只有下面的部分

export function insert(url, obj) {
  return new Promise(function (resolve, reject) {
    resolve(ret==200?true:false)
  })
}

对的，只有 return new Promise 和 resolve() ，resolve里面的data就是let res要接收的值了，我们可以在请求后将结果传入resolve即可。

相关文章