ES6系列文章 Promise

thekingisalwaysluc 發布于2019-08-21 16:51 / 1118人閱讀

摘要：已成功，內部執行了方法，實例處于狀態，狀態不可改變了。實際上是函數的一種簡寫形式，當執行后，可以被的回調函數接收處理。該語句并未執行若內部發生錯誤，會被自動的執行。靜態函數返回一個成功的對象，靜態函數返回一個拒絕狀態的對象。

視頻講解

ES6的 Promise 是個啥哩？，是個承諾。為了解決 js 回調地獄。Promise 給我的體會是: 開始云里霧里，然后越用越好用。今天才明白承諾是什么意思？比如我自己的承諾，如果減肥成功就買個iphone,如果減肥失敗就去死~,哈哈然而我并不會。

基本語法

new Promise((resolve, reject) => {
    // ...
});

resolve, reject 方法由 js 引擎提供，不需要個人編寫。

Promise 的三種狀態

pending (進行中)，執行了 new Promise() 命令后，promise實例就處于 pending 的狀態。

fullfilled(已成功)，promise 內部執行了 resolve 方法，promise實例處于fullfilled狀態，狀態不可改變了。

rejected(已失敗), promise 內部執行了reject 方法，promise 實例處于rejected狀態，同樣不可更改。

Promise.prototype 方法 then和catch

new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("hello resolve");
    }, 500);
})
.then(val => {
    console.log(val);// hello resolve
}, err => {
    console.error(err);// 該條語句不被執行
});

then最多有兩個參數，參數一為 resolve 后回調的函數，參數二為 reject 后的回調函數。then也可以只接收參數一。

new Promise((resolve, reject) => {
   setTimeout(() => {
       reject("hello reject");
   }, 500);
})
.then(val => {
   console.log(val);
}, err => {
   console.error(err);// hello reject
});

catch實際上是 then 函數的一種簡寫形式，當執行 reject 后，可以被catch 的回調函數接收處理。

new Promise((resolve, reject) => {
    setTimeout(() => {
        reject("hello reject");
    }, 500);
})
.catch(err => {
    console.log(err); // hello reject
});

再談談 Promise 對象的異常處理

在 promise 內部發生錯誤后不會被外層環境捕捉到。

try {
    new Promise((resolve, reject) => {
        console.log(e);
    });
} catch(e) {
    console.log("error is catched? ", e);// 該語句并未執行
}

若 promise 內部發生錯誤，會被自動的執行reject。

new Promise((resolve, reject) => {
    console.log(e);
})
.catch(err => {
    console.log("error be rejected?", err);// error be rejected? ReferenceError: e is not defined
});

再來看看promise的鏈式調用吧

let p = new Promise((resolve, reject) => {
    resolve("i am resolved");
})
.then(val => {
    return val;
});
console.log(p);// Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}

在 then 中 return 的值又變成了 promise對象。

p.then(val => {
    console.log(val);// i am resolved
});

這個也為鏈式調用提供了基礎。

Promise 的靜態方法 all race resolve reject all

all靜態方法接收promise 對象的數組，并返回一個 promise 對象。當數組中的所有元素都 resolve 時，結果promise被 resolve。若數組中有一個對象被 reject 了，結果promise對象被reject。本人經常使用 all方法來處理多個 ajax 請求獲取數據的界面loading 效果。

let isLoading = true;
let p1 = fetch(url1).then(json => {
    // ....
});
let p2 = fetch(url2).then(json => {
    // ...
});
let p3 = fetch(url3).then(json => {
    // ...
});
Promise.all([p1, p2, p3]).then(() => {
    isLoading = false;
});

race

同樣接收一個數組,結果也是一個 promise 對象，當數組中的promise 對象有一個的狀態改變時，race方法的結果promise對象變為相同的狀態。具體應用場景筆者還沒有遇到過。若有人遇到過，請在下面留言告知一下，感激不盡。

resolve、reject

靜態函數Promise.resolve返回一個成功的promise對象，靜態函數Promise.reject返回一個拒絕狀態的 promise 對象。

refs

MDN Promise

【開發環境推薦】Cloud Studio 是基于瀏覽器的集成式開發環境，支持絕大部分編程語言，包括 HTML5、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，無需下載安裝程序，一鍵切換開發環境。 Cloud Studio提供了完整的 Linux 環境，并且支持自定義域名指向，動態計算資源調整，可以完成各種應用的開發編譯與部署。

云服務器 GPU云服務器 es6中的promise es6-系列 promise Promise使用

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

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

ES6系列文章異步神器async-await

摘要：有兩個陌生的關鍵字，同時函數執行結果似乎返回了一個對象。用來表示函數是異步的，定義的函數會返回一個對象，可以使用方法添加回調函數。如果的是對象會造成異步函數停止執行并且等待的解決如果等的是正常的表達式則立即執行。視頻講解關于異步處理，ES5的回調使我們陷入地獄，ES6的Promise使我們脫離魔障，終于、ES7的async-await帶我們走向光明。今天就來學習一下 async-a...

miqt 2019-08-21 17:00 評論0 收藏0
JS筆記

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

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

摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。寫一個符合規范并可配合使用的寫一個符合規范并可配合使用的理解的工作原理采用回調函數來處理異步編程。 JavaScript怎么使用循環代替(異步)遞歸問題描述在開發過程中，遇到一個需求：在系統初始化時通過http獲取一個第三方服務器端的列表，第三方服務器提供了一個接口，可通過...

tuniutech 2019-08-21 18:34 評論0 收藏0
ES6-7

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

mudiyouyou 2019-08-21 18:40 評論0 收藏0
ES6 系列之 Babel 將 Async 編譯成了什么樣子

摘要：大約后輸出我們直接在官網的粘貼上述代碼，然后查看代碼編譯成什么樣子相關的代碼我們在系列之將編譯成了什么樣子中已經介紹過了，這次我們重點來看看函數以上這段代碼主要是用來實現的自動執行以及返回。前言本文就是簡單介紹下 Async 語法編譯后的代碼。 Async const fetchData = (data) => new Promise((resolve) => setTimeout...

wangym 2019-08-23 12:39 評論0 收藏0