浅析Promise

Promise: 含义 

    0、字面意思是 “承诺”。

    1、这个对象可以获取异步操作的消息。

    2、Promise的状态不受外界的影响，只和异步返回的结果有关

简言之：Promise表示一个异步操作的最终状态（完成或失败），以及其返回的值。

Promise状态：

•     pending: 初始状态，既不是成功，也不是失败状态。
•     fulfilled: 意味着操作成功完成。
•     rejected: 意味着操作失败。

Promise方法：

1. Promise.prototype.catch(onRejected)

        异步执行失败的回调函数，并且会返回一个新的Promise对象。

    2. Promise.prototype.then(onFulfilled, onRejected)

     异步执行成功的回调函数，并且会返回一个新的Promise对象。

    3. Promise.prototype.finally(onFinally)

    不管成功或失败都会执行的一个回调函数，并且会返回一个新的Promise对象。

实例demo：

demo1：

<script>

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);

}

var p1 = new Promise(test);

var p2 = p1.then(function (result) {

console.log('成功：' + result);

});

var p3 = p2.catch(function (reason) {

console.log('失败：' + reason);

});

</script>

运行结果： 

demo1解析：生成一个随机数，如果小于1则执行成功的回调，大于1则执行失败的回调。

    其中 p1.then  时成功的回调，p2.catch时失败的回调。

demo2：（Promise多个任务处理流程）

<script>

// 0.5秒后返回input*input的计算结果:

function multiply(input) {

return new Promise(function (resolve, reject) {

console.log('calculating ' + input + ' x ' + input + '...');

setTimeout(resolve, 500, input * input);

});

}

// 0.5秒后返回input+input的计算结果:

function add(input) {

return new Promise(function (resolve, reject) {

console.log('calculating ' + input + ' + ' + input + '...');

setTimeout(resolve, 500, input + input);

});

}

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

console.log('start new Promise...');

resolve(123);

});

p.then(multiply)

.then(add)

.then(multiply)

.then(add)

.then(function (result) {

console.log('Got value: ' + result);

});

</script>

运行结果：

demo2解析：

1. 变量p中存了一个Promise对象，直接执行成功的回调，并传入 123 作为参数，
2. 然后执行回调multiply, multiply 函数返回一个新的 Promise对象，并将传入的参数相乘，直接执行成功的回调（传入相乘以后的结果）
3. 执行 multiply的成功回调 add 函数，add函数 返回一个新的Promise，并将传入的参数相加，直接执行成功的回调（传入相加以后的结果）
4. 以此类推……
5. 知道最后一个then，执行最后一个Promise成功的回调，并输出到日志。