前言

我最近发现我一用Promise无法直接写出来要看文档，所以总结了个题巩固一下。以后忘记了回来直接看这里例子立马就能写了，很稳。

题目一(基本promise)

使用promise实现:
开始的时候console.log('start')
等待3秒后console.log('first step finished')
之后用ajax对www.baidu.com发出get请求，
请求返回后结果给下个promise
console.log输出结果

题目实现

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: 有一些情况下，你只获取返回最快的异步请求的数据(注意，其他的依旧会执行完)，比如如果我对一个图片进行请求，那如果我过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;
}

//延时函数，用于给请求计时
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);
});