es6 async与await实战

Posted cxscode

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了es6 async与await实战相关的知识,希望对你有一定的参考价值。

在使用js的时候,我们经常会遇到一个问题,就是我们需要等待请求返回再做下一步处理,之前的处理方式是通过ajax的success或者callback之类的方法,不过一层一层真的恶心,而且只是针对单个页面的业务,如果我们想把增删改查的业务封装起来,基本没可能,或者封装的很不优雅

下面来说一说通过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即可。

 

如果场景不是react和class用不了async 和await 怎么办呢?其实我的insert方法下还有调用一个方法apiPost体也有resolve,

export const apiPost = (url, configObj) => {
    if (typeof (configObj) === ‘undefined‘) {
        configObj = []
    }
    return new Promise(function (resolve, reject) {
        const reqUrl = base.host + ‘/‘ + url + ‘?token=‘ + localStorage.getItem(‘token‘);
        axios.post(reqUrl, qs.stringify({...configObj})).then(
            response => {
                let resulData = response.data
                resolve(resulData)
            }
        );
    })
}

  

在insert可以使用.then(function (res) { 来接收resolve过来的值,不过一对比就会发现多了很多(),{}了,不过是底层一点方法,只写一两次,所有就无所谓啦,最重要还是保持视图应用层的简洁

不吹水了,新年快乐

 

以上是关于es6 async与await实战的主要内容,如果未能解决你的问题,请参考以下文章

ReactNative进阶(三十六):ES6中async与await的使用方法详解

js异步回调Async/Await与Promise区别

js异步回调Async/Await与Promise区别 新学习使用Async/Await

es6之 async await 使用小计

async 与await 解决异步接口返回数据不能赋值的妙用

ES6 async/await语法