簡單記錄下Promise的使用

2020-12-10 青春歲月共勉

前言：談到promise，我們都知道它可能有三種狀態：等待(pending)、已完成(fulfilled)、已拒絕(rejecte),而且一個promise只可能從「等待」轉到「完成」態或者「拒絕」態；且狀態一旦改變便是不可逆的，談到promise，很多人想到的就是解決回調地獄的問題，當我們在需要多個異步請求都執行完再執行下一步操作時，可以考慮使用promise。這裡只簡單記錄下promise的使用。

1.簡單的使用：

當前案例：

有兩個異步請求a和b，a請求返回的結果有b請求需要必須傳的請求參數：

a請求成功，進入resolve，b請求執行

a請求返回失敗，進入reject，直接進入catch，列印error信息(失敗)

2.promise的all函數使用：

隨便一個請求隨機數小於5，終將直接進入promise.all的catch

只有當三個請求隨機生成的數字都大於5時才能進入promise.all的then裡邊，

返回的結果是一個數組，是a,b,c請求resolve的結果(成功)。

到這裡發現，使用promise.all時，只有當a，b，c請求都成功時，即進入resolve時，才能執行promise.all的then裡邊，否則終將都會進入promise的catch。

如果需要不管a，b，c是否都成功還是有失敗的，都輸出他們的返回結果，只需對著三個請求都catch下即可：

以a請求為例：(b,c請求同樣)

最終三請求不管成功與失敗，都將會返回結果，即都進入promise.all的then回調裡邊，我們可以清楚地知道三請求的返回結果分別是啥。

任意一個失敗
全部都失敗
全部都成功

相關焦點

  • ES6之Promise的使用
    通常而言，如果你不知道一個值是否是Promise對象，使用Promise.resolve(value) 來返回一個Promise對象,這樣就能將該value以Promise對象形式使用。xhr.responseText);xhr.onerror = () => reject(xhr.statusText);xhr.send();});};示例非常簡單的例子
  • Promise 初使用
    promise初使用promise是es6是新增的構造器，用來提供另一種異步代碼的實現方案。
  • 如何使用Promise.race() 和 Promise.any() ?
    在請求數據時，顯示加載動畫使用加載動畫開發中是非常常見。當數據響應時間較長時，如果沒使用加載動畫，看起來就像沒有響應一樣。但有時，響應太快了，我們需要加載動畫時，增加一個非常小延遲時間，這樣會讓用戶覺得我是在經常請求過來的。要實現這一點，只需使用Promise.race()方法，如下所示。
  • 在Node.js中,使用Promise.prototype.finally
    本文將向您展示：如何使用Promise.prototype.finally()以及如何編寫自己的簡化polyfill。一、什麼是Promise.prototype.finally()假設您創建了一個新的promise：您可以使用.then()函數將諾言連結在一起。請注意，它.then()帶有兩個功能參數。
  • JavaScript中的Promise使用詳解
    熟悉前端開發的都一定寫過回調方法（callback），簡單的說，回調方法是一個函數被作為參數傳遞給另一個函數，比如下面的代碼
  • JS常見面試題之 詳解Promise使用與原理
    例如用電飯鍋煮米飯，從【米下鍋開始定時】到【定時結束】，這是煮米飯的生命周期。只是正常的需求下，我們一般還是需要對成功和失敗都要處理。背景說了那麼多，我們看看catch()怎麼用：promise.catch(function (error) { console.log(error)})其實用法很簡單，它其實等價於是有reject處理函數的then()：
  • 「 譯」Promise.all的深入理解以及與Promise.allSettled的比較
    我們將使用簡單的示例，您將可以輕鬆地自己複製它們。因此，建議您使用某種在線編輯器運行示例繼續閱讀本文，例如：repl。好吧，因為其中一個Promise引發了錯誤，所以Promise.all也會簡單地重新拋出該錯誤，即使所有其他Promises都已成功解決。也許您已經發現該方法存在問題。即使三個Promise中有兩個沒有失敗，我們仍然不能以任何方式使用它們的結果，僅僅是因為其中一個承諾拋出了錯誤。
  • 在 Node.js 中使用 Promise.prototype.finally
    const promiseFinally = require('promise.prototype.finally');// 向 Promise.prototype 增加 finally()promiseFinally.shim();const promiseThatFulfills = new Promise((resolve) =
  • 使用Promise模式來簡化JavaScript的異步回調
    var showMsg = function（）{// 構造promise實例var promise = new E.Promise（）;setTimeout（function（）{alert（ 『hello』 ）;// 改變promise的狀態promise.resolve（
  • JavaScript Promise啟示錄
    好了，下面我們來認識下Promise/A+規範：一個promise可能有三種狀態：等待（pending）、已完成（fulfilled）、已拒絕（rejected）一個promise的狀態只可能從「等待」轉到「完成」態或者「拒絕」態，不能逆向轉換，同時「完成」態和「拒絕」態不能相互轉換promise必須實現then
  • JavaScript 異步與 Promise 實現
    本篇將介紹Promise，讀完你應該了解什麼是Promise，為什麼使用Promise，而不是回調函數，Promise怎麼使用，使用Promise需要注意什麼，以及Promise的簡單實現。使用promise最基礎的方式是使用它的 then方法，該方法會註冊兩個回調函數，一個接收promise完成的最終值，一個接收promise被拒絕的原因。PROMISES/A你可能還會想問Promises/A是什麼，和Promises/A+有什麼區別。
  • JavaScript異步與Promise實現
    本篇將介紹Promise，讀完你應該了解什麼是Promise，為什麼使用Promise，而不是回調函數，Promise怎麼使用，使用Promise需要注意什麼，以及Promise的簡單實現。使用promise最基礎的方式是使用它的then方法，該方法會註冊兩個回調函數，一個接收promise完成的最終值，一個接收promise被拒絕的原因。PROMISES/A你可能還會想問Promises/A是什麼，和Promises/A+有什麼區別。
  • 30分鐘,讓你徹底明白Promise原理
    相信仔細的人應該可以看出來，then方法應該能夠鏈式調用，但是上面的最基礎簡單的版本顯然無法支持鏈式調用。鏈式Promise是指在當前promise達到fulfilled狀態後，即開始進行下一個promise（後鄰promise）。那麼我們如何銜接當前promise和後鄰promise呢？（這是這裡的難點）。其實也不是辣麼難，只要在then方法裡面return一個promise就好啦。
  • 壓箱底筆記:Promise和Async/await的理解和使用
    ()返回的新 promise 的結果狀態由什麼決定?簡單表達：由 then()指定的回調函數執行的結果決定詳細表達：如果拋出異常, 新 promise 變為 rejected, reason 為拋出的異常如果返回的是非 promise 的任意值, 新 promise 變為 resolved, value 為返回的值如果返回的是另一個新
  • ES6 Promise 的最佳實踐
    處理 promise rejections沒有什麼比 unhandled promise rejection（未處理的 promise 錯誤） 更讓人頭疼了。當一個 promise 拋出一個錯誤，但你沒有使用Promise#catch來捕獲程序錯誤時，就出現這種情況。
  • 英語每日一句:A promise is a promise
    新東方網>英語>英語學習>口語>每日一句英語>正文英語每日一句：A promise is a promise 2013-01-28 16:19 來源：恆星英語 作者：
  • 從promise讀懂JavaScript異步編程
    從《setTimeout(fn,0)函數剖析JavaScript的執行機制》一文已經說明了同步和異步的區別，而這篇文章將更深入的去理解什麼是JS的異步編程，以及promise，async，await等的使用。從而更好的為前端編程打好堅實的基礎。
  • 看懂此文,手寫十種Promise!
    從then方法的命名中也可以看出，它可不僅僅只是get數據這麼簡單，它的中文含義是然後，也就是異步操作的下一步操作該做什麼。promise僅僅是一個容器，其中管理的狀態和數據的含義一直都是由調用者決定的。4.問題：為什麼需要判斷pending狀態，這個狀態下的代碼邏輯為什麼是暫存回調函數而不是調用回調函數？promise的pending狀態設計的目的就是用來解決異步操作導致時容器數據讀寫時序混亂的問題。
  • 理解異步之美--- Promise與async await(一)
    言歸正傳：寫一個簡單的promise當Promise執行的內容符合你預期的成功條件的話，就調用resolve函數，失敗就調用reject函數，這兩個函數的參數會被promise捕捉到。可以在之後的回調中使用。創建一個承諾我們已經做完了，那麼如何使用承諾後的結果呢？
  • JS專題系列之Promise的原理及實現
    promise解決的問題回調地獄，代碼難以維護， 常常第一個的函數的輸出是第二個函數的輸入這種現象promise可以支持多個並發的請求，獲取並發請求中的數據這個promise可以解決異步的問題，本身不能說promise是異步的二、分析Promise如果我們想要封裝promise就需要考慮以下幾個問題