JS多次請(qǐng)求接口按順序依次執(zhí)行解決辦法
需求:在開(kāi)發(fā)中需要同時(shí)請(qǐng)求多個(gè)接口,但是需要請(qǐng)求按順序執(zhí)行。比如先拿到接口a的返回值shopId,作為接口b的請(qǐng)求參數(shù)再調(diào)接口拿到倉(cāng)庫(kù)列表。
解決辦法: 將接口a封裝在Promise中,在調(diào)用Promise前加上await,await會(huì)等待Promise中執(zhí)行完resolve時(shí),才會(huì)再進(jìn)行下一步操作。
// 1、獲取用戶列表,將第一位用戶的門店設(shè)置為當(dāng)前門店 getUsers() { return new Promise((resolve, reject) => { let data = { limit: 999, page: 1, roleIds: "1,2", bindStatus: 0, }; getBuyUserList(data) .then((res) => { this.userList = res.list; if (!this.form.buyId) { this.form.buyUserId = res.list[0].userId; this.form.shopId = res.list[0].shopId; } // promise封裝的接口里面可以沒(méi)有return,但是一定要調(diào)用 resolve 函數(shù),表明異步任務(wù)順利完成且返回結(jié)果值 resolve(); }) .catch((error) => { reject(error); }); }); }, ///2、設(shè)置倉(cāng)庫(kù)的默認(rèn)項(xiàng) setDefaultSelection() { let data = { page: 1, limit: 10, shopId: this.form.shopId, //只篩選當(dāng)前門店關(guān)聯(lián)的倉(cāng)庫(kù) }; getWarehouseList(data).then((res) => { this.warehouseList = res.list; if (!this.form.buyId) { this.form.warehouseId = this.warehouseList[0].warehouseId; this.form.warehouseName = this.warehouseList[0].name; } }); }, // Vue實(shí)例被創(chuàng)建后立即調(diào)用接口獲取篩選項(xiàng)數(shù)據(jù) async created() { await this.getUsers(); this.setDefaultSelection(); }
Promise對(duì)象
簡(jiǎn)單說(shuō)就是一個(gè)容器,里面保存著某個(gè)未來(lái)才會(huì)結(jié)束的事件(通常是一個(gè)異步操作)的結(jié)果。
Promise 是一個(gè)對(duì)象,Promise 提供統(tǒng)一的 API,各種異步操作都可以用同樣的方法進(jìn)行處理。axios 的內(nèi)部實(shí)現(xiàn)原理就是通過(guò) Promise 實(shí)現(xiàn)的。
Promise對(duì)象的兩個(gè)特點(diǎn)
- 對(duì)象的狀態(tài)不受外界影響。有三種狀態(tài):pending(進(jìn)行中)、fulfilled(成功)和rejected(失?。?。只有異步操作的結(jié)果,可以決定當(dāng)前是哪一種狀態(tài),任何其他操作都無(wú)法改變這個(gè)狀態(tài)
- 一旦狀態(tài)改變,就不會(huì)再變,任何時(shí)候都可以得到這個(gè)結(jié)果。Promise對(duì)象的狀態(tài)改變,只有兩種可能:從pending變?yōu)閞esolved和從pending變?yōu)閞ejected。只要這兩種情況發(fā)生,狀態(tài)就凝固了,不會(huì)再變了,會(huì)一直保持這個(gè)結(jié)果
Promise對(duì)象是一個(gè)構(gòu)造函數(shù),用來(lái)生成Promise實(shí)例,帶有一個(gè)回調(diào)函數(shù),回調(diào)函數(shù)的兩個(gè)參數(shù)是 resolve(成功) 和 reject(失?。?/strong>,這兩個(gè)參數(shù)他們也是函數(shù)。
鏈?zhǔn)秸{(diào)用then方法
then方法的第一個(gè)參數(shù)是resolved狀態(tài)的回調(diào)函數(shù),第二個(gè)參數(shù)是rejected狀態(tài)的回調(diào)函數(shù),它們都是可選的。
但是規(guī)范化的寫法是調(diào)用then和catch方法。
let p = Promise.resolve("foo"); // 等價(jià)于 let p = new Promise((resolve) => { resolve("foo"); }); p.then((data) => { console.log(data); //輸出'foo' }); var p2 = new Promise(function (resolve, reject) { var flag = false; if(flag){ resolve('這是數(shù)據(jù)2'); }else{ reject('這是數(shù)據(jù)2'); } }); p2.then(function(data){//狀態(tài)為fulfilled時(shí)執(zhí)行 console.log(data); console.log('這是成功操作'); },function(reason){ //狀態(tài)為rejected時(shí)執(zhí)行 console.log(reason); console.log('這是失敗的操作'); });
總結(jié)
到此這篇關(guān)于JS多次請(qǐng)求接口按順序依次執(zhí)行解決辦法的文章就介紹到這了,更多相關(guān)JS多次請(qǐng)求接口按順序執(zhí)行內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript使用pop方法移除數(shù)組最后一個(gè)元素用法實(shí)例
這篇文章主要介紹了JavaScript使用pop方法移除數(shù)組最后一個(gè)元素,實(shí)例分析了javascript中pop方法的使用技巧,需要的朋友可以參考下2015-04-04javaScript產(chǎn)生隨機(jī)數(shù)的用法小結(jié)
這篇文章主要介紹了javaScript產(chǎn)生隨機(jī)數(shù)的用法小結(jié),包括JavaScript Math.random()內(nèi)置函數(shù) ,Js 隨機(jī)數(shù)產(chǎn)生6位數(shù)字的代碼,需要的朋友可以參考下2018-04-04深入理解JavaScript系列(11) 執(zhí)行上下文(Execution Contexts)
本章我們要講解的是ECMAScript標(biāo)準(zhǔn)里的執(zhí)行上下文和相關(guān)可執(zhí)行代碼的各種類型2012-01-01微信小程序使用for循環(huán)動(dòng)態(tài)渲染頁(yè)面操作示例
這篇文章主要介紹了微信小程序使用for循環(huán)動(dòng)態(tài)渲染頁(yè)面操作,結(jié)合實(shí)例形式分析了微信小程序使用for語(yǔ)句獲取data數(shù)據(jù)渲染頁(yè)面相關(guān)操作技巧,需要的朋友可以參考下2018-12-12javascript 動(dòng)態(tài)生成私有變量訪問(wèn)器
創(chuàng)建一個(gè)新的用戶對(duì)象,接受一個(gè)有許多屬性的對(duì)象作為參數(shù)2009-12-12js中 計(jì)算兩個(gè)日期間的工作日的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js中 計(jì)算兩個(gè)日期間的工作日的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08JS模擬實(shí)現(xiàn)京東快遞單號(hào)查詢
這篇文章主要為大家詳細(xì)介紹了JS模擬實(shí)現(xiàn)京東快遞單號(hào)查詢,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11