前言
本文主要是對Promise本身的用法做一個全面決議而非它的原理實作，如果你對Promise的用法還不是很熟悉或者想加深你對Promise的理解，我相信這篇文章一定會幫到你，
首先讓我們先了解一下JavaScript為什么會引入Promise
回呼地獄
讓我們先看這樣一段代碼，JQuery中ajax請求：
$.ajax({
url: "url1",
data: {},
success(res1) {
//獲取到第一個資料
console.log(res1);
//根據第一個數去去獲取第二個資料
$.ajax({
url: "url2",
data: {
query: res1.xxx,
},
success(res2) {
//獲取到第二個資料
console.log(res2);
//根據第二個數去去獲取第三個資料
$.ajax({
url: "url3",
data: {
query: res2.xxx,
},
success(res3) {
//獲取到第三個資料
console.log(res3);
//...
},
});
},
});
},
error(err) {
console.log(err);
},
});
我們會發現這些回呼一層又一層，這就被稱為回呼地獄(callback hell)，尤其業務邏輯復雜的時候這些回呼就會變得難以維護，于是Promise就出現了，我們再看一個使用promise封裝的axios請求：
axios
.get(url1, {})
.then((res1) => {
//獲取到第一個資料
console.log(res1);
//根據第一個數去去獲取第二個資料
return axios.get(url2, { query: res1.xxx });
})
.then((res2) => {
//獲取到第一個資料
console.log(res2);
//根據第二個數去去獲取第三個資料
return axios.get(url3, { query: res2.xxx });
})
.then((res3) => {
//獲取到第三個資料
console.log(res3);
//...
})
.catch((err) => {
console.log(err);
});
通過對比我們會發現Promise解決了傳統的回呼函式的回呼地獄問題，使得業務邏輯顯得更加清晰了，接下來我們就開始正式介紹Promise了，
概述
Promise是現代異步編程的基礎,在Promise回傳給我們的時候操作其實還沒有完成，但Promise物件可以讓我們操作最終完成時對其進行處理，無論成功還是失敗，
Promise的回傳有三種狀態分別是等待（pending）， 成功（fulfilled），拒絕（rejected），我們看以下示例(后續我們將用延時器setTimeout來代表我們的異步操作）
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1);
},1000);
});
console.log(promise1);
此時我們可以看到我們獲取的Promise是pending(等待的狀態)，
同樣當我們一秒鐘過后再去獲取Promise
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1);
}, 1000);
});
setTimeout(() => {
console.log(promise1);
}, 1000);
它得到的就是成功（fulfilled）狀態
然后我們將resolve換成reject
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
reject(1);
}, 1000);
});
setTimeout(() => {
console.log(promise1);
}, 1000);
它得到的便是拒絕（rejected）狀態，同時給你拋出了一個錯誤
基本使用
Promise建構式只有一個函式作為引數,這個函式會在一個Promise被實體化出來后會被立即執行
new Promise((resolve, reject) => {
console.log(1);
});
console.log(2);
此時輸出的結果是：1 2
Promise接收的函式有兩個引數，分別是resolve和reject，其中resolve代表一切正常的時候所呼叫的函式，reject則代表我們程式例外的時候所呼叫的函式，resolve函式傳入的引數用于向下一個then傳遞一個值,而reject函式傳入的引數則會被.catch捕捉，而Promise.finally則是在Promise狀態完成后觸發的一個回呼，即無論是resolve還是reject都會觸發
//成功示例
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("成功的值");
});
})
.then((res) => {
console.log(res); //成功的值
})
.catch((err) => {
//不會觸發
console.log(err);
})
.finally(() => {
console.log("end"); //end
});
//失敗示例
new Promise((resolve, reject) => {
setTimeout(() => {
reject("失敗的的值");
});
})
.then((res) => {
//不會觸發
console.log(res);
})
.catch((err) => {
console.log(err); ////失敗的值
})
.finally(() => {
console.log("end"); //end
});
以上便是Promise的基本使用，但是只掌握它的基本使用可不行，我們還需要對其更深入的研究
鏈式呼叫
當我們使用Promise的時候，只要我們在.then的回呼函式中回傳一個成功狀態（resolve）的Promise，則在下一個.then的回呼函式中便可獲取到這個成功函式（resolve）的引數，基于這個特性便有了Promise的鏈式呼叫，
new Promise((resolve, reject) => {
//這里一般會有一個網路請求或其它異步操作
resolve("成功的值1");
})
.then((res) => {
console.log(res); //成功的值1
return new Promise((resolve, reject) => {
//這里一般會有一個網路請求或其它異步操作
resolve("成功的值2");
});
})
.then((res) => {
console.log(res); //成功的值2
return new Promise((resolve, reject) => {
//這里一般會有一個網路請求或其它異步操作
resolve("成功的值3");
});
})
.then((res) => {
console.log(res); //成功的值3
//以此類推...
});
我們可以對其進行簡寫，比如
new Promise((resolve, reject) => {
//這里一般會有一個網路請求或其它異步操作
resolve("成功的值");
});
可以簡寫為
Promise.resolve('成功的值')
所以我們的鏈式呼叫可以簡寫為
new Promise((resolve, reject) => {
//這里一般會有一個網路請求或其它異步操作
resolve("成功的值1");
})
.then((res) => {
console.log(res); //成功的值1
return Promise.resolve("成功的值2");
})
.then((res) => {
console.log(res); //成功的值2
return Promise.resolve("成功的值3");
})
.then((res) => {
console.log(res); //成功的值3
//以此類推...
});
同樣的reject的簡寫方式也和resolve一樣
new Promise((resolve, reject) => {
//這里一般會有一個網路請求或其它異步操作
reject("失敗的值");
});
//簡寫為
Promise.reject('失敗的值')
一般我們在實際專案中一般會這樣寫
...
//網路請求中獲取到資料后
if(xxx){
//成功
return Promise.resolve('請求的值')
}
return Promise.reject('失敗原因')
...
其實.then中也會自動回傳Promise的封裝,也就是說這個鏈式呼叫我們可以直接這樣寫
new Promise((resolve, reject) => {
//這里一般會有一個網路請求或其它異步操作
resolve("成功的值1");
})
.then((res) => {
console.log(res); //成功的值1
return "成功的值2";
})
.then((res) => {
console.log(res); //成功的值2
return "成功的值3";
})
.then((res) => {
console.log(res); //成功的值3
//以此類推...
});
以上便是Promise的鏈式呼叫，Promise的鏈式呼叫一般用于這些步驟間有先后順序的操作，比如開頭舉的例子，需要使用前一個介面請求的資料作為引數去請求另一個介面的情形，
Promise中的all函式
在實際專案中你是否遇到過這樣一個情況：你有A、B、C三個介面（或則更多），C介面的引數需要用到A和B兩個介面的結果值，此時你為怎么做？
- 做法1
先請求A介面再請求B介面最后再根據AB介面的結果去請求C介面
new Promise((resolve, reject) => {
//請求A介面，這里用setTimeout模擬請求
setTimeout(() => {
resolve("A的結果");
}, 100);
})
.then((res) => {
//根據A結果請求B介面
setTimeout(() => {
return "B的請求結果";
}, 100);
})
.then((res) => {
//根據A和B結果請求C介面
setTimeout(() => {
console.log("C的請求結果");
}, 100);
})
.catch((err) => {
//這里暫不做錯誤考慮
});
這種寫法邏輯上是沒問題的，但是B和A的請求之間是完全沒有交集的，而瀏覽器的http請求是可以同時發起多個請求的，所以這種寫法很明顯增加了介面請求時間
- 做法2
在每個請求結束后都去呼叫請求C的函式，在這個函式中判斷兩個請求的資料是否都獲取到了，然后再進行處理
let isResultA = false;
let isResultB = false;
//請求A介面，這里用setTimeout模擬請求
setTimeout(() => {
isResultA = true;
getC()
}, 100);
//請求B介面，這里用setTimeout模擬請求
setTimeout(() => {
isResultB = true;
getC()
}, 100);
function getC() {
if (isResultA && isResultB) {
//根據A和B的結果請求C介面資料
setTimeout(() => {
console.log("C的請求結果");
}, 100);
}
}
很顯然這種在寫法上是很麻煩的，所以Promise提供了all方法
- 做法3
Promise.all接收一個iterable型別（Array，Map，Set 都屬于 ES6 的 iterable 型別），可以放多個Promise實體，最后.then中獲得的是這些輸入的Promise的resolve回呼的結果陣列，同時只要任何一個輸入的Promise的reject回呼執行或者輸入不合法的Promise就會立即拋出錯誤
Promise.all([
new Promise((resolve, reject) => {
//請求A介面，這里用setTimeout模擬請求
setTimeout(() => {
resolve("A的結果");
}, 2000);
}),
new Promise((resolve, reject) => {
//請求B介面，這里用setTimeout模擬請求
setTimeout(() => {
resolve("B的結果");
}, 1000);
}),
])
.then((res) => {
console.log(res[0]); //A的結果
console.log(res[1]); //B的結果
//根據A和B的結果請求C介面資料
setTimeout(() => {
console.log("C的請求結果");
}, 100);
})
.catch((err) => {
console.log(err);
});
Promise中的race函式
Promise.race方法回傳一個promise，一旦迭代器中的某個promise完成，回傳的promise就會被完成，簡單來說就是它接收的promise實體中誰快就用誰的結果，不管你的結果是resove的還是reject
Promise.race([
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("結果1");
}, 1000);
}),
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("結果2");
}, 500);
}),
new Promise((resolve, reject) => {
//請求B介面，這里用setTimeout模擬請求
setTimeout(() => {
reject("結果3");
}, 100);
}),
])
.then((res) => {
//不會觸發
console.log(res);
})
.catch((err) => {
console.log(err); //結果3
});
上面示例很顯然第三個Promise示例最先回傳結果，所以Promise.race便使用了第三個Promise的結果
Promise中的any函式
Promise.any函式它也接收一個Promise實體的可迭代物件，只要其中的一個promise實體成功，就回傳那個已經成功的promise，只有所有的promise實體都失敗才會回傳失敗的（reject）的陣列
Promise.any([
new Promise((resolve, reject) => {
setTimeout(() => {
reject("結果1");
}, 1000);
}),
new Promise((resolve, reject) => {
setTimeout(() => {
reject("結果2");
}, 500);
}),
new Promise((resolve, reject) => {
//請求B介面，這里用setTimeout模擬請求
setTimeout(() => {
reject("結果3");
}, 100);
}),
])
.then((res) => {
//不會觸發
console.log(res);
})
.catch((err) => {
console.log(err); //AggregateError: All promises were rejected
});
這個函式適用的場景可能不是很多，在這里我大概想到的一個場景就是：有三個介面A,B,C,這三個介面很不穩定但是它們回傳的成功結果都一樣，所以我們需要對這三個介面進行同時請求，只要它們其中有一個介面回傳成功，那么我們便用這個介面的值，所以這三個介面只要有一個可用我們便可拿到想要的結果
async和await
async和await其實就是promise的語法糖形式，它可以讓我們的異步代碼包裝成同步的形式理解，await顧名思義就是等待的意思，它必須使用在一個async的函式中，await后面跟的是一個實體化Promise，它回傳的值則是這個Promise成功回傳的 resolve 狀態值，其實它的用法很簡單，如下
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("結果");
}, 1000);
});
};
const getData = https://www.cnblogs.com/zdsdididi/archive/2022/08/18/async () => {
const res = await promiseFun();
console.log(res);//結果
};
getData();
如果我們把文章開頭的axios請求例子改為async,await的形式它將會是這個樣子
const getAxiosData = https://www.cnblogs.com/zdsdididi/archive/2022/08/18/async () => {
try {
const res1 = await axios.get(url1, {});
const res2 = await axios.get(url2, { query: res1.xxx });
const res3 = await axios.get(url2, { query: res2.xxx });
console.log(res3);
} catch (err) {
console.log(err);
}
};
getAxiosData();
此時的代碼邏輯看起來就會清晰很多
寫在最后
Promise的大致用法基本也就介紹完了，其實Promise還涉及到另一個方面的知識事件回圈（Event Loop） 還有宏任務微任務等，由于篇幅原因，這部分我會抽時間單獨寫一篇關于這方面的文章，同時如果你發現文中有錯誤或不妥的地方歡迎指出，一定及時修改，感謝~
創作不易，你的點贊就是我的動力！如果感覺這篇文章對你有所幫助的話就請點個贊吧，感謝orz
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502260.html
標籤：其他