es6 async與await實戰
阿新 • • 發佈:2018-02-12
let es6 component bmi 新增 視圖應用 base fresh url
在使用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實戰