Promise 是異步編程的一種解決方案，比傳統的解決方案–回調函數和事件－－更合理和更強大。它由社區最早提出和實現，ES6將其寫進了語言標準，統一了語法，原生提供了Promise

所謂Promise ，簡單說就是一個容器，裏面保存著某個未來才回結束的事件(通常是一個異步操作）的結果。從語法上說，Promise是一個對象，從它可以獲取異步操作的消息。
Promise 對象的狀態不受外界影響

三種狀態:

• pending：進行中
• fulfilled :已經成功
• rejected 已經失敗

狀態改變：
Promise對象的狀態改變，只有兩種可能：

• 從pending變為fulfilled
• 從pending變為rejected。

這兩種情況只要發生，狀態就凝固了，不會再變了，這時就稱為resolved（已定型）

基本用法

ES6規定，Promise對象是一個構造函數，用來生成Promise實例

1 const promist = new Promise(function(resolve,reject){
2     if(/*異步操作成功*/){
3         resolve(value);
4     }else{
5         reject(error);
6     }
7 })

resolve函數的作用是，將Promise對象的狀態從“未完成”變為“成功”（即從 pending

Promise 實例生成以後，可以用then 方法分別指定resolved狀態和rejected狀態的回調函數。

1 promise.then(function(value){
2 //success
3 },function(error){
4 //failure
5 });

例子:

 1 function
 
 timeout(ms){
 2     return new Promise((resolve,reject)=>{
 3         setTimeout(resolve,ms,‘done‘);
 4     });
 5 }
 6 timeout(100).then((value)=>{
 7     console.log(value);
 8 });
 9 
10 let promise = new Promise(function(resolve,reject){
11     console.log(‘Promise‘);
12     resolve();
13 });
14 promise.then(function(){
15     console.log(‘resolved‘);
16 });
17 console.log(‘Hi!‘);
18 
19 //Promise
20 //Hi!
21 //resolved

 1 function loadImageAsync(url){
 2     return new Promise(function(resolve,reject){
 3         const image = new Image();
 4         image.onload = function(){
 5             resolve(image);
 6         };
 7         image.onerror = function(){
 8             reject(new Error(‘error‘);
 9         };
10         image.src = url;
11     });
12 }

下面是一個用Promise對象實現的 Ajax 操作的例子。

 1 const getJSON = function(url) {
 2   const promise = new Promise(function(resolve, reject){
 3     const handler = function() {
 4       if (this.readyState !== 4) {
 5         return;
 6       }
 7       if (this.status === 200) {
 8         resolve(this.response);
 9       } else {
10         reject(new Error(this.statusText));
11       }
12     };
13     const client = new XMLHttpRequest();
14     client.open("GET", url);
15     client.onreadystatechange = handler;
16     client.responseType = "json";
17     client.setRequestHeader("Accept", "application/json");
18     client.send();
19 
20   });
21 
22   return promise;
23 };
24 
25 getJSON("/posts.json").then(function(json) {
26   console.log(‘Contents: ‘ + json);
27 }, function(error) {
28   console.error(‘出錯了‘, error);
29 });

Promise 的含義

Promise 是異步編程的一種解決方案，比傳統的解決方案–回調函數和事件－－更合理和更強大。它由社區最早提出和實現，ES6將其寫進了語言標準，統一了語法，原生提供了Promise

所謂Promise ，簡單說就是一個容器，裏面保存著某個未來才回結束的事件(通常是一個異步操作）的結果。從語法上說，Promise是一個對象，從它可以獲取異步操作的消息。
Promise 對象的狀態不受外界影響

三種狀態:

• pending：進行中
• fulfilled :已經成功
• rejected 已經失敗

狀態改變：
Promise對象的狀態改變，只有兩種可能：

• 從pending變為fulfilled
• 從pending變為rejected。

這兩種情況只要發生，狀態就凝固了，不會再變了，這時就稱為resolved（已定型）

基本用法

ES6規定，Promise對象是一個構造函數，用來生成Promise實例

const promist = new Promise(function(resolve,reject){
    if(/*異步操作成功*/){
        resolve(value);
    }else{
        reject(error);
    }
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7

resolve函數的作用是，將Promise對象的狀態從“未完成”變為“成功”（即從 pending 變為 resolved），在異步操作成功時調用，並將異步操作的結果，作為參數傳遞出去；
reject函數的作用是，將Promise對象的狀態從“未完成”變為“失敗”（即從 pending 變為 rejected），在異步操作失敗時調用，並將異步操作報出的錯誤，作為參數傳遞出去。

Promise 實例生成以後，可以用then 方法分別指定resolved狀態和rejected狀態的回調函數。

promise.then(function(value){
//success
},function(error){
//failure
});

• 1
• 2
• 3
• 4
• 5

例子:

function timeout(ms){
    return new Promise((resolve,reject)=>{
        setTimeout(resolve,ms,‘done‘);
    });
}
timeout(100).then((value)=>{
    console.log(value);
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

let promise = new Promise(function(resolve,reject){
    console.log(‘Promise‘);
    resolve();
});
promise.then(function(){
    console.log(‘resolved‘);
});
console.log(‘Hi!‘);

//Promise
//Hi!
//resolved

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

//異步加載圖片
function loadImageAsync(url){
    return new Promise(function(resolve,reject){
        const image = new Image();
        image.onload = function(){
            resolve(image);
        };
        image.onerror = function(){
            reject(new Error(‘error‘);
        };
        image.src = url;
    });
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

下面是一個用Promise對象實現的 Ajax 操作的例子。

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log(‘Contents: ‘ + json);
}, function(error) {
  console.error(‘出錯了‘, error);
});

Promise 的基礎用法