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