Promise使用

發佈自 Kindem的博客，歡迎你們轉載，可是要注意註明出處。另外，該文章收納在 Kindem的我的的 IT 知識整理倉庫，歡迎 Star、Fork、投稿

Promise

因爲JavaScript是單線程的，因此回調是JavaScript中避免不了的，全部的網絡請求、瀏覽器事件都須要使用回調的方式異步處理。

一旦請求、事件多了，就避免不了回調地獄，回調極可能容易一層接着一層。

Promise的意思是承諾，做用和回調函數類似，在將來的某個時刻執行某件事情。可是Promise的寫法更加簡約易用，更加符合咱們日常的思惟。

Usage

Promise是一個對象，在ES6已經被規範成了原生JavaScript的一部分，可是在ES6以前，則須要使用第三方庫來實現

Promise分爲三個狀態：

• pending: 執行中
• resolved: 已完成
• rejected: 已失敗

Promise對象被實例化的那一刻，傳入構造函數的方法將會被執行，而且進入pending狀態，而一旦完成或者失敗，則會進入相應的狀態，這一過程是不可逆的

他的用法(ES6)以下：

let promise = new Promise((resolve, reject) => {
    if (...) {
        // 若是成功了
        resolve(...);
    } else {
        // 若是失敗了
        reject(...);
    }
});

這裏的resolve和reject兩個方法可使用下面的方法來給與:

promise
    .then(onSuccess)
    .catch(onFailed);

傳遞給then的方法將在承諾執行成功時被調用，傳遞給catch的方法將在承諾執行失敗時被調用

更加方便的一點是，Promise每每能夠嵌套使用，這樣能夠是多個任務有條不紊地進行，假設p1是一個Promise對象而p2、p3都是可以產生Promise對象的方法(若是直接new那麼Promise將會被直接執行)，那麼你能夠這樣寫，使得他們按照順序執行，而且能夠一次性處理他們產生的錯誤

p1
    .then(p2)
    .then(p3)
    .then(onSuccess)
    .catch(onFailed);

好比:

let p1 = new Promise((resolve, reject) => {
    console.log('p1');
    setTimeout(() => {
        resolve('p2');
    }, 1000)
});

let p2 = (result) => new Promise((resolve, reject) => {
    console.log(result);
    setTimeout(() => {
        resolve('p3');
    }, 2000);
});

let p3 = (result) => new Promise((resolve, reject) => {
    console.log(result);
    setTimeout(() => {
        resolve('over');
    }, 3000);
});

p1
    .then(p2)
    .then(p3)
    .then((result) => {
        console.log(result);
    })
    .catch((error) => {
        console.log(error);
    });

運行能夠看見:

p1
p2
p3
over