【個人向整理】Promise

2bdenny 發布于2019-08-26 12:02 / 3216人閱讀

摘要：方法而對象本身，有一些方法查看的原型，發現它內置有幾個方法參數處理成功的函數，處理錯誤的函數返回值返回一個對象，所以可以鏈式調用。參數返回值的參數應該是函數，傳入非函數則會發生值穿透。

前言

網上關于Promise的文章確實是非常多了，但是自己實踐的并不多，這里是針對自己的一個知識點小結和梳理，當然啦如果有錯誤歡迎提出^_^。

初定義

定義：Promise對象用于一個異步操作的最終完成/失敗及其結果值的表示。
使用原因：避免回調嵌套層次過多。
擁有狀態：

pending：初始/未定狀態，初始化Promise時，調用executor函數后的狀態。

fulfilled：成功狀態。

rejected：失敗狀態。

狀態轉化：

pending -> fulfilled：操作成功

pending -> rejected：操作失敗

狀態轉化是單向的，不可逆轉。

最基本用法：
可以看到創建一個Promise實例，傳入的參數是一個函數，這個函數稱為executor/執行器。

new Promise((resolve, reject) => {
    if (success) {
        resolve(a) // pending to resolved
    } else {
        reject(err) // pending to rejectd
    }
})

方法

而Promise對象本身，有一些方法：

race()

reject()

resolve()

all()

查看Promise的原型，發現它內置有幾個方法：

catch()

finally()

then()

Promise.prototype.then()

參數：處理成功的函數，處理錯誤的函數

返回值：返回一個Promise對象，所以可以鏈式調用。

promise.then(
    () => { console.log("我是成功后被執行的") },
    () => { console.log("我是失敗后被執行的") })

Promise.prototype.catch()

參數：捕捉的錯誤/reject()傳來的參數

返回值：返回一個Promise對象，所以可以鏈式調用。

Promise和then()中拋出錯誤能夠不斷傳遞，就能夠在下一個catch()中統一處理，所以一般省略then中的第二個失敗執行的函數。

promise.then(
    () => { console.log("我是成功后被執行的") }
).catch(
    (err) => { console.log(err) })

使用rejects()方法改變狀態和拋出錯誤 throw new Error() 的作用是相同的

Promise.all()

參數：可迭代參數，如：數組。

用途：處理一些并發的異步操作，需要保證每個都執行完畢。

結果：狀態全為fulfilled->fulfilled，否則->rejected。

Promise.race()

參數：可迭代參數，如：數組。

用途：處理一些并發的異步操作，只需要其中一個執行完畢。

結果：所有異步操作中有一個狀態先改變，就采納那個最先改變的狀態為結果。

Promise.resolve()

參數：普通值、Promise對象、帶有then的對象。

結果：一般情況返回一個狀態為fulfilled的Promise對象。解析發生錯誤則返回rejected的Promise對象。

Promise.resolve("success")
// 其中[[PromiseStatus]]:"resolved"

Promise.reject("fail") 
// 其中[[PromiseStatus]]:"rejected"

Promise.resolve(Promise.reject("fail"))
// 其中[[PromiseStatus]]:"rejected"

由這個例子可以看出瀏覽器認為resolved和fulfilled是等價的，但Promise.resolve() 不一定讓promise最終是fulfilled。所以對于resolved本身和fulfilled的區別，可以理解為resolved等價于compiled，即可能是成功也可能是失敗。

Promise.reject()

參數：發生異常的原因。

結果：返回一個rejected狀態的Promise對象。

注意點 狀態變化

Promise狀態只會改變一次。

構造函數中的resolve()/reject()只有第一次執行有效，多次調用沒有作用。

Promise狀態改變，并且傳遞了一個值，后續調用.then()/.catch()都可直接拿到該值。

參數/返回值

.then()/.catch()的參數應該是函數，傳入非函數則會發生值穿透。

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)  //1

.then()/.catch()不能返回Promise本身，會造成死循環。

.then()/.catch()中return一個error對象并不會拋出錯誤，所以無法捕捉。

因為返回任意一個非Promise 的值都會被包裹成Promise對象，即 return new Error("error!!!")等價于return Promise.resolve(new Error("error!!!"))

執行順序

Promise構造函數是同步執行的，resolve()/reject()后的代碼也會執行。Promise.then()中的函數是異步執行的。**

以下輸出：1243

const promise = new Promise((resolve, reject) => {
  console.log(1)
  resolve()
  console.log(2)
})
promise.then(() => {
  console.log(3)
})
console.log(4)

process.nextTick和promise.then屬于microtask，setImmediate屬于 macrotask。在每一次事件循環中，macrotask只會提取一個執行，而microtask會一直提取，直到microsoft隊列為空為止。

以下輸出：end nextTick then setTimeout1 setTimeout2

process.nextTick(() => {
  console.log("nextTick")
})

setTimeout(() => {
  console.log("setTimeout1")
})

Promise.resolve()
  .then(() => {
    console.log("then")
  })
  
setTimeout(() => {
  console.log("setTimeout2")
})

console.log("end")

補充：
macrotasks:

setTimeout

setInterval

setImmediate

requestAnimationFrame

I/O

UI rendering

microtasks:

process.nextTick

Promises

Object.observe

MutationObserver

參考文章

ES6關于Promise的用法
Promise 必知必會（十道題）
javascript中的異步 macrotask 和 microtask 簡介
Tasks, microtasks, queues and schedules
Difference between microtask and macrotask within an event loop context

GPU云服務器云服務器 promise Promise使用 promise用法中的Promise

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108060.html

原創 | JS異步工具之--Promise

摘要：作者珂珂滬江前端開發工程師本文為原創文章，有不當之處歡迎指出。只對未來發生的事情做出兩種基本情況的應對成功和失敗。在異步轉同步這條道路上，只是一個出彩的點，他還尚有一些缺陷和不足，并不是我們最終的解決方案。作者：珂珂（滬江前端開發工程師）本文為原創文章，有不當之處歡迎指出。轉載請標明出處。一個新事物的產生必然是有其歷史原因的。為了更好的以同步的方式寫異步的代碼，人們在JS上操碎了...

alanoddsoff 2019-08-20 19:05 評論0 收藏0
[es6系列]學習Promise

摘要：概述在之前，在中的異步編程都是采用回調函數和事件的方式，但是這種編程方式在處理復雜業務的情況下，很容易出現回調地獄，使得代碼很難被理解和維護。如果不設置回調函數，內部的錯誤不會反應到外部。本文是基于對阮一峰的Promise文章的學習整理筆記，整理了文章的順序、增加了更多的例子，使其更好理解。 1. 概述在Promise之前，在js中的異步編程都是采用回調函數和事件的方式，但是這種編...

YanceyOfficial 2019-08-22 10:46 評論0 收藏0
不同瀏覽器下 autoplay 的限制策略和方案的整理

摘要：不同瀏覽器下的限制策略和方案的整理端瀏覽器的限制策略和應對方案使用在端測試的瀏覽器包括瀏覽器瀏覽器瀏覽器瀏覽器限制策略內容參考自年月份發布的正式關掉了聲音自動播放靜音自動播放總是允許的。不同瀏覽器下 autoplay 的限制策略和方案的整理 PC 端瀏覽器的限制策略和應對方案使用 Mac 在 PC 端測試的瀏覽器包括 Chrome 瀏覽器 Safari 瀏覽器 Firefox...

LMou 2019-08-23 15:27 評論0 收藏0
javascript異步編程總結

摘要：以下總結了異步編程的種方式回調函數回調函數異步編程的最基本的方式。由小組的成員在規范中提出，目的是為異步編程提供統一接口。結尾參考文章異步編程參考文章使用詳解前言 Javascript語言的執行環境是單線程。單線程：一次只能完成一個任務。如果有多個任務，就必須排隊，前面一個任務完成，再執行后面一個任務。單線程的好處是執行環境簡單，壞處是在一些耗時的任務上會堵塞進程。比如讀取一個...

yearsj 2019-08-23 16:20 評論0 收藏0