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