總結一下ES6的promise

Bowman_han 發布于2019-08-22 17:00 / 2356人閱讀

摘要：代碼結果是原因是或者中一個對象并不會拋出錯誤，而是通過來處理的，所以不會被后續的捕獲，需要改成其中一種方法方法是的語法糖，用于指定發生錯誤時的回調函數。

基本用法

promise有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗），Promise構造函數接受一個函數作為參數，該函數的兩個參數分別是resolve和reject，其中resolve函數會將pending狀態改為fulfilled，reject函數將pending改為rejected狀態，狀態一旦改變，將不可逆。這兩個函數的函數的參數將會傳給回調函數

const promise = new Promise(function(resolve, reject) {
        // ... some code

        if (/* 異步操作成功 */){
            resolve(value);
        } else {
            reject(error);
        }
    });
    promise.then((value)=>{ 
        console.log(value)
    },(error)=>{
        console.log(error)
    })

then方法

Promise實例生成以后，可以用then方法分別指定resolved狀態和rejected狀態的回調函數，第一個是狀態由pending->fulfilled的回調，第二個是pending->resolved的回調。
then為什么可以進行鏈式調用呢？原因就是then方法返回的也是一個promise對象，所以后面可以繼續使用then（）方法。
此處有個地方需要注意，著重理解下面這句話：
Values returned from the onFulfilled or onRejected callback functions will be automatically wrapped in a resolved promise.
then()的兩個參數函數中返回的值，會自動包裝成一個已resolved的promise。
代碼1：

$http({
            method: "GET",
            url: "https://www.runoob.com/try/angularjs/data/sites.php1"
        }).then(function successCallback(data_1) {
            $scope.res = data_1;
            $scope.names = data_1.data.sites;
            return data_1;
        },function (err_1) {
            console.log("err_1",err_1);
            return err_1;
        }).then(function (data_2) {
            console.log("data_2", data_2)
        },function (err_2) {
            console.log("err_2---->",err_2);
        }).catch(function (reason) {
            console.log("err------->",reason);
        });

注：$http返回的是一個promise對象。
結果如下：

網絡請求404->失敗的回調函數err_1方法->成功的回調函數（why），原因就是then中的回調函數，無論是成功回調還是失敗回調，他們return的值都會被包裝成promise的對象的resolved函數來處理，從而會傳遞給下一個then方法的成功回調函數里面去。
代碼2：

Promise.resolve()
        .then(() => {
            return new Error("error!!!")
        })
        .then((res) => {
            console.log("then: ", res)
        })
        .catch((err) => {
            console.log("catch: ", err)
        })

結果是：

then: Error: error!!!
at Promise.resolve.then (...)
at ...

原因是：.then 或者 .catch 中 return 一個 error 對象并不會拋出錯誤，而是通過resolved來處理的，所以不會被后續的 .catch 捕獲，需要改成其中一種：

1.return Promise.reject(new Error("error!!!"))
2.throw new Error("error!!!")

catch方法

Promise.prototype.catch方法是.then(null, rejection)的語法糖，用于指定發生錯誤時的回調函數。
1.then方法中沒有第二個失敗回調函數，當reject后，會進入catch方法；若then方法有第二個失敗
回調，則reject后會進入此函數，而不會進入catch方法。

$http({
            method: "GET",
            url: "https://www.runoob.com/try/angularjs/data/sites.php"
        }).then(function successCallback(data_1) {
            $scope.res = data_1;
            $scope.names = data_1.data.sites;
            return data_1;
        },function (err_1) {
            console.log("err_1",err_1);
            return err_1;
        }).catch(function (reason) {
            console.log("err------->",reason);
        });

結果：

當沒then有第二個回調函數，則會進入catch方法。
小疑問：catch方法中return一個數值，在其后面的.then（）的成功回調中會接收到么？答案是會的，把catch看做成沒有成功回到的.then()，其return的數值也會被resolved出去。
注意：不要在then方法里面定義 Reject 狀態的回調函數（即then的第二個參數），總是使用catch方法。理由是第二種寫法可以捕獲前面then方法執行中的錯誤，也更接近同步的寫法（try/catch）

// bad
promise
  .then(function(data) {
    // success，標記1.要是在此處代碼拋出了錯誤，此then函數的失敗回調函數是捕捉不到的。
  }, function(err) {
    // error
  });

// good
promise
  .then(function(data) { //cb
    // success
  })
  .catch(function(err) {
    // error
  });

即：如果在“標記1”出代碼拋出錯誤，后面的失敗回調函數是捕捉不到的（只能捕捉上一個promise對象拋出的錯誤，自己所處在的then中是捕捉不到的），而只能被下一個then函數的失敗回調（也就是catch）捕捉到。
例子：

Promise.resolve()
        .then(function success (res) {
            throw new Error("error")
        }, function fail1 (e) {
            console.error("fail1: ", e)
        })
        .catch(function fail2 (e) {
            console.error("fail2: ", e)
        })

結果：

fail2: Error: error
at success (...)
at ...

.then 可以接收兩個參數，第一個是處理成功的函數，第二個是處理錯誤的函數。.catch 是 .then 第二個參數的簡便寫法，但是它們用法上有一點需要注意：.then 的第二個處理錯誤的函數捕獲不了第一個處理成功的函數拋出的錯誤，而后續的 .catch 可以捕獲之前的錯誤
以下代碼也可以：

Promise.resolve()
        .then(function success1 (res) {
            throw new Error("error")
        }, function fail1 (e) {
            console.error("fail1: ", e)
        })
        .then(function success2 (res) {
        }, function fail2 (e) {
            console.error("fail2: ", e)
        })

GPU云服務器云服務器 es6中的promise 推薦一下便宜的云服務器盤點一下目前免費的云服務器對于云計算的總結

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

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

ES6-7

摘要：的翻譯文檔由的維護很多人說，阮老師已經有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版）超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評論0 收藏0
ES6精解：promise用法

前言今天就簡單總結一下promise的用法，在用promise之前，我們要先了解一下什么promise，這個東西是用來干什么的？通俗易懂的講，promise其實就是一個構造函數，是用來解決異步操作的，我們平時其實還是會用到挺多的，比如我們經常會嵌套一層層的函數 step1(function (value1) { step2(value1, function(value2){ s...

enali 2019-08-22 18:10 評論0 收藏0
ES6常用知識點概述

摘要：那之前的例子來使用一下的話，你會發現瀏覽器報錯了，如圖定義的變量不允許二次修改。如圖箭頭函數沒有它自己的值，箭頭函數內的值繼承自外圍作用域。如圖這里兩邊的結構沒有一致，如果是的話，是可以正常解構的。前言國慶假期已過一半，來篇干貨壓壓驚。 ES6，并不是一個新鮮的東西，ES7、ES8已經趕腳了。但是，東西不在于新，而在于總結。每個學前端的人，身邊也必定有本阮老師的《ES6標準入門》或...

keithyau 2019-08-21 16:53 評論0 收藏0
ES6的Promise：要優雅，也要浪漫

摘要：就算改變已經發生了，即使再對對象添加回調函數，也會立即得到這個結果。方法接收個參數，第一個參數是狀態的回調函數，第二個參數可選是狀態的回調函數。簡單來講，就是能把原來的回調寫法分離出來，在異步操作執行完后，用鏈式調用的方式執行回調函數。在ECMAScript 6標準中，Promise被正式列為規范，Promise，字面意思就是許諾，承諾，嘿，聽著是不是很浪漫的說？我們來探究一下這個浪...

weizx 2019-08-20 12:04 評論0 收藏0
JS筆記

摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。異步編程入門的全稱是前端經典面試題從輸入到頁面加載發生了什么這是一篇開發的科普類文章，涉及到優化等多個方面。 TypeScript 入門教程從 JavaScript 程序員的角度總結思考，循序漸進的理解 TypeScript。網絡基礎知識之 HTTP 協議詳細介紹 HTT...

rottengeek 2019-08-22 13:58 評論0 收藏0