es6 async与await实战

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

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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方法应该怎么写呢

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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)     })   }) }

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

?

1 2 3 4 5

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，

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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过来的值，不过一对比就会发现多了很多(),{}了，不过是底层一点方法，只写一两次，所有就无所谓啦，最重要还是保持视图应用层的简洁

不吹水了，新年快乐