关于promise的学习和拓展

Promise的学习和拓展

---

之前开发的时候偶尔会在请求中，或者其余场景中用到promise,只知道它是什么（链式调用，用于请求的后返回值得操做之类的）,大概怎么用，却没有深刻了解。

原由：（在参考了廖雪峰的promise讲解后https://www.liaoxuefeng.com/w...）

在javascript中，全部的代码都是单线程进行的。
因为这个“缺陷”，致使JavaScript的全部网络操做，浏览器事件，都必须是异步执行。异步执行能够用回调函数实现（否者在加载完js文件后。其余操做也不会发生了）：

参数：executor是带有 resolve 和 reject 两个参数的函数 。Promise构造函数执行时当即调用executor 函数， resolve 和 reject 两个函数做为参数传递给executor（executor 函数在Promise构造函数返回所建promise实例对象前被调用）。resolve 和 reject 函数被调用时，分别将promise的状态改成fulfilled（完成）或rejected（失败）。executor 内部一般会执行一些异步操做，一旦异步操做执行完毕(可能成功/失败)，要么调用resolve函数来将promise状态改为fulfilled，要么调用reject 函数将promise的状态改成rejected。若是在executor函数中抛出一个错误，那么该promise 状态为rejected。

由此能够知道，一个promise包含3个状态:(注意，不包含resolve
)
pending: 初始状态，既不是成功，也不是失败状态。
fulfilled: 意味着操做成功完成。
rejected: 意味着操做失败。

function callback() {
    console.log('Done');
}
console.log('before setTimeout()');
setTimeout(callback, 0); // 1秒钟后调用callback函数
console.log('after setTimeout()');

观察上述代码执行，在Chrome的控制台输出能够看到：

before setTimeout()
after setTimeout()
Done

AJAX就是典型的异步操做

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

统一执行AJAX逻辑，不关心如何处理结果，而后，根据结果是成功仍是失败，在未来的某个时候调用success函数或fail函数。
这个时候promise方法就应运而生了。

---

一个简单的promise应用
生成一个0-2之间的随机数，若是小于1，则等待一段时间后返回成功，不然返回失败：

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

有了执行函数，咱们就能够用一个Promise对象来执行它，并在未来某个时刻得到成功或失败的结果：

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

也能够写成链式调用的形式

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