当下js最难以处理的的就是异步的任务会什么时候完成和完成之后的回调问题。
而回调函数也是最基础最常用的处理js异步操作的办法，而无限的回调会让代码的可维护性变得非常差。难以掌控的触发状态，让你自己写的代码当时还可以读懂，但是过一段时间如果不重新理一下逻辑，估计自己都会忘了。借用一个例子：
listen( "click", function handler(evt){
setTimeout( function request(){
ajax( "http://some.url.1", function response(text){
if (text == "hello") {
handler();
}
else if (text == "world") {
request();
}
} );
}, 1000) ;
} );
doSomething();
这种地狱回调会让代码变得多么不可控。
- 第一步：执行listern（）
- 第二步： doSomething（）
- 第三步：1000ms后执行ajax（）
- 第四步：ajax完成后，根据结果执行handler或request
如果handler或request里面还有这样的代码，估计以后维护的同学来改个功能，心里非常的不爽。
在你不知道的javascript一书中，对于回调的信任问题做了阐述 当你使用第三方的库的方法处理回调时很有可能遇到以下信任内容
基于这些问题，Promise就横空出世了。
一、什么是Promise
Promise是异步编程的一种解决方案，它有三种状态，分别是pending-进行中、resolved-已完成、rejected-已失败
当Promise的状态又pending转变为resolved或rejected时，会执行相应的方法，并且状态一旦改变，就无法再次改变状态，这也是它名字promise-承诺的由来
二、Promise的基本用法
function loadImg(src) {
let promise = new Promise(function (resolve, reject) {
// 新建一个img标签
let img = document.createElement('img')
// 图片加载成功
img.onload = function () {
resolve(img)
}
// 图片加载失败
img.onerror = function () {
reject('图片加载失败')
}
img.src = src
})
return promise
}
let src ='http://img5.imgtn.bdimg.com/it/u=415293130,2419074865&fm=27&gp=0.jpg'
let result = loadImg(src)
result.then((img) => {
console.log(`加载成功，img宽度=${img.width}`)
}, (text) => {
console.log(`error：${text}`)
})
- result把图片地址传入loadImg中，loadImg返回一个Promise对象。
- 根据图片地址加载图片，加载成功就执行resolve，反之失败就执行reject。
then方法接收两个函数，一个是成功（状态为resolved）的回调函数，一个失败（状态为rejected）的回调函数。
then方法的返回值不是一个promise对象就会被包装成一个promise对象，所以then方法支持链式调用。
再来个按顺序执行的函数：
function taskA() {
console.log("Task A");
}
function taskB() {
console.log("Task B");
}
function onRejected(error) {
console.log("Catch Error: A or B", error);
}
function finalTask() {
console.log("Final Task");
}
var promise = Promise.resolve();
promise
.then(taskA)
.then(taskB)
.catch(onRejected)
.then(finalTask);
这样看着是不是非常顺眼。
三、Promise.prototype.then() VS Promise.prototype.catch()
.then()方法使Promise原型链上的方法，它包含两个参数方法，分别是已成功resolved的回调和已失败rejected的回调
promise.then(
() => { console.log('this is success callback') },
() => { console.log('this is fail callback') }
)
.catch()的作用是捕获Promise的错误，与then()的rejected回调作用几乎一致。但是由于Promise的抛错具有冒泡性质，能够不断传递，这样就能够在下一个catch()中统一处理这些错误。同时catch()也能够捕获then()中抛出的错误，所以建议不要使用then()的rejected回调，而是统一使用catch()来处理错误
promise.then(
() => { console.log('this is success callback') }
).catch(
(err) => { console.log(err) }
)
同样，catch()中也可以抛出错误，由于抛出的错误会在下一个catch中被捕获处理，因此可以再添加catch()
使用rejects()方法改变状态和抛出错误 throw new Error() 的作用是相同的
当状态已经改变为resolved后，即使抛出错误，也不会触发then()的错误回调或者catch()方法
then() 和 catch() 都会返回一个新的Promise对象，可以链式调用
promise.then(
() => { console.log('this is success callback') }
).catch(
(err) => { console.log(err) }
).then(
...
).catch(
...
)
Promise实例的异步方法和then()中返回promise有什么区别？
// p1异步方法中返回p2
let p1 = new Promise ( (resolve, reject) => {
resolve(p2)
} )
let p2 = new Promise ( ... )
// then()中返回promise
let p3 = new Promise ( (resolve, reject) => {
resolve()
} )
let p4 = new Promise ( ... )
p3.then(
() => return p4
)
p1异步方法中返回p2
p1的状态取决于p2，如果p2为pending，p1将等待p2状态的改变，p2的状态一旦改变，p1将会立即执行自己对应的回调，即then()中的方法针对的依然是p1
then()中返回promise
由于then()本身就会返回一个新的promise，所以后一个then()针对的永远是一个新的promise，但是像上面代码中我们自己手动返回p4，那么我们就可以在返回的promise中再次通过 resolve() 和 reject() 来改变状态
Promise的其他api
Promise.resolve() / Promise.reject()
用来包装一个现有对象，将其转变为Promise对象，但Promise.resolve()会根据参数情况返回不同的Promise：
参数是Promise：原样返回
参数带有then方法：转换为Promise后立即执行then方法
参数不带then方法、不是对象或没有参数：返回resolved状态的Promise
Promise.reject()会直接返回rejected状态的Promise
Promise.all()
参数为Promise对象数组，如果有不是Promise的对象，将会先通过上面的Promise.resolve()方法转换
var promise = Promise.all( [p1, p2, p3] )
promise.then(
...
).catch(
...
)
当p1、p2、p3的状态都变成resolved时，promise才会变成resolved，并调用then()的已完成回调，但只要有一个变成rejected状态，promise就会立刻变成rejected状态
Promise.race()
var promise = Promise.race( [p1, p2, p3] )
promise.then(
...
).catch(
...
)
“竞速”方法，参数与Promise.all()相同，不同的是，参数中的p1、p2、p3只要有一个改变状态，promise就会立刻变成相同的状态并执行对于的回调
Promise.done() / Promise. finally()
Promise.done() 的用法类似 .then() ，可以提供resolved和rejected方法，也可以不提供任何参数，它的主要作用是在回调链的尾端捕捉前面没有被 .catch() 捕捉到的错误
Promise. finally() 接受一个方法作为参数，这个方法不管promise最终的状态是怎样，都一定会被执行
四、大神实现的Promise源码
下面是一个网上找的实现Promise的代码。
const PENDING = 0;
const FULFILLED = 1;
const REJECTED = 2;
class PromiseDemo {
constructor(callback) {
this.status = PENDING;
this.value = null;
this.defferd = [];
setTimeout(
callback.bind(this, this.resolve.bind(this), this.reject.bind(this)
), 10);
};
resolve(result) {
this.status = FULFILLED;
this.value = result;
this.done();
}
reject(error) {
this.status = REJECTED;
this.value = error;
}
handle(fn) {
if (!fn) {
return;
}
var value = this.value;
var t = this.status;
var p;
if (t == PENDING) {
this.defferd.push(fn);
} else {
if (t == FULFILLED && typeof fn.onfulfiled == 'function') {
p = fn.onfulfiled(value);
}
if (t == REJECTED && typeof fn.onrejected == 'function') {
p = fn.onrejected(value);
}
var promise = fn.promise;
if (promise) {
if (p && p.constructor == this) {
p.defferd = promise.defferd;
} else {
p = this;
p.defferd = promise.defferd;
this.done();
}
}
}
}
done() {
if (this.status == PENDING) {
return;
}
var defferd = this.defferd;
for (var i = 0; i < defferd.length; i++) {
this.handle(defferd[i]);
}
}
then(success, fail) {
var o = {
onfulfiled: success,
onrejected: fail
};
var status = this.status;
o.promise = new this.constructor(function () { });
if (status == PENDING) {
this.defferd.push(o);
} else if (status == FULFILLED || status == REJECTED) {
this.handle(o);
}
return o.promise;
}
}
