淺解Promise

summerpxy 發布于2019-08-23 17:51 / 1763人閱讀

摘要：對于異步的解決方案是新增的內置對象，通常使用構造函數創建，實例，解決異步問題。構造函數必須接收一個函數作為參數，我將其稱為函數，函數也可以接收兩個參數，和，它們是兩個函數，由運行環境提供，無需自己部署。如何理解規范中的這三個狀態及其規則。

對于異步的解決方案 Promise

Promise是ES6新增的內置對象，通常使用Promise構造函數創建，Promise實例，解決異步問題。

1.Promise構造函數必須接收一個函數作為參數，我將其稱為executor函數，executor函數也可以接收兩個參數，resolve和reject，它們是兩個函數，由ECMAScript運行環境提供，無需自己部署。

//執行Promise函數，它返回一個promise實例對象
let promise=new Promise ((resolve,reject)=>{  
    console.log(1);
});

當我們使用new創建一個構建一個Promise實例后，Promise實例內部的兩個屬性需要理解。

讓我們輸出上方的promise實例

[[PromiseStatus]]: "pending"
[[PromiseValue]]: undefined

[[PromiseStatus]]:保存當前promise實例的狀態,可能值pending,resolved,rejected

[[PromiseValue]]：在promise未完成狀態時，其值為undefinde,當promise完成后，其值為異步數據，或者錯誤信息。當執行了resolve()，[[PromiseValue]]的值就是resolve()傳入的表達式的值，通常就是是我們需要的值。當我們使用了reject()，這個值為reject()的傳入值，通常這個值為錯誤提示

2.對于resolve和reject，它們的作用是判斷對象的狀態。并且它們調用時可以接收一個參數。

let promise=new Promise ((resolve,reject)=>{  
    console.log(1);
    resolve("成功");
});

當調用了resolve或reject ,promise實例的[[PromiseStatus]]將發生改變。

現在，讓我們更加詳細的去了解Promise promise狀態

一個Promise對象的當前狀態必須為一下三種狀態的一種:Pending(等待狀態),Fulfilled（執行狀態）,Rejected（拒絕狀態）

Pending：處于Pending狀態時，promise可以滿足以下條件

? 可以由Pending轉為Fulfilled或Rejected ，

Fulfilled：處于Fulfilled狀態時，promise滿足以下條件

? 1.不可再變為其它狀態。

? 2.必須有一個不可被改變的值。

Rejected：

? 1.不可再變為其它狀態。

? 2.必須有一個不可被改變的值。

如何理解Promise A + 規范中的這三個狀態及其規則。

Promise對象的兩個內部屬性可以很好幫我們去解釋理解。

[[PromiseStatus]] ,[[PromiseValue]]

現在，進行Promise第一步，新建一個Promise對象，對象兩個內部屬性被初始化

[[PromiseStatus]] :Pending

[[PromiseValue]]：undefined

此時是規范中的第一種狀態，OK，根據規范的Pending狀態的條件，我們可以去改變其狀態。

executor函數在Promise對象創建后立即執行。

倘若我們在executor函數執行了resolve()函數,并且，將一個表達式(Expression)作為其參數傳入。此時內部屬性值的變化

[[PromiseStatus]]:resolved

[[PromiseValue]]：<表達式的值>

此時，Promise對象的狀態有Pending變為Fulfilled.通俗點說，就是由等待變為成功。根據Promise A+ 的Fulfilled狀態的規范條件，此時，無論接下來在遇到什么情況，都不會去改變它的狀態！，并且Promise對象將會有一個值，Yes,這個值就是我們需要的值，準確的說，它就是那個傳入的表達式的值，并且這個值通過resolve()函數存入了[[PromiseValue]]屬性中。我們無法直接去使用它，而是通過then()去獲取

讓我們來看個例子

let  p1 = new Promise((res,rej)=>{
 res((() => {
        return "成功了";
        })())
    })
console.log(p1); 
//輸出
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: "成功了"

倘若我們在executor函數執行了reject()函數,并且，將一個表達式(Expression)作為其參數傳入。此時內部屬性值的變化

let  p2 = new Promise((res,rej)=>{
 rej((() => {
      return "失敗了";
    })())
})
console.log(p2);
// promise對象的兩個屬性
[[PromiseStatus]]: "rejected"
[[PromiseValue]]: "失敗了"

此時，Promise對象的狀態有Pending變為Fulfilled，由等待變為失敗，根據Promise A+ 的Fulfilled狀態的規范條件，此時，無論接下來在遇到什么情況，都不會去改變它的狀態！并且Promise對象將會有一個值，同樣也是那個傳入的表達式的值，不過我們將這個值稱為拒因或失敗原因。

注意：resolve或reject并不會終結 Promise 的executor函數的執行

我們已經在executor函數中執行了resolve或reject函數，狀態發生改變，內部屬性值也發生了改變

現在，該啟動then()方法和 catch()方法了。 then()

它有兩個函數作為參數，通常，我們只使用第一個函數來獲取[[PromiseStatus]]的值為"resolved"的對象的[[PromiseValue]]值,回調函數接收一個參數，此參數就是[[PromiseValue]]值

let  p1 = new Promise((res,rej)=>{
 res((() => {
        return "成功了";
        })())
    }).then(data=>{
        console.log(data) 
    })

注意： then() 方法產生一個微任務，其回調將會被置入上一個宏任務隊列后。

cathc()

當[[PromiseStatus]]為reject時，調用此方法。

它接收一個函數作為參數，此函數接收一個參數，該參數就是拒因

let  p2 = new Promise((res,rej)=>{
 rej((() => {
        return "失敗了";
        })())
    }).then(data=>{
        console.log(data) 
    }).catch(error=>console.log(error))

現在大致了解了Promise是怎么回事了 Good!

還有注意 :無論如何，在使用Promise對象時，加上catch()，否則你很可能不知道錯誤到底是出在哪里

云服務器 GPU云服務器淺解 promise Promise使用 promise用法

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

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

【前端面試分享】- 寒冬求職上篇

摘要：記錄下我遇到的面試題，都有大佬分享過，附上各個大佬的文章，總結出其中的主要思想即可。推薦黑金團隊的文章前端緩存最佳實踐推薦名揚的文章淺解強緩存和協商緩存狀態碼重點是等，要給面試官介紹清楚。前言在這互聯網的寒冬臘月時期，雖說過了金三銀四，但依舊在招人不斷。更偏向于招聘高級開發工程師。本人在這期間求職，去了幾家創業，小廠，大廠廝殺了一番，也得到了自己滿意的offer。整理一下自己還記得的面試...

shinezejian 2019-05-21 19:14 評論0 收藏0
Promise的幾個擴展API總結

摘要：的幾個擴展總結描述和相反，當所有的被拒絕之后，方法執行完成的決議，如果存在一個執行完成的決議，方法則執行拒絕里邊的所有實例反過來就好了執行到此執行到此描述忽略被拒絕的，只需要有一個完成的，方法就執行完成操作，如果全部的都被拒絕，方法執行拒絕 Promise的幾個擴展API總結 1. Promise.none 描述：和 Promise.all 相反，當所有的promise被拒絕之后，n...

李義 2019-08-23 15:10 評論0 收藏0
異步發展流程 —— 手寫一個符合 Promise/A+ 規范的 Promise

摘要：構造函數的實現我們在使用的時候其實是使用關鍵字創建了一個的實例，其實是一個類，即構造函數，下面來實現構造函數。 showImg(https://segmentfault.com/img/remote/1460000018998456); 閱讀原文概述 Promise 是 js 異步編程的一種解決方案，避免了回調地獄給編程帶來的麻煩，在 ES6 中成為了標準，這篇文章重點不是敘...

UnixAgain 2019-08-23 12:18 評論0 收藏0
Promise 對象的理解

摘要：使用對象的好處在于可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數。對象異步操作拋出錯誤，狀態就會變為，就會調用方法指定的回調函數處理這個錯誤。 Promise 含義 Promise 是異步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大。它由社區最早提出和實現，ES6 將其寫進了語言標準，統一了用法，原生提供了 Promise 對象。所謂 P...

church 2019-08-23 16:45 評論0 收藏0
Promise 中的三兄弟 .all(), .race(), .allSettled()

摘要：對于的來說基元函數包括組合函數的類型簽名返回情況完成如果傳入的可迭代對象為空，會同步地返回一個已完成狀態的。相反，如果是在指定的時間之后完成，剛返回結果就是一個拒絕狀態的從而觸發方法指定的回調函數。在行中，對每個小任務得到的結果進行匯總。為了保證的可讀性，本文采用意譯而非直譯。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！從ES6 開始，我們大都使用的是 P...

vspiders 2019-08-26 10:45 評論0 收藏0