vue等兩個接口都返回結(jié)果再執(zhí)行下一步的實例
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
}))
}
補充知識: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í)行下一步的實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue中使用fetch讀取本地txt文件的技術(shù)實現(xiàn)
在Vue.js應(yīng)用開發(fā)中,有時我們需要從本地讀取文本文件(如 .txt 文件)并將其內(nèi)容展示在頁面上,這種需求在處理配置文件、日志文件或靜態(tài)數(shù)據(jù)時非常常見,本文將詳細(xì)介紹如何在Vue中使用 fetch API 讀取本地 .txt 文件,并提供多個示例和使用技巧2024-10-10
Vue 組件事件觸發(fā)和監(jiān)聽實現(xiàn)源碼解析
這篇文章主要為大家介紹了Vue 組件事件觸發(fā)和監(jiān)聽實現(xiàn)源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12
Vue+elementUI實現(xiàn)多圖片上傳與回顯功能(含回顯后繼續(xù)上傳或刪除)
這篇文章主要介紹了Vue+elementUI實現(xiàn)多圖片上傳與回顯功能(含回顯后繼續(xù)上傳或刪除),本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
vue項目中實現(xiàn)el-dialog組件可拖拽效果
本文主要介紹了vue項目中實現(xiàn)el-dialog組件可拖拽效果,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-01-01
vue-cli2與vue-cli3在一臺電腦共存的實現(xiàn)方法
這篇文章主要介紹了vue-cli2與vue-cli3在一臺電腦共存的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09

