一.含義

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;
  });
};