前言

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

題目一(基本promise)

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

題目實(shí)現(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: 有些情況下，你需要等兩個(gè)異步請(qǐng)求都完成之后才做某些操作，比如一個(gè)包含了文章內(nèi)容和評(píng)論的頁(yè)面，需求是你開始加載的時(shí)候載入loading畫面，當(dāng)內(nèi)容和評(píng)論都加載完之后結(jié)束loading。這種情況就是用all了。
race: 有一些情況下，你只獲取返回最快的異步請(qǐng)求的數(shù)據(jù)(注意，其他的依舊會(huì)執(zhí)行完)，比如如果我對(duì)一個(gè)圖片進(jìn)行請(qǐng)求，那如果我過(guò)5秒之后還沒有接到返回我可能會(huì)想要做一些操作。

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

以請(qǐng)求一個(gè)無(wú)法加載的圖片為例子

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

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

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