vue等兩個接口都返回結(jié)果再執(zhí)行下一步的實(shí)例
next 只能調(diào)用一次,這邊可以用 Promise.all 解決,等待兩個異步操作都返回結(jié)果後再 next:
beforeRouteEnter (to, from, next) { // Promise.all 會等到數(shù)組內(nèi)的 Promise 都 resolve 後才會繼續(xù)跑(then) Promise.all([ main._base({ methodName: 'QueryProductInfo', productId: to.params.id }), main._base({ methodName: 'QueryProductReview', type: '0', index: '0', count: '2', productId: to.params.id }) ]) .then( result => next( vm => { // 執(zhí)行結(jié)果會按照上面順序放在 result 數(shù)組內(nèi),所以 result[0],代表第一個函數(shù)的 resolve 結(jié)果 vm.product = result[0].data.product vm.shop = result[0].data.shop vm.evalData = result[1].data })) }
補(bǔ)充知識:vue 中多接口請求時 按順序執(zhí)行接口使用await async
我就廢話不多說了,大家還是直接看代碼吧~
async getSelectOrg () { console.log('----1') return axiosPost('/api/uum/org/orglist', { accessToken: localStorage.token, option: true}).then(response => { this.options_grade = [] if (response.data.data.length > 1) { this.options_grade.push({ value: '-1', label: '全部' }) this.formInline.organization = '-1' } else if (response.data.data.length === 1) { this.formInline.organization = response.data.data[0].orgCode } for (let i = 0; i < response.data.data.length; i++) { let tmp = {} tmp.value = response.data.data[i].orgCode tmp.label = response.data.data[i].orgName this.options_grade.push(tmp) } console.log('----2') }).catch(err => { console.log(err) }) }, async getSelect () { await this.getSelectOrg() console.log('----3') this.searchInfo() } }, mounted () { let that = this window.onresize = function () { // 定義窗口大小變更通知事件 // _this.screenWidth = document.documentElement.clientWidth // 窗口寬度 that.clientHeight = document.documentElement.clientHeight // 窗口高度 } this.getSelect() },
以上這篇vue等兩個接口都返回結(jié)果再執(zhí)行下一步的實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
拖拽插件sortable.js實(shí)現(xiàn)el-table表格拖拽效果
本文主要介紹了拖拽插件sortable.js實(shí)現(xiàn)el-table表格拖拽效果,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-02-02vue請求接口并且攜帶token的實(shí)現(xiàn)
本文主要介紹了vue請求接口并且攜帶token的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07解決vue中props對象中設(shè)置多個默認(rèn)值的問題
props中設(shè)置了默認(rèn)值,但是獲取時(獲取父頁面沒有傳的屬性) 打印出來是undefined,所以本文給大家介紹了解決vue中props對象中設(shè)置多個默認(rèn)值的問題,需要的朋友可以參考下2024-04-04用element的upload組件實(shí)現(xiàn)多圖片上傳和壓縮的示例代碼
這篇文章主要介紹了用element的upload組件實(shí)現(xiàn)多圖片上傳和壓縮的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02Vue關(guān)于數(shù)據(jù)綁定出錯解決辦法
這篇文章主要介紹了Vue關(guān)于數(shù)據(jù)綁定出錯解決辦法的相關(guān)資料,需要的朋友可以參考下2017-05-05