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