ES6 異步編程解決方案之 Promise 對象

阿新 • • 發佈：2018-02-23

詳解 on() 基本 ack 地獄 down 場景 fill success

一、Promise 概述

Promise 對象是 ES6 提供的原生的內置對象
Promise 是異步編程的一種解決方案（異步代碼同步化），比傳統的解決方案——回調函數和事件——更合理和更強大
Promise 對象代表一個異步操作， 其不受外界影響，有三種狀態：
- Pending（進行中、未完成的）
- Resolved（已完成，又稱 Fulfilled）
- Rejected（已失敗）

二、Promise 對象的優缺點

1. 優點

異步編程解決方案，避免了回調地獄（Callback Hell）問題

// 回調地獄

firstAsync(function(data){
    //處理得到的 data 數據
    //....
    secondAsync(function(data2){
        //處理得到的 data2 數據
        //....
        thirdAsync(function(data3){
              //處理得到的 data3 數據
              //....
        });
    });
});

// 使用 Promise 解決方案

firstAsync()
.then(function(data){
    //處理得到的 data 數據
    //....
    return secondAsync();
})
.then(function(data2){
    //處理得到的 data2 數據
    //....
    return thirdAsync();
})
.then(function(data3){
    //處理得到的 data3 數據
    //....
});

2. 缺點

Promise 對象，一旦新建它就會立即執行，無法中途取消

let Promise = new Promise(function(resolve, reject) {
  console.log(‘Promise‘);
  resolve();
});

Promise.then(function() {
  console.log(‘resolved.‘);
});

console.log(‘Hi!‘);

// Promise
// Hi!
// resolved

Promise 狀態一旦改變，就不會再變

const Promise = new Promise(function(resolve, reject) {
    resolve(‘ok‘);
    throw new Error(‘test‘);
});
Promise
    .then(function(value) { console.log(value) })
    .catch(function(error) { console.log(error) });

// 只輸出 ok

當處於Pending狀態時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）

三、Promise 的基本用法

ES6 規定，Promise對象是一個構造函數，用來生成Promise實例
語法：
- Promise 構造函數：接收一個函數參數，函數參數中有兩個參數 resolve 、reject
- 參數 resolve 、reject 都是函數（由 JavaScript 引擎提供，不用自己部署），在異步操作成功時，手動執行函數resolve ；在異步操作失敗時，手動執行函數reject
- Promise實例生成以後，可以用 then 、catch 方法分別指定成功狀態、失敗狀態的回調函數

const promise = new Promise(function(resolve, reject) {
    // 異步操作 code

    // 手動執行 resolve / reject 函數
    if (/* 異步操作成功 */){
        resolve(value);
    } else {
        reject(error);
    }
});

promise
  .then((value) => {})
  .catch((error) => {});

異步編程解決方案： 將異步任務同步操作（一般情況下 Promise 對象集結合 then、catch 使用）
- 異步任務：在創建 Promise 對象中執行（ Promise 對象中的代碼會立即執行 ）
- 需要在異步任務之後執行的代碼：放到 then、catch 中

四、Promise 原型上的方法

1. then 方法

作用： 為 Promise 實例添加 狀態改變（成功、失敗）時的回調函數
語法： Promise.then(resolve, reject)
- 參數：
  - 參數 resolve：異步操作成功時的回調函數
  - 參數 reject：異步操作失敗時的回調函數（可省略）
- 返回值： 一個新的Promise實例（不是原來那個Promise實例），可采用鏈式寫法

getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {
  // ...
});

// 如上：第一個回調函數完成以後，會將返回結果作為參數，傳入第二個回調函數

返回值有可能是含有異步操作的 Promise 對象， 這時之後的 then 方法中的函數，就會等待該 Promise 對象的狀態發生變化，才會被調用

const getPromise = () => {
    const Promise = new Promise(function (resolve, reject) {});

    return Promise;
}

getPromise().then(
    param => getPromise(param)
).then(
    comments => console.log("resolved: ", comments),
    err => console.log("rejected: ", err)
);

2. catch 方法

作用： 為 Promise 實例添加 狀態變為 reject 時的回調函數
語法： Promise.catch(reject)
等同於： Promise.then(null, reject)

// 示例如下（Promise拋出一個錯誤，就被catch方法指定的回調函數捕獲）

const Promise = new Promise(function(resolve, reject) {
  throw new Error(‘test‘);
});

Promise.catch(function(error) {
  console.log(error);
});
// Error: test

Promise 對象的錯誤具有“冒泡”性質： 會一直向後傳遞，直到被捕獲到為止

const getPromise = () => {
    const Promise = new Promise(function (resolve, reject) {});

    return Promise;
}

getPromise().then(function(post) {
    return getJSON(post.commentURL);
}).then(function(comments) {
    // some code
}).catch(function(error) {
    // 處理前面三個Promise產生的錯誤：無論是 getJSON產生錯誤，還是 then 產生的錯誤，都會由 catch 捕捉到
});

最佳實踐： 一般來說，不要在then方法裏面定義 reject 狀態的回調函數

// bad
promise
  .then(function(data) {
    // success
  }, function(err) {
    // error
  });

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

3. finally 方法

作用： 為 Promise 實例添加回調函數（不管狀態是 resolve、 reject），該回調函數都執行
語法： promise.finally(() => {}) 不接受任何參數
舉例應用：服務器使用 Promise 處理請求，然後使用 finally 方法關掉服務器

promise
    .then(result => {···})
    .catch(error => {···})
    .finally(() => {···});

4. `then`、`catch`、`finally` 回調的執行順序

以下原則適用於： new Promise(...) 、Promise.resolve(...) 、 Promise.reject(...)
- 回調函數如果是 同步函數： 會在本輪事件循環的末尾執行（下一輪循環之前）
- 回調函數如果是 異步函數： 會在本輪事件循環的末尾將該異步函數放入到事件循環隊列中，等待時間為 0s （也就是在下一輪循環的最後執行）
示例如下：

// 回調函數 是 同步函數

setTimeout(function () {
    console.log(3);
}, 0);

const promise = new Promise(function (resolve, reject) {
    console.log(6);
    resolve();
});

setTimeout(function () {
    console.log(4);
}, 0);

promise.then(() => {
    console.log(2);
});

setTimeout(function () {
    console.log(5);
}, 0);

console.log(1);

// 6 1 2 3 4 5

// 回調函數 是 異步函數

setTimeout(function () {
    console.log(3);
}, 0);

const promise = new Promise(function (resolve, reject) {
    console.log(6);
    resolve();
});

setTimeout(function () {
    console.log(4);
}, 0);

promise.then(() => {
    setTimeout(() => {
        console.log(2);
    }, 0);
});

setTimeout(function () {
    console.log(5);
}, 0);

console.log(1);

// 6 1 3 4 5 2

5. 回顧：JS 的異常捕獲

作用： 對於可能會出現錯誤的代碼，使用異常捕獲方式，可以使 JS 運行到錯誤代碼處，不終止代碼執行且拋出異常錯誤
三種最佳實踐：
- try...catch
- try...finally
- try...catch...finally
詳解：
- try 語句： 包含可能出現錯誤的代碼
- catch 語句： 包含捕捉到錯誤，執行的代碼
- finally 語句： 包含無論有沒有錯誤，都要執行的代碼
示例：

try {
    console.log(11);    // 可能會發生錯誤的代碼
}
catch (e) {
   throw e;     // 拋出錯誤異常，且 catch 代碼塊中 throw 之後的代碼 不會執行
}
finally {
    
}

五、多個異步都執行完成後，再執行回調：`Promise.all()`

作用： 將多個異步函數包裝成一個 內部並行執行的 Promise 實例
關鍵： 包裝後的 Promise 實例，內部函數並行執行；減少了執行時間
語法： const promise = Promise.all([p1, p2, p3])
- p1、p2、p3都是 Promise 實例；如果不是Promise 實例，就會先調用 Promise.resolve 方法，將參數轉為 Promise 實例
- 參數可以不是數組，但必須具有 Iterator 接口，且返回的每個成員都是 Promise 實例
使用場景： 多個異步都執行完成後，再執行回調

Promise
  .all([runAsync1(), runAsync2(), runAsync3()])
  .then((results) => {
      console.log(results);
  });
  
// 如上：三個異步操作 會 並行執行，等到它們都執行完後，才會執行 then 裏面的代碼；
// 三個異步操作的結果，組成數組 傳給了 then; 也就是 輸出上述 result 為 [異步1數據，異步2數據，異步3數據]

包裝後的 Promise 的狀態（區別所在）
- 只有p1、p2、p3的狀態都變成 fulfilled，p的狀態才會變成 fulfilled；此時p1、p2、p3的返回值組成一個數組，傳遞給p的回調函數
- 只要p1、p2、p3之中有一個被 rejected，p的狀態就變成rejected；此時第一個被 reject 的實例的返回值，會傳遞給p的回調函數
Promise 的狀態決定執行 then 回調，還是執行 catch 回調

const p1 = new Promise((resolve, reject) => {
        resolve(‘hello‘);
    })
    .then(result => result)
    .catch(e => e);

const p2 = new Promise((resolve, reject) => {
        throw new Error(‘報錯了‘);
    })
    .then(result => result);

Promise.all([p1, p2])
    .then((result) => {
        console.log(‘then‘);
        console.log(result)
    })
    .catch((e) => {
        console.log(‘error‘)
        console.log(e);
    });

// ‘error‘, Error: 報錯了

const p1 = new Promise((resolve, reject) => {
        resolve(‘hello‘);
    })
    .then(result => result)
    .catch(e => e);

const p2 = new Promise((resolve, reject) => {
        throw new Error(‘報錯了‘);
    })
    .then(result => result)
    .catch(e => e);

Promise.all([p1, p2])
    .then((result) => {
        console.log(‘then‘);
        console.log(result)
    })
    .catch((e) => {
        console.log(‘error‘)
        console.log(e);
    });

// ‘then‘, ["hello", Error: 報錯了]
// 解釋：因為 p2 有自己的 catch, 錯誤才 p2 處被攔截

六、多個異步中有一個完成，就執行回調：`Promise.race()`

作用： 將多個異步函數包裝成一個 內部並行執行的 Promise 實例
關鍵： 包裝後的 Promise 實例，內部函數並行執行；減少了執行時間
語法： const promise = Promise.race([p1, p2, p3])
- p1、p2、p3都是 Promise 實例；如果不是Promise 實例，（如果是函數）就會先調用下面講到的 Promise.resolve 方法，將參數轉為 Promise 實例
- 參數可以不是數組，但必須具有 Iterator 接口，且返回的每個成員都是 Promise 實例
使用場景： 多個異步中有一個完成，就執行回調

Promise
  .race([runAsync1(), runAsync2(), runAsync3()])
  .then((results) => {
      console.log(results);
  });
  
// 如上：三個異步函數會並行執行，只要有一個執行完，就會執行 then；
// 率先執行完的異步函數的結果 作為參數 傳遞給 then 中的回調函數

// 請求超時的 demo

const p1 = myAjax(‘/resource-that-may-take-a-while‘);
const p2 = new Promise(function (resolve, reject) {
        setTimeout(() => reject(new Error(‘request timeout‘)), 5000)
    });

Promise.race([p1, p2])
    .then(response => console.log(response))
    .catch(error => console.log(error));

包裝後的 Promise 的狀態（區別所在）
- p1、p2、p3 中 率先改變狀態的 Promise 的狀態值，直接影響包裝後的Promise 的狀態；
- 那個率先改變的 Promise 實例的返回值，就傳遞給p的回調函數

六、快速生成 Promise 對象的方法

1. `Promise.resolve()`

作用： 將現有對象轉為 Promise 對象（狀態為 resolve）
等價於：

Promise.resolve(‘foo‘);

// 等價於

new Promise((resolve, reject) => {
    resolve(‘foo‘);
});

參數的幾種形式：
- 參數是具有then方法的對象： 轉為 Promise 對象，並立即執行對象的 then 方法 【重點區分】
- 參數是 Promise 實例： 那麽Promise.resolve將不做任何修改、原封不動地返回這個實例
- 不帶有任何參數： 最快速生成 Promise 對象

// 參數是 具有then方法的對象

let thenable = {
    then: function (resolve, reject) {
        console.log(‘then‘);
        resolve(42);
    }
};

Promise.resolve(thenable);  //  輸出 then

// 不帶參數，快速生成 Promise 對象

Promise.resolve();

2. `Promise.reject()`

作用： 返回一個新的 Promise 實例，該實例的狀態為 rejected
等價於：

Promise.reject(‘出錯了‘);

// 等價於

new Promise((resolve, reject) => {
    reject(‘報錯了‘);
});

參數： 無論參數是什麽都會原封不動的作為錯誤理由 【重點區分】

七、Promise 的應用

Promise 實現異步加載圖片

// Promise 實現 單張圖片 異步加載（預加載）

function loadImageAsync(url) {
    return new Promise(function (resolve, reject) {
        const image = new Image();

        image.onload = function () {
            resolve(image);
        };

        image.onerror = function () {
            reject(new Error(‘Could not load image at ‘ + url));
        };

        image.src = url;
    });
}

loadImageAsync(‘./1png‘)
    .then((img) => {
        console.log(img); // 圖片標簽
    })

// Promise 實現 多張圖片 異步加載（預加載）

function loadImageAsync(url) {
    return new Promise(function (resolve, reject) {
        const image = new Image();

        image.onload = function () {
            resolve(image);
        };

        image.onerror = function () {
            reject(new Error(‘Could not load image at ‘ + url));
        };

        image.src = url;
    });
}

function getImages(source) {
    const imgs = [];

    source.forEach(url => {
        loadImageAsync(url)
            .then((img) => {
                imgs.push(img);
            })
    });

    return imgs;
}

console.log(getImages([‘1.png‘, ‘2.png‘]));

// ES5 實現圖片異步加載

function getAsyncLoadImages(source) {
    const imgs = [];

    source.forEach(function (url, i) {
        imgs[i] = new Image();
        imgs[i].onload = function () {
            // console.log(imgs[i]);
        }

        imgs[i].onerror = function () {
            reject(new Error(‘Could not load image at ‘ + url));
        };

        imgs[i].src = url;
    })

    return imgs;
}

const result = getAsyncLoadImages([‘1.png‘, ‘2.png‘]);
console.log(result);

ES6 異步編程解決方案之 Promise 對象

詳解 on() 基本 ack 地獄 down 場景 fill success 一、Promise 概述 Promise 對象是 ES6 提供的原生的內置對象 Promise 是異步編程的一種解決方案（異步代碼同步化），比傳統的解決方案——回調函數和事件——更合理和更強大

ES6 Generator 異步編程解決方案

es6 alt png tor 方案 inf info 圖片 17. 是比promise更高級的解決方案 next yield function 後加* 狀態機 generator語法糖長輪詢接口常查詢 ES6 Generator

es6異步編程 Promise 講解 --------各個優點缺點總結

寫法 col 結果 require 捕獲 clas utf 方法 req //引入模塊 let fs=require(‘fs‘); //異步讀文件方法，但是同步執行 function read(url) { //new Promise 需要傳入一個e

.Net異步編程進階之（二）

con mage ack 問題 eth 情況情況下 core https 　　避免使用Task.Result和Task.Wait 　　只有極少方法可以正確的使用Task.Result和Task.Wait，一般情況下建議是完全避免在代碼上出現。　　同步異步　　

[C#學習筆記之異步編程模式2]BeginInvoke和EndInvoke方法 (轉載)

cti otf 函數返回編程模式 catch 數值 gin 單線程 blog 為什麽要進行異步回調？眾所周知，普通方法運行，是單線程的，如果中途有大型操作（如：讀取大文件，大批量操作數據庫，網絡傳輸等），都會導致方法阻塞，表現在界面上就是，程序卡或者死掉，界面元素不動了，

promise 的基本概念和如何解決js中的異步編程問題對 promis 的 then all ctch 的分析和 await async 的理解

委托 callback 分析傳參成功 visible 定時 data- 得到 * promise承諾 * 解決js中異步編程的問題 * * 異步-同步 * 阻塞-無阻塞 * * 同步和異步的區別?

ES6/7 異步編程學習筆記

post pan 編程學習很多 set 常用不清晰 then 斐波那契數前言在ES6的異步函數出現之前，Js實現異步編程只有settimeout、事件監聽、回調函數等幾種方法 settTmeout 這種方法常用於定時器與動畫的功能，因為其本質上其實是瀏覽器的We

異步編程之Javascript Promises 規範介紹

async ogr RR catch 處理對象 rda 關系解決發生什麽是?PromisesPromises是一種關於異步編程的規範。目的是將異步處理對象和處理

異步編程之promise

參數完成 () child reac lld on() 立即執行 cat 是ES6中新增的異步編程解決方案。 1.構造函數。可以通過promise構造函數來實例化。數據: const imgs = [ ‘https://img.alicdn.com/tps/

python異步編程之asyncio（百萬並發）

多核邏輯 http響應 get 微服務框架 time time() www. 標準庫前言：python由於GIL（全局鎖）的存在，不能發揮多核的優勢，其性能一直飽受詬病。然而在IO密集型的網絡編程裏，異步處理比同步處理能提升成百上千倍的效率，彌補了python性能方面的

任務Task系列之異步編程(async and await)

bubuko 是我 sum 我們 and 方法 () var args 　　異步：異步操作通常用於執行完成時間可能較長的任務，如打開大文件、連接遠程計算機或查詢數據庫=異步操作在主應用程序線程以外的線程中執行。應用程序調用方法異步執行某個操作時，應用程序可在異步方法執行其任

Javascript異步編程之二回調函數

兩種 bsp lse div 輸入引用 asc 捕獲試驗 for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 1000);} console.log(i); 我相信只要是

Python3 異步編程之進程與線程

ext 存儲 images 暫時命名管道 cpu ima tro tex Python3 異步編程之進程與線程-1 一、了解進程間通信進程間通信進程線程線程 vs 進程 IO模型並發 vs 並行

Jquery中的異步編程淺析延期（deferred）的承諾（promise）

帶來 evel timeout 能夠引入 failure resolve 優雅界面引子相信各位developers對js中的異步概念不會陌生，異步操作後的邏輯由回調函數來執行，回調函數（callback function）顧名思義就是“回頭調用的函數”，

多線程異步編程示例和實踐-Thread和ThreadPool

處理 ads 指定機制後臺線程 wait 在線調用 thread 說到多線程異步編程，總會說起Thread、ThreadPool、Task、TPL這一系列的技術。總結整理了一版編程示例和實踐，分享給大家。先從Thread和ThreadPool說起： 1. 創建並

異步編程

cin 暫停 read () 結果之前 fire src urn 1、async/await特性結構異步方法：就是在處理完成之前就返回到調用方法。 async/await特性結構由三個部分構成： (1)調用方法：調用異步方法的那個方法，它和異步方法可能在相同的線程，也

python -- 異步編程

協程復雜 patch odi block wait 多核 del 恢復我們在生產中，常用的處理任務模型有三種：　　單線程　　多線程　　異步（單線程內，串行，特點是遇到阻塞(或IO之類的)就切換到其他任務）其中一般如果都符合要求，那麽異步是最好的選

C# 異步編程Task整理（二）異常捕捉

如果 console url 完全 list 標識異步通知註意一、在任務並行庫中，如果對任務運行Wait、WaitAny、WaitAll等方法，或者求Result屬性，都能捕獲到AggregateException異常。可以將AggregateException異

多線程和異步編程示例和實踐-踩過的坑

round 推送在線 png 很慢 main.c 服務容器 con slist 上兩篇文章，主要介紹了Thread、ThreadPool和TPL 多線程異步編程示例和實踐-Thread和ThreadPool 多線程異步編程示例和實踐-Task 本文中，分享兩則我們在

[NodeJS]Node異步編程基礎

add this 異步異步任務 cfi content sse html模板 port 零、前言　　為什麽要用Node？　　Node把非阻塞IO作為提高應用性能的方式。而在JS中，天生擁有著異步編程機制: 事件機制。同時JS中不存在多進程。這樣當你執行相對較慢需要

ES6 異步編程解決方案 之 Promise 對象

一、Promise 概述

二、Promise 對象的 優缺點

1. 優點

2. 缺點

三、Promise 的基本用法

四、Promise 原型上的 方法

1. then 方法

2. catch 方法

3. finally 方法

4. then、catch、finally 回調的執行順序

5. 回顧：JS 的異常捕獲

五、多個異步 都 執行完成後，再執行回調：Promise.all()

六、多個異步 中 有一個完成，就執行回調：Promise.race()

六、快速生成 Promise 對象 的方法

1. Promise.resolve()

2. Promise.reject()

七、Promise 的應用

相關推薦

ES6 異步編程解決方案之 Promise 對象

二、Promise 對象的優缺點

四、Promise 原型上的方法

4. `then`、`catch`、`finally` 回調的執行順序

五、多個異步都執行完成後，再執行回調：`Promise.all()`

六、多個異步中有一個完成，就執行回調：`Promise.race()`

六、快速生成 Promise 對象的方法

1. `Promise.resolve()`

2. `Promise.reject()`