Promise

前言

在JavaScript的世界中，所有代码都是单线程执行的。
由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现

function callback() {
    console.log('hi');
}
console.log('before setTimeout()');
setTimeout(callback, 1000); 
console.log('after setTimeout()');

在控制台中出现

before setTimeout()
after setTimeout()
(等待1秒后)
hi

可见，异步操作会在将来的某个时间点触发一个函数调用。
AJAX就是典型的异步操作。

request.onreadystatechange = function () {
    if (request.readyState === 4) {
        if (request.status === 200) {
            return success(request.responseText);
        } else {
            return fail(request.status);
        }
    }
}

把回调函数success(request.responseText)和fail(request.status)写到一个AJAX操作里很正常，但是不好看，而且不利于代码复用。
有没有更好的写法？比如写成这样：

var ajax = ajaxGet('http://...');
ajax.ifSuccess(success)
    .ifFail(fail);

这种链式写法的好处在于，先统一执行AJAX逻辑，不关心如何处理结果，然后，根据结果是成功还是失败，在将来的某个时候调用success函数或fail函数
古人云：“君子一诺千金”，这种“承诺将来会执行”的对象在JavaScript中称为Promise对象。

异步回调的问题

之前处理异步是通过纯粹的回调函数的形式进行处理
很容易进入到回调地狱中，剥夺了函数return的能力
问题可以解决，但是难以读懂，维护困难
稍有不慎就会踏入回调地狱 - 嵌套层次深，不好维护

//回调地狱
ajax({
        url:url1,
        success:function(res1){
            ajax({
                url:url2,
                success:function(res2){
                    ajax({
                        url:url3,
                        success:function(res3){
                             fn(res1,res2,res3)
                        }
                    })
                }
            })
        }
    })
    function fn(res1,res2,res3){
        console.log(res1,res2,res3)
    }

一般情况我们一次性调用API就可以完成请求。
有些情况需要多次调用服务器API，就会形成一个链式调用，比如为了完成一个功能，我们需要调用API1、API2、API3，依次按照顺序进行调用，这个时候就会出现回调地狱的问题。

promise

• promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外）
• 并未剥夺函数return的能力，因此无需层层传递callback，进行回调获取数据
• 代码风格，容易理解，便于维护
• 多个异步等待合并便于解决

promise详解

这个对象有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是承诺，表示其他手段无法改变。

这个对象状态有一定顺序， 从 Pending 到Resolved 再到 Rejected 这个顺序不可逆;
1.进行中
2.成功了 || 失败了

先看下promise对象怎么用:

1.首先要实例化promise;

    var p = new Promise()

2.实例化的时候，这个Promise对象接受一个函数参数,这个函数参数有两个参数: resolve 和 reject;

 var p = new Promise(function(resolve,reject){})

3.然后在函数内部调用 resolve 代表 决定(成功); reject 代表 失败;

var p = new Promise(function(resolve,reject){
    //做一些异步操作
    setTimeout(function(){
        resolve("成功");
    }, Math.round(Math.random()*1000));
    setTimeout(function(){
        reject("失败了");
    },500)
});
 

4.紧接着是 resolved的好兄弟 then()

   // then 方法接受两个参数，两个参数都是函数，第一个函数成功调用，第二个函数失败时调用;
   //而且then函数会等待， 什么时候 promise对象状态改变了， 什么时候then执行;
    p.then(function(value){
        console.log(value);  //成功时调用
    },function(value){
        console.log(value);  //失败时调用
    })

我们先看一个最简单的Promise例子：生成一个0-2之间的随机数，如果小于1，则等待一段时间后返回成功，否则返回失败：

function test(resolve, reject) {
    var timeOut = Math.random() * 2;
    console.log('set timeout to: ' + timeOut + ' seconds.');
    setTimeout(function () {
        if (timeOut < 1) {
            console.log('call resolve()...');
            resolve('200 OK');
        }
        else {
            console.log('call reject()...');
            reject('timeout in ' + timeOut + ' seconds.');
        }
    }, timeOut * 1000);
}

这个test()函数有两个参数，这两个参数都是函数，如果执行成功，我们将调用resolve(‘200 OK’)，如果执行失败，我们将调用reject(‘timeout in ’ + timeOut + ’ seconds.’)。可以看出，test()函数只关心自身的逻辑，并不关心具体的resolve和reject将如何处理结果。
有了执行函数，我们就可以用一个Promise对象来执行它，并在将来某个时刻获得成功或失败的结果：

var p1 = new Promise(test);
var p2 = p1.then(function (result) {
    console.log('成功：' + result);
});
var p3 = p2.catch(function (reason) {
    console.log('失败：' + reason);
});

变量p1是一个Promise对象，它负责执行test函数。由于test函数在内部是异步执行的，当test函数执行成功时，我们告诉Promise对象：

// 如果成功，执行这个函数：
p1.then(function (result) {
    console.log('成功：' + result);
});

当test函数执行失败时，我们告诉Promise对象：

p2.catch(function (reason) {
    console.log('失败：' + reason);
});

Promise对象可以串联起来，所以上述代码可以简化为：

new Promise(test).then(function (result) {
    console.log('成功：' + result);
}).catch(function (reason) {
    console.log('失败：' + reason);
});

Promise.all()

Promise.all([p1, p2, p3])用于将多个promise实例，包装成一个新的Promise实例，返回的实例就是普通的promise
它接收一个数组作为参数
数组里可以是Promise对象，也可以是别的值，只有Promise会等待状态改变
当所有的子Promise都完成，该Promise完成，返回值是全部值得数组
有任何一个失败，该Promise失败，返回值是第一个失败的子Promise结果

//切菜
    function cutUp(){
        console.log('开始切菜。');
        var p = new Promise(function(resolve, reject){       
            setTimeout(function(){
                console.log('切菜完毕！');
                resolve('切好的菜');
            }, 1000);
        });
        return p;
    }

    //烧水
    function boil(){
        console.log('开始烧水。');
        var p = new Promise(function(resolve, reject){        
            setTimeout(function(){
                console.log('烧水完毕！');
                resolve('烧好的水');
            }, 1000);
        });
        return p;
    }

    Promise.all([cutUp(), boil()])
        .then((result) => {
            console.log('准备工作完毕');
            console.log(result);
        })

Promise.race() 类似于Promise.all() ，区别在于它有任意一个完成就算完成

let p1 = new Promise(resolve => {
        setTimeout(() => {
            resolve('I\`m p1 ')
        }, 1000)
    });
    let p2 = new Promise(resolve => {
        setTimeout(() => {
            resolve('I\`m p2 ')
        }, 2000)
    });
    Promise.race([p1, p2])
        .then(value => {
            console.log(value)
        })

• 常见用法：

异步操作和定时器放在一起，，如果定时器先触发，就认为超时，告知用户；
例如我们要从远程的服务家在资源如果5000ms还没有加载过来我们就告知用户加载失败

• 现实中的用法

回调包装成Promise，他有两个显而易见的好处：
1、可读性好
2、返回 的结果可以加入任何Promise队列

实战示例，以上述的ajax回调地狱和promise对比：

 function ajax(url){
        var p = new Promise(function(s,e){
            var xhr = new XMLHttpRequest();
            xhr.open("get",url,true);
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    s(xhr.responseText)
                }else if(xhr.readyState == 4 && xhr.status != 200){
                    e(xhr.status)
                }
            }
            xhr.send();
        })
        return p;
    }
    
    var p1 = ajax("");
    var p2 = ajax("");
    var p3 = ajax("");
    
    Promise.all([p1,p2,p3]).then(function(res){
        console.log(res)
    },function(res){
        console.log(res)
    })