es6學習之Promise

一.含義

Promise是JavaScript的一種異步解決方案,具有3中狀態(pending進行中,fulfilled已經成功,rejected已失敗).

二.Promise的使用

1.Promise帶有resolve(成功),reject(失敗)兩個參數
2.Promise內部立即執行,then在所有同步事件完成後執行,catch是捕捉錯誤,finally是成功或者失敗都會執行的操作.

let promise = new Promise((resolve, reject) => {
    let flag = false;
    if (flag) {
        resolve('xxx');
    } else {
        reject(new Error("錯了"));
    }
});

promise
    .then(data => {
        console.log('resolve', data);
    })
    .catch(error => {
        console.log(error);
    })
    .finally(()=>{
        console.log('finally');
    });

三.Promise的各種方法

1.Promise.prototype.then()

• 捕捉resolve事件(必須)和reject事件(可選)
• then返回一個Promise,也就是可以是then().then()鏈式調用,但是then中要有return ,否則無法傳遞值

2.Promise.prototype.catch()

• catch捕獲reject事件
• catch捕獲then中方法運行出錯的錯誤
• 建議總是在then後面跟catch方法

3.Promise.prototype.finally()

• 不管resolve或者reject,都會執行的方法

4.Promise.all()

• 將多個promise轉換爲一個promise,參數是具有iterator接口的數據結構,數據中可以不是promise,但是JavaScript會將他轉化爲promise
• 多個promise中只要有一個是reject則返回reject,全部resolve纔會返回resolve

// 生成一個Promise對象的數組
const promises = [2, 3, 5, 7, 11, 13].map(function (id) {
  return getJSON('/post/' + id + ".json");
});

Promise.all(promises).then(function (posts) {
  // ...
}).catch(function(reason){
  // ...
});
上面代碼中，promises是包含 6 個 Promise 實例的數組，只有這 6 個實例的狀態都變
成fulfilled，或者其中有一個變爲rejected，纔會調用Promise.all方法後面的回調函
數。

5.Promise.race()

• promise跟隨多個promise中第一個狀態改變的狀態,即最先改變的promise爲reject則返回reject,不管其他的,否則發牛resolve

6.Promise.resolve()

• 將現有對象轉化爲promise對象,並返回
• 如果參數是promise實例,則返回實例
• 如果參數是thenable對象,則會將thenable轉化爲Promise,立即執行對象的then方法

let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};

let p1 = Promise.resolve(thenable);
p1.then(function(value) {
  console.log(value);  // 42
});

• 如果參數不是對象或者不具有then方法的對象,會返回一個全新的Promise,狀態爲resolve
• 如果參數沒有,返回一個狀態爲resolve的Promise實例

7.Promise.reject()

• 返回一個狀態爲reject的promise實例
• 參數作爲返回的promise實例的error參數

四.Promise的應用

1.加載圖片

const preloadImage = function (path) {
  return new Promise(function (resolve, reject) {
    const image = new Image();
    image.onload  = resolve;
    image.onerror = reject;
    image.src = path;
  });
};