前言

我最近發(fā)現(xiàn)我一用Promise無法直接寫出來要看文檔，所以總結了個題鞏固一下。以后忘記了回來直接看這里例子立馬就能寫了，很穩(wěn)。

題目一(基本promise)

使用promise實現(xiàn):
開始的時候console.log('start')
等待3秒后console.log('first step finished')
之后用ajax對www.baidu.com發(fā)出get請求，
請求返回后結果給下個promise
console.log輸出結果

題目實現(xiàn)

var stepone = function() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('shit')
            resolve()
    　　  }, 3000)
    })
}

var steptwo = function() {
    return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange=function()
        {
            if (xhr.readyState==4 && xhr.status==200) {
                resolve(xhr.responseText)
            } else if(xhr.readyState==4 && xhr.status / 100 == 4) {
                reject(xhr.responseText)
            }
        }
        xhr.open("GET","www.baidu.com",true);
        xhr.send();
    })
}

var stepthree = function(data) {
    return new Promise((resolve, reject) => {
        console.log(data);
    })
}
stepone()
    .then(steptwo)
    .then(stepthree);

題目二(promise.all和promise.race)

有些情況我們需要使用all或者race，一些比較典型的例子是如下

all: 有些情況下，你需要等兩個異步請求都完成之后才做某些操作，比如一個包含了文章內容和評論的頁面，需求是你開始加載的時候載入loading畫面，當內容和評論都加載完之后結束loading。這種情況就是用all了。
race: 有一些情況下，你只獲取返回最快的異步請求的數(shù)據(jù)(注意，其他的依舊會執(zhí)行完)，比如如果我對一個圖片進行請求，那如果我過5秒之后還沒有接到返回我可能會想要做一些操作。

all

var getPromise = (value, delay) => {
  return new Promise(resolve => {
    setTimeout(() => resolve(value), delay);
  });
};

var promise1 = getPromise('value-1', 350);
var promise2 = getPromise('value-2', 250);
var promise3 = getPromise('value-3', 150);

var promise = Promise.all([promise1, promise2, promise3]);
promise
.then(result => {  
  console.log('result of promise:', result); 
})
.catch(error => {
  console.log('error', error);
});

race

以請求一個無法加載的圖片為例子

//請求某個圖片資源
function requestImg(){
    var p = new Promise(function(resolve, reject){
        var img = new Image();
        img.onload = function(){
            resolve(img);
        }
        img.src = 'xxxxxx';
    });
    return p;
}

//延時函數(shù)，用于給請求計時
function timeout(){
    var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            reject('圖片請求超時');
        }, 5000);
    });
    return p;
}

Promise
.race([requestImg(), timeout()])
.then(function(results){
    console.log(results);
})
.catch(function(reason){
    console.log(reason);
});