初步了解Promise

timger 發布于2019-08-26 10:11 / 3297人閱讀

摘要：定義或的別名，用于指定發生錯誤時的回調函數。無法取消，一旦新建立即執行若不設置回調函數，則內部拋出的異常反應不到外部狀態無法得知進展。

問題來了

Promise 有幾種狀態？
Promise 有什么優缺點？
Promise構造函數是同步還是異步執行，then呢？
Promise和setTimeout的區別？
如何實現 Promise.all？
如何實現 Promise.finally？

Promise知識點 1. Promise

1）定義
保存著某個未來才會結束的事件（異步操作）的容器

2）特點
（1）對象的狀態不受外界影響。三個狀態：pending（進行中）、fulfilled（已成功）、rejected（已失敗）。只有異步操作的結果，可以決定當前狀態。
（2）狀態只能改變一次，任何時候都能得到該結果。兩種狀態改變的情況：pending->fulfilled、pending->rejected。狀態一直保持，給Promise對象添加回調函數，能得到該結果。

3）優缺點
（1）可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數；Promise對象提供統一的接口，是的控制異常操作更加容易。
（2）無法取消Promise，一旦新建立即執行；若不設置回調函數，則Promise內部拋出的異常反應不到外部；pending狀態無法得知進展。

2. Promise.prototype.then()

1）定義
為Promise實例添加狀態改變時的回調函數。.then(resolved的回調函數，rejected的回調函數[可選])

tips:
then方法返回的是一個新的Promise實例（不是原來的那個Promise實例），因此可以鏈式，如：.then().then()。
采用鏈式的then，可以指定一組按照次序執行的回調函數。

3. Promise.prototype.catch()

1）定義
then(null, rehection)或.then(undefiend, rejection)的別名，用于指定發生錯誤時的回調函數。

tips:
promise對象的錯誤具有“冒泡”性質，錯誤一直向后傳遞，直至被捕獲。
promise對象錯誤不會傳遞到外層代碼，即不同于try/catch，（報錯后不會終止外層代碼執行）。

4. Promise.prototype.finally()

1）定義
不論Promise對象最終狀態如何，都會執行的操作（ES2018）。本質上是then方法的特例。
2）特點
不接受任何參數，不影響原Promise的狀態。
3）實際應用
post請求loading，在請求結束后不論結果如何都關閉loading

5. Promise.all()

作用：
將多個Promise實例，包裝成一個Promise實例。

特點：
新Promise對象(p)的狀態由Promise實例數組（[p1, p2, p3]）決定。
當p1、 p2、 p3狀態都為fulfilled，p的狀態為fulfilled，p1、p2、p3的返回值組成一個數組，傳遞給p的回調函數。
當p1、 p2、 p3中有一個狀態為rejected，p的狀態為rejected，第一個被reject的實例的返回值，會傳遞給p的回調函數。

問題解答 1. Promise有幾種狀態

pending（進行中）、fulfilled（已成功）和rejected（已失?。?/p> 2. Promise有什么優缺點

可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數；Promise對象提供統一的接口，是的控制異常操作更加容易。
無法取消Promise，一旦新建立即執行；若不設置回調函數，則Promise內部拋出的異常反應不到外部；pending狀態無法得知進展。

3. Promise構造函數是同步還是異步執行，then呢？

構造函數同步執行，then異步執行

4. Promise和setTimeout的區別

setTimeout(fn, 0)在下一輪“事件循環”開始時執行，Promise.then()在本輪“事件循環”結束時執行。

5.如何實現 Promise.all

function promiseAll(promises) {
  return new Promise((resolve, reject) => {
    let resultCount = 0;
    let results = new Array(promises.length);

    for (let i = 0; i < promises.length; i++) {
      promises[i].then(value => {
                resultCount++;
        results[i] = value;
        if (resultCount === promises.length) {
          return resolve(results)
        }
      }, error => {
        reject(error)
      })
    }
  })
}

let p1 = new Promise(resolve => resolve("p1"))
let p2 = new Promise(resolve => resolve("p2"))
let p3 = Promise.reject("p3 error")

Promise.all([p1, p2, p3]).then(results => {
  console.log(results)
}).catch(error => {
  console.log(error)      // "p3 error"
})

promiseAll([p1, p2]).then(results => {
  console.log(results)    // ["p1", "p2"]
}).catch(error => {
  console.log(error)
})

6.如何實現 Promise.finally

Promise.prototype.finally = function (callback) {
  let P = this.constructor; // 構造函數
  console.log(P);
  return this.then(
    value  => P.resolve(callback()).then(() => value),  // resolve
    reason => P.resolve(callback()).then(() => { throw reason })  // reject
  );
};

參考文章

《ECMAScript 6 入門——阮一峰》

云服務器 GPU云服務器人工智能初步 hadoop初步學習計算機的初步學習 promise

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

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

js處理異步函數：從callback到promise

摘要：在處理異步回調函數的情況有著越來越值得推崇的方法及類庫，下面會依次介紹處理異步函數的發展史，及源碼解讀。而對象的狀態，是由第一個的參數成功回調函數或失敗回調函數的返回值決定的。函數的執行分為同步和異步兩種。同步即為同步連續執行，通俗點講就是做完一件事，再去做另一件事。異步即為先做一件事，中間可以去做其他事情，稍后再回來做第一件事情。同時還要記住兩個特性：1.異步函數是沒有返回值的...

dance 2019-08-22 15:34 評論0 收藏0
js的事件循環

摘要：但是事件循環一般會在主線程中任務執行完成之后執行。所以，上面函數的調用棧過程如下總結的事件循環部分，內容應該算是全部闡述完全了。前言還記得那些年面試官問你的定時器的原理嗎？還有呢？Promise的原理呢？原理、原理、原理，問的我們懷疑人生。為了下次不再懵逼，今天，我們來了解一下Event Loop的概念。我們的初衷是真正的了解和掌握它，了解整體JavaScript的運行機制。至少...

android_c 2019-08-22 11:06 評論0 收藏0
關于vue、vuex的一些初步小結

摘要：只能是同步函數，原因是無法捕捉異步函數的快照。除了這三個概念外，還有類比計算屬性，用于從派生出一些值分割較大的狀態樹，便于管理。處理表單可手動監聽或是使用帶的雙向綁定計算屬性。一、Vue組件的創建一般語法： Vue.component(tagName, options) 務必在根組件實例化之前注冊組件組件options說明： data: 必須是一個函數，目的在于返回獨立的對象...

joywek 2019-08-21 17:55 評論0 收藏0
微信小程序踩坑系列——從wx.request談談異步處理

摘要：其實我們在同步流程中才說返回，異步沒有返回這個概念或者說異步返回是沒有意義的，異步對應的是回調，也就是說，對于一個異步函數，我們應該傳入一個回調函數來接收結果。原文鏈接：https://www.xksblog.top/talk-... 見到wx.request的第一眼，就讓我想起了$.ajax這東西，使用起來確實有很多不方便，不能忍，幸好小程序是支持ES6語法的，所以可以使用pro...

RdouTyping 2019-08-23 12:09 評論0 收藏0
深入 Promise

摘要：首先從這個構造函數說起，它是全局對象的屬性的值，這也就是為什么瀏覽器環境下我們能直接調用它的原因，就像這些構造函數一樣。的產生就是像正常使用構造函數那樣構建一個，不過傳給構造函數是內部自動創建的，作用是把記錄到中。 showImg(https://segmentfault.com/img/bVbgYy2?w=1200&h=600); > new Promise((resolve, re...

cfanr 2019-08-23 11:58 評論0 收藏0