本文主要介紹實(shí)際開發(fā)過程中對(duì)多接口調(diào)用的優(yōu)化方案设塔，Promise和async/await有所了解部翘，這里就不再贅訴，可閱讀之前的文章http://www.reibang.com/p/91cf026d365d拿撩。
場(chǎng)景分析
- 六個(gè)無依賴關(guān)系的異步接口怔软。（某個(gè)接口不需要調(diào)用其他接口的返回值）
- 各個(gè)接口封裝成promise風(fēng)格垦细。
functionName () {
return new Promise((resolve,reject) => {
// 此處接口調(diào)用
// 例如
axios.get(url, params)
.then(res => {
resolve(res)
})
.catch(err => {
reject(err)
})
})
}
- 附一份真實(shí)代碼，這里對(duì)請(qǐng)求進(jìn)行了封裝挡逼，和一些信息提示括改、鎖屏等。無需關(guān)注家坎，參考①②③④處即可嘱能。
// 更新申請(qǐng)報(bào)價(jià)還款計(jì)劃表
updatecltrlpymtschdl (QUOT_PYMNT_SCHDL_TBL_ITEM) {
let vm = this
return new Promise((resolve, reject) => { // ①
vm.hlsPopup.showLoading('loading')
vm.hlsHttp.post($config.basePath + 'updatecltrlpymtschdl', { // ②
'P_USER_ID': window.localStorage.userId,
'P_GEO_CNTRY_ID': '9',
'P_CLTRL_PYMT_SCHDL_IN_TBL': [{
'P_CLTRL_PYMT_SCHDL_IN_TBL_ITEM': QUOT_PYMNT_SCHDL_TBL_ITEM,
}],
}).then(res => { // ③
vm.hlsPopup.hideLoading()
if (res.OutputParameters.P_ERROR_MSG == 'SUCCESS') {
// vm.hlsPopup.showLongCenter('還款計(jì)劃表更新成功')
resolve('還款計(jì)劃表更新成功')
} else {
// vm.hlsPopup.showError('還款計(jì)劃表更新失敗' + res.OutputParameters.P_ERROR_MSG)
reject('還款計(jì)劃表更新失敗' + res.OutputParameters.P_ERROR_MSG)
}
}).catch(err => { // ④
vm.hlsPopup.hideLoading()
reject('還款計(jì)劃表更新失敗' + err)
})
})
},
- 簡單說明：隨意找的一個(gè)接口，其他接口類似虱疏。該方法返回一個(gè)promise,url和參數(shù)根據(jù)實(shí)際開發(fā)而定惹骂。接口調(diào)用成功resolve成功數(shù)據(jù)，失敗reject失敗信息做瞪。
- Promise.all()包裝：該方法接受一個(gè)數(shù)組做參數(shù)对粪，數(shù)組中是各異步接口執(zhí)行函數(shù)，執(zhí)行成功返回一個(gè)數(shù)組装蓬，元素為各接口的resolve值衩侥，失敗返回第一個(gè)捕獲的錯(cuò)誤信息。
async saveDetails () {
Promise.all([vm.saveTransInfo(), vm.updatecltrlfeedtls(), vm.updatecltrlpymtdtls(), vm.updatecltrlsubsidydetails(), vm.updatecltrlinsurdetails(), vm.updatecltrlpymtschdl(QUOT_PYMNT_SCHDL_TBL_ITEM)]).then(res => {
vm.hlsPopup.hideLoading()
vm.hlsPopup.showLongCenter('更新成功') // 此處不需要對(duì)返回值做特殊處理矛物，所以直接給出成功提示。
}).catch(err => {
vm.hlsPopup.hideLoading()
vm.hlsPopup.showError(err)
})
},
注意此時(shí)Promise.all執(zhí)行需在async函數(shù)內(nèi)執(zhí)行
與async/await的比較
總所周知跪但，async/await號(hào)稱解決地獄回調(diào)的最終方案履羞，確實(shí)如此峦萎，毋庸置疑。但是每一個(gè)await執(zhí)行完過后才能繼續(xù)執(zhí)行下面的代碼忆首，存在上面場(chǎng)景是往往會(huì)造成額外的等待爱榔，增加鎖屏?xí)r間，用戶體驗(yàn)差糙及。
場(chǎng)景不同详幽，適當(dāng)調(diào)整
