一、什么是Promise

目錄

一、什么是Promise

1.Promise到底是做什么的呢?

2.什么是回調地獄。

二、Promise基本語法

三、什么情況下需要使用Promise

四、Promise三種狀態

五、Promise鏈式調用

六、Promise的all方法調用（某一個需求需要發送兩次請求）

---

一、什么是Promise

1.Promise到底是做什么的呢?

Promise是異步編程的種解決方案 那什么時候我們會來處理異步事件呢? 一種很常見的場景應該就是網絡請求了。 我們封裝一個網絡請求的函數,因為不能立即拿到結果,所以不能像簡單的3+4=7—樣將結果返回。 所以往往我們會傳入另外—個函數,在數據請求成功時,將數據通過傳入的函數回調出去。 如果只是一個簡單的網絡請求,那么這種方案不會給我們帶來很大的麻煩 但是,當網絡請求非常復雜時,就會出現回調地獄。

2.什么是回調地獄。

我們來考慮下面的場景(有夸張的成分): 我們需要通過一個urI從服務器加載一個數據data,data1中包含了下一個請求的url2 我們需要通過data1取出url2,從服務器加載數據data2,data2中包含了下ー個請求的url3 我們需要通過data2取出urI3,從服務器加載數據data3,data3中包含了下ー個請求的ur4 發送網絡請求ur4,獲取最終的數據data4 上面的代有什么問題嗎? 正常情況下,不會有什么問題,可以正常運行并目獲取我們想要的結果 但是,這樣的代看而且不容易維護 我們更加期望的是一種更加優雅的方式來進行這種異步操作。 如何做呢?就是使用 Promise。——Promise可以以一種非常優雅的方式來解決這個問題。

二、Promise基本語法

1.這里,我們用個定時器來模擬異步事件: 假設下面的data是從網絡上1秒后請求的數據 console. log就是我們的處理方式。 這是我們過去的處理方式,我們將它換成 Promise代碼 這個例子會讓我們感覺脫褲放屁,多此一挙 首先,下面的 Promise代碼明顯比上面的代碼看起來還要復雜 其次,下面的 Promise代嗎中包含的 resolve、 reject、then、catch都是些什么東西? 我們先不管第一個復雜度的問題,因為這樣的一個屁大點的程序根本看不出來 Promise真正的作用. 2.上代碼 <script>// new Promise時有兩個參數，resolve, reject，這兩個參數同時又是函數new Promise((resolve, reject) => {// 1.第一次網絡請求setTimeout(function() {// 一秒后會執行console.log('time out')resolve('Hello world') // 調用resolve之后，會調用下面的then//失敗時調用reject// reject('Error data')}, 1000)}).then(data => {// 2.第一次拿到結果console.log(data)return new Promise((resolve, reject) => {// 3.第二次網絡請求setTimeout(function() {// 一秒后會執行console.log('time out2')resolve('Hello world2') // 調用resolve之后，會調用下面的thenreject('Error data2')}, 1000)}).then(data => {// 4.第二次拿到結果處理console.log(data)}).catch(error => {console.log(error)})//如果還有處理，可以繼續return new Promise}).catch(error => {console.log(error)})// new Promise是異步處理，不影響后面的邏輯console.log('最后的') </script> 3.另外一種寫法 <script>// new Promise時有兩個參數，resolve, reject，這兩個參數同時又是函數new Promise((resolve, reject) => {// 1.第一次網絡請求setTimeout(function() {// 一秒后會執行console.log('time out')resolve('Hello world') // 調用resolve之后，會調用下面的thenreject('Error data')}, 1000)}).then(data => {// 2.第一次拿到結果// 只寫一個then，可以傳入兩個函數，一個resolve執行，一個reject執行console.log(data)}, error => {console.log(error)})</script>

三、什么情況下需要使用Promise

在進行異步請求時，使用Promise對這個異步操作進行封裝。 在處理完結果之后，使用resolve方法就會調用promise后面的then方法；報錯之后，reject會調用catch方法。 在執行傳入的回調函數時，會傳入兩個參數，resolve、reject，本身又是函數

四、Promise三種狀態

首先，當我們開發中有異步操作時，就可以給異步操作包裝一個Promise。異步操作之后會有三種狀態： pending：等待狀態，比如正在進行網絡請求，或者定時器沒有到時間。 fulfill：滿足狀態，當我們主動回調了resolve時，就處于該狀態，并且會回調then() reject：拒絕狀態，當我們主動回調了reject時，就處于該狀態，并且會回調catch() ?

五、Promise鏈式調用

1.鏈式調用new Promise((resolve, reject) => {setTimeout(() => {resolve('aaa')}, 1000)}).then(res => {//1.自己處理10行代碼console.log(res, '第一層的10行處理代碼')// 2.對結果進行第一次處理，可以只用resolvereturn new Promise((resolve) => {resolve(res + '111')})}).then(res => {console.log(res, '第二層的10行處理代碼')return new Promise((resolve) => {resolve(res + '222')})}).then(res => {console.log(res, '第三層的10行處理代碼')})//???aaa 第一層的10行處理代碼 //???aaa111 第二層的10行處理代碼 //???aaa111222 第三層的10行處理代碼2.簡化鏈式new Promise((resolve, reject) => {setTimeout(() => {resolve('aaa')}, 1000)}).then(res => {//1.自己處理10行代碼console.log(res, '第一層的10行處理代碼')// 2.對結果進行第一次處理，可以只用resolvereturn Promise.resolve(res + '111')}).then(res => {console.log(res, '第二層的10行處理代碼')return Promise.resolve(res + '222')}).then(res => {console.log(res, '第三層的10行處理代碼')})//???aaa 第一層的10行處理代碼 //???aaa111 第二層的10行處理代碼 //???aaa111222 第三層的10行處理代碼3.極度簡化new Promise((resolve, reject) => {setTimeout(() => {resolve('aaa')}, 1000)}).then(res => {//1.自己處理10行代碼console.log(res, '第一層的10行處理代碼')// 2.對結果進行第一次處理，可以只用resolvereturn res + '111'}).then(res => {console.log(res, '第二層的10行處理代碼')return res + '222'}).then(res => {console.log(res, '第三層的10行處理代碼')})//???aaa 第一層的10行處理代碼 //???aaa111 第二層的10行處理代碼 //???aaa111222 第三層的10行處理代碼4.reject的簡寫new Promise((resolve, reject) => {setTimeout(() => {resolve('aaa')}, 1000)}).then(res => {//1.自己處理10行代碼console.log(res, '第一層的10行處理代碼')// 2.對結果進行第一次處理，可以只用resolvereturn Promise.reject(res + '111')//throw 'errormsg' //?手動拋出異常也可以}).then(res => {console.log(res, '第二層的10行處理代碼')return Promise.resolve(res + '222')}).then(res => {console.log(res, '第三層的10行處理代碼')}).catch(err => {console.log(err, 'err')})//aaa 第一層的10行處理代碼//aaa111 err

六、Promise的all方法調用（某一個需求需要發送兩次請求）

?????Promise.all([new Promise((resolve, reject) => {// 1.第一次請求setTimeout(() => {resolve('aaa1')}, 1000)}),new Promise((resolve, reject) => {// 2.第二次請求setTimeout(() => {resolve('aaa2')}, 2000)})]).then(results => {// 每個數組對應每個Promise，只有所有的Promise都執行完畢之后，才會調用then方法console.log(results[0])console.log(results[1])})

總結

以上是生活随笔為你收集整理的什么是Promise？前端开发人员会使用Promise简直就是如虎添翼的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。