前言
本文主要講解promise的鏈式呼叫的方法及其最終方案
應用場景
假如開發有個需求是先要請求到第一個資料，然后根據第一個資料再去請求第二個資料，再根據第二個資料去請求第三個資料...一直到最后得到真正想要的資料，我最初的做法是
setTimeout(() => { //這里用定時器來代替發請求 //data假設為后臺來的資料 let data1 = 1; console.log(data1); setTimeout(() => { let data2 = 2 + data1; console.log(data2); setTimeout(() => { let data3 = 3 + data2; console.log(data3); setTimeout(() => { let data4 = 4 + data3; console.log(data4); }, 100); }, 100); }, 100); }, 100);
顯然代碼是沒有任何問題的，但是如果在每次都在獲取資料過來還要進行資料的處理呢？那這種代碼就變得晦澀難懂且難以維護，搞不好維護你代碼的人****，于是這種情況下，Promise就是一個很好的選擇，
以上代碼就會變成這樣的形式
//鏈式呼叫 p.then(value=https://www.cnblogs.com/spider-man0818/archive/2021/10/25/>{},reason=>{
}).then(value=https://www.cnblogs.com/spider-man0818/archive/2021/10/25/>{
},reason=>{
})
接下來我們就一起來學習Promise的鏈式呼叫吧
實作方法
原理：每次呼叫then方法都return一個promise物件，因為promise帶有then方法，這樣就可以在上一個then后面再呼叫then方法，
const p = new Promise((resolve, reject) => { let data1 = "data1"; //后臺獲取到data1 console.log(data1); resolve(data1); }); p.then((res) => { return new Promise((resolve, reject) => { let data2 = res+"data2"; //后臺獲取到data2 console.log(data2); resolve(data2); }); }).then((res) => { console.log(res); }); // data1 // data1data2 // data1data2
看到這里，就會有人問了，這個代碼也好看不到哪里去啊，怎么就是一個好的選擇了，先等下，還沒出最終答案呢
剛剛我們說到，鏈式呼叫的原理是每次都在then方法里面回傳一個promise物件，通過資料查詢，我們會發現Promise的resolve方法回傳的就是一個Promise物件
于是剛剛的代碼就可以改成下面的形式
const p = new Promise((resolve, reject) => { let data1 = "data1"; //后臺獲取到data1 console.log(data1); resolve(data1); }); p.then((res) => { let data2 = res + "data2"; //后臺獲取到data2 console.log(data2); return Promise.resolve(data2); }).then((res) => { console.log(res); }); // data1 // data1data2 // data1data2
現在看起來是不是舒服很多，但是其實剛剛搜索resolve方法的時候你還會發現，then方法其實回傳的也是一個Promise物件
這樣子，最后方案就出來了
const p = new Promise((resolve, reject) => { let data1 = "data1"; //后臺獲取到data1 console.log(data1); resolve(data1); }); p.then((res) => { let data2 = res + "data2"; //后臺獲取到data2 console.log(data2); return data2; }).then((res) => { console.log(res); }); // data1 // data1data2 // data1data2
萬物皆有裂痕，是光進來的地方
參考來源
- 尚硅谷es6-11視頻
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/335131.html
標籤：其他