最近在回顾ES6的知识，想整理下跟Promise相关的内容。我准备整一个Promise解读的系列，看看能深入到什么程度吧。由浅入深，先认识下Promise。
痛苦的回忆：回调地狱
假如现在让你维护一个“古老”的项目，缺少脚手架的加持，只能使用es5的语法来开发，我相信你一定会深刻的体会到es6添加Promise是多么伟大的行为。在es5的时代，异步编程需要依赖回调函数来实现，这就会导致一个问题：回调地狱（callback hell），代码结构会变成复杂，可读性、可维护性差到极致。例如：如果有一个业务需要连续调用三个接口，那么就需要这么写：
ajax('api1', function(res1){
if(res1.success) {
ajax('api2', function(res2) {
if (res2.success) {
ajax('api3', function(res3){
if(res3.success) {
// dosomething....
}
});
}
})
}
})如果场景更复杂的话，可能就会变成这样：
除了接口调用，事件、异步加载等等需要等待的操作基本都需要通过回调来实现。整个项目中充斥着这样的代码基本就只能靠记忆去维护。
Promise是什么？
es6的规范中新增Promise对象，是异步编程的一个解决方案。Promise相当于提供一个容器，这个容器会封装一个单独的“时间线”，这个独立的“时间线”与主线程的执行是并行，当容器内发生变化的时候，容器会更新其状态，外部可以通过API获取到状态变更的结果，并且这个状态会被固定在容器中，保持不变，无论什么时候都可以获取。
Promise对象提供了更清晰的异步操作处理，可以将异步操作封装到Promise内，通过统一的方法来处理异步操作。当包装在Promise中的异步操作有结果时，Promise对象会根据异步操作的结果（正确或是错误）更新状态，并返回结果，我们可以通过Promise的then或者catch方法来获取异步操作的结果。针对上面的多个异步串联的操作，Promise对象提供链式调用的方式，通过then方法将多个异步操作串联起来，形成一个操作序列。这种方式可以避免回调地狱，将多层嵌套变成使得代码更加清晰和易于理解。针对其他多个异步操作的场景，Promise对象还提供了一些静态方法，如Promise.all和Promise.race，用于处理多个异步操作的结果。这些功能使得Promise对象成为处理异步操作的强大工具，能够大大简化异步操作的处理流程，提高代码的可维护性和可读性。
Promise的状态
Promise通过状态来定义包裹的异步操作的目前所处的阶段，Promise提供了三个互斥的状态：fulfilled（已成功） 、rejected（已失败）、pending（进行中），任何Promise对象都处于这三种状态之一。
当我们创建一个Promise对象时，这个Promise对象处于pending状态，再异步操作产生结果后，会有以下两种状态的变化：
- 异步操作成功：pending转换到fulfilled
- 异步操作失败：pending转换到rejected
这个状态一旦变更，就不会再改变，而且无论是什么时候都可以获取到对应的结果。就是说在Promise对象的状态发生变化后，在任何时候都可以为Promise添加回调函数都可以会立即得到这个结果。这与事件是完全不同，在事件的模式下，如果你错过了它，就无法在获取结果。
Promise的基础用法
按照ES6的规范，Promise对象内置的Promise构造函数来实例化：
let promise = new Promise(function(resolve, reject) {
// do sync
resolve(); // 将promise的状态置为fulfilled(已成功)
reject(); // 将promise的状态置为rejected(已失败)
});这时，我们就得到一个`Promise`对象的实例：`promise`，然后通过这个实例，可以在任何时候取得异步操作的结果：
promise.then(() => {
// do something
}).catch((error) => {
console.error(error);
});通过then和catch两个方法分别捕获Promise对象中包裹的异步操作的结果和错误。
这里需要注意的是，异步操作结束后会通过resolve和reject来修改实例的状态。那么这里就不一定是真正反应异步操作的实际结果，而是异步操作想要外界知道的结果。这样说可能有点绕，举个例子，在请求一个接口时，请求是一个异步动作，按照ajax工具思路，应该是根据状态码来修改状态。但是在实际操作中，接口返回200，但是内容是操作失败，虽然这里的接口是请求成功（就http请求而言），但是在业务上是失败的。一般这里也会直接处理成失败的状态而不是成功状态（这就是异步操作真正想要给外界的结果）。
先整个例子
上面是Promise的基础用法，为了更好的说明，这里我先整个例子：现在假设在某个业务系统中，所有接口的请求的返回格式都是：
{
"errCode": 0, // 0 成功 1 失败
"data": [], // 数据
"message": '' // 信息
}我们通过Promise + XmlHttpRequest简单封装一个ajax方法：
function createUrlParams(data) {
return Object.keys(data).map((v) => {
return `${v}=${data[v]}`;
}).join('&');
}
function ajax(url = '', data = {}, type = 'GET') {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
type = type.toUpperCase();
if (type === 'GET') {
url += '?' + createUrlParams(data);
data = null;
}
xhr.open(type, url, true);
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
let res = JSON.parse(xhr.response);
if (res.errCode !== 0) {
reject({status:'error', result: res});
} else {
resolve({status:'success', result: res})
}
} else {
reject(`请求失败：${xhr.status}`);
}
}
xhr.onerror = function () {
reject(`请求失败：${xhr.status}`);
};
xhr.send(data);
});
}上面的ajax方法最终会返回一个Promise实例，在请求完成的时候根据请求的状态和结果修改Promise的状态。例如获取用户的列表可以这么写：
ajax('http://xxxx.com/user/get-list')
.then(res => {
console.log(res);
}).catch(err => {
console.error(err);
});基础方法说明
then方法
上面讲到我们可以通过then方法来获取异步的成功的结果，但其实then方法是接收两个回调方法，如果Promise状态为fulfilled则执行第一个回调方法，失败则执行第二个：
ajax('http://xxxx.com/user/get-list')
.then(
() => {
console.log('success');
},
() => {
console.log('error');
}
);不管成功还是失败，then都会返回一个新的promise：
我们先修改下上面的代码，以便更好的观察：
const pAjax = ajax('http://xxxx.com/user/get-list');
const p1 = pAjax.then(
() => {
console.log('success');
},
() => {
console.log('error');
}
);如果没有特殊操作（这个等会讲），不管成功失败，这个新的promise的状态会被置为fulfilled：
const p2 = p1.then(() => {
console.log('success 2');
});
从上面的例子可以看出，在then的回调函数中我们并没有返回任何东西，但是then依然会返回一个promise。
例如这样：
const p2 = p1.then()
.then(() => {
console.log('success');
});这是then的机制，如果回调函数中没有return的话，则会默认返回一个成功的promise，如果回调函数中有return，则会判断return是否为一个promise，如果不是promise，则会将其包装成promise返回，并且状态为成功。如果是promise，则直接返回，链式调用后面的方法会根据这个promise的状态触发对应的回调函数。
返回非promise
const p1 = pAjax.then(
() => {
return {result: 'success'};
},
() => {
return {result: 'error'};
}
);
const p2 = p1.then((res) => {
console.log(res);
});
返回promise
可以看到，如果then中返回的是promise，链式后面的函数会等待这个promise的状态变更，再根据promise的状态来执行对应的回调。
状态传递
从上面的例子也可以看到，then主要是受到上一个promise的影响，在pAjax错误的时候，p1会触发错误回调，而p2触发的时候成功的回调。那么如果p1没有捕获错误的话，错误会在p2被捕获到吗？
const p1 = pAjax.then(
() => {
console.log('success');
}
);
const p2 = p1.then(
() => {
console.log('success');
},
() => {
console.log('error');
}
)
可以看到，p2捕获到错误，说明错误是会向下传递的。
总结
then函数支持传入两个回调方法，分别为成功的回调和失败的回调，then会根据回调函数的返回值返回一个新的promise，如果返回值不是promise，封装成promise返回，如果是promise则直接返回。如果then没有捕获错误，则会将错误向下传递，这是新的promise的状态为失败。
catch方法
catch方法其实是then(null/undefined, reject())的变相写法，在指定发生错误的时候执行回调函数。
const pAjax = ajax('http://xxxx.com/user/get-list');
const p1 = pAjax.then(() => {
console.log('success');
}).catch((err) => {
console.log(err);
});因为catch是then捕获错误的变相写法，所以then具备的特性catch都具备，这里就不多赘述了。
值得一提的是，跟传统的try/catch不一样，在promise中产生的错误，只能在promise的链路上捕获到，不会扩散到外部：
function err() {
throw new Error('error');
}
try {
err(); // 抛出错误
console.log('next'); // 不执行，被错误阻塞
} catch(err) {
console.log(err); // error对象
}try {
promise = ajax('http://xxxx.com/user/get-list'); // 抛出错误
setTimeout(() => {console.log('next');}, 5000); // 5s后仍执行
} catch(err) {
console.log(err); // 无法捕获到错误
}另外，如果在promise中抛出错误，但是没有执行reject方法，promise还是会将状态处理成rejected：
function err(){
return new Promise((resolve, reject) => {
throw new Error('promise error');
});
}
err().catch(err => {
console.log(err); // Error: promise error
});但是，如果已经修改了promise的状态，再抛出错误，则是无效的：
function err(){
return new Promise((resolve, reject) => {
resolve('success');
throw new Error('promise error'); // 无效
});
}
err().then((res) => {
console.log(res); // success
}).catch(err => {
console.log(err); // 无
});需要注意的，如果已经使用catch捕获了错误，那么错误就不会在向下传递，除非前面的catch将错误重新抛出。
ajax('http://xxxx.com/user/get-list')
.catch(err => {
console.log(err); // error信息
}).catch(err => {
console.log(err); // undefined
}); ajax('http://xxxx.com/user/get-list')
.catch(err => {
throw err; // 也可以写成return Promise.reject(err);
}).catch(err => {
console.log(err); // error信息
});编写建议
前面讲到，promise的链路上错误是会向下传递的，所以呢，我建议promise的写法是按照需要在指定位置使用 catch捕获错误，不要再then中使用rejected的回调去捕获错误，这样整体的可读性更高：
ajax('http://xxxx.com/user/get-list')
.then(() => {
// 步骤1
})
.then(() => {
// 步骤2
}) // ...
.catch((err) => {
console.log(err);
});这样看起来更像同步的写法，更清晰可读性更高。
如果是多个promise嵌套调用的话，建议只在最外层捕获错误，这样可以在统一的地方处理错误，埋日志，错误调试等操作都会简化。当然如果不希望中间某些操作的错误终端整个promise，可以在这些操作上添加catch拦截掉错误。
这里假设是一个添加用户的场景，有几个步骤：
- 获取录入的用户名（正常是同步的，这里假设是一个promise）
- 调用接口校验用户名是否重复
- 提交用户名
- 刷新用户列表
function getForm()
.then(() => {
}){
return form();
}
function ApiCheckName(name) {
return ajax('http://xxxx.com/user/check-name', {name})
.then(isExists => {
if (isExists) {
throw new Error('用户名已存在');
} else {
return true;
}
})
}
function ApiAddUser(data) {
return ApiCheckName(data.name)
.then(() => {
return ajax('http://xxxx.com/user/add', data, 'POST');
});
}
function ApiGetUserList() {
return ajax('http://xxxx.com/user/get-list');
}
// 封装添加用户的方法
function addUser() {
return getForm()
.then((form) => {
return ApiAddUser({name: 'skkk'});
})
.then(() => {
return getUserList();
});
}
// 外部调用
addUser()
.catch((err) => {
console.log('失败', err);
})finally方法
finally方法是在ES2018规范引入的，所以在一些版本较低的浏览器是不支持的。finally方法是不管promise最终是成功还是失败，都会执行该方法。
ajax('http://xxxx.com/user/get-list')
.then(() => {console.log('success');})
.catch(() => {console.log('error');})
.finally(() => {console.log('finally');})如上面的代码，无论接口请求是否成功，都会执行finally。
finally本质上还是then的变种，其实现的效果等于与在then的成功失败回调中分别添加相同的代码：
ajax('http://xxxx.com/user/get-list').finally(() => {
dosomething();
});等同于：
ajax('http://xxxx.com/user/get-list').then(
() => {
dosomething();
},
() => {
dosomething();
}
)明显finally更简洁。
与then不同的是finally是不接收参数的。
ajax('http://xxxx.com/user/get-list')
.then(() => { return 1;})
.catch(() => { return 2; })
.finally((res) => {console.log(res);}) // undefined这样我们无法通过传参来判断promise最终的状态，从而进行一些针对的操作。但是还是可以用不过来做一些终结操作。例如：实现一个带进度条的下载功能，不管下载成功或失败都要关闭重置进度条，就可以在finally中实现。
同样的，finally也是返回一个promise
const pAjax = ajax('http://xxxx.com/user/get-list');
const p1 = pAjax.then(() => { return 1;})
.catch(() => { return 2; });
const p2 = p1.finally(res => {console.log(res);});
const p3 = p2.then(res => {console.log(res);});
可以看到返回值会越过finally传递。
同样，状态也是会向下传递的
const pAjax = ajax('http://xxxx.com/user/get-list');
console.log('pAjax ====>', pAjax);
const p1 = pAjax.finally(res => {console.log(res);});
console.log('p1 ====>', p1);
const p2 = p1.then(
() => {console.log('success');},
() => {console.log('error');}
);
console.log('p2 ====>', p2);
除了不接收参数，finally里返回的参数或成功的promise都也不会被传递下去：
const pAjax = ajax('http://localhost:3010');
const p1 = pAjax.finally(() => {
return 'finally';
});
const p2 = p1.then(
(res) => {console.log('p2 res', res);},
(res) => {console.log('p2 res', res);}
);
const p3 = pAjax.finally(() => {
return Promise.resolve('finally');
});
const p4 = p3.then(
(res) => {console.log('p4 res', res);},
(res) => {console.log('p4 res', res);}
);
p2和p4都获取到pAjax的结果。
但是如果finally返回了Promise或抛出错误就会向下传递：
const p1 = pAjax.finally(() => {
throw new Error('finally error'); // 抛出错误
});
const p2 = p1.then(
(res) => {console.log('p2 res',res);},
(res) => {console.log('p2 res',res);}
);
const p3 = pAjax.finally(() => {
throw Promise.reject('finally'); // 返回成功的promise
});
const p4 = p3.then(
(res) => {console.log('p4 res',res);},
(res) => {console.log('p4 res',res);}
);
可以看到，无论pAjax是否成功的，但是p2和p4都是捕获到p1和p3抛出的错误。
当然，实际的开发中千万别这么写，finally就做一些统一的终结操作就行了。如果统一操作也是promise的话，建议单独处理。
Promise.resolve() & Promise.reject()
如果想要返回一个promise，但又不想使用new Promise的方式来实现，就可以使用这两个方法。基本上其功能与字面意义一致，Promise.resolve()会直接返回一个状态为fulfilled的promise，Promise.reject()则返回一个状态为rejected的promise。
Promise.resolve
上面说的是基本功能，不带任何参数会返回一个成功的promise。但是resolve方法可以接受一个参数，其会根据这个参数的不同返回不同的promise。
- 传入promise实例
传入promise实例，会直接返回这个实例，不做任何修改。
const p = Promise.resolve(ajax('http://xxxx.com/user/get-list'));
p.then(res => {
console.log(res); // {status: 'success', result: {…}}
}); - 传入thenable对象
thenable对象就是带then方法的对象，像这样的：
{
then: function(resolve, reject){
setTimeout(() => {
resolve('then');
}, 500);
}
}将这样的对象传给Promise.resolve()，它会将其转换为promise对象，并立刻执行then函数。像这样：
const p = Promise.resolve({
then(resolve, reject) {
setTimeout(() => {
resolve('thenable');
}, 500);
}
});
p.then(res => {
console.log(res); // thenable
});那then没有resolve或reject，只是一个方法甚至不是一个方法会是什么情况呢？
const p1 = Promise.resolve({
then() {
console.log('then function');
return 'then';
}
});
p1.then(res => {
console.log('p1', res);
});
const p2 = Promise.resolve({
then: {
a: 1
}
});
p2.then(res => {
console.log('p2', res);
});
const p3 = Promise.resolve({
then: '1'
});
p3.then(res => {
console.log('p3', res);
});
可以看到，如果then方法没有修改promise的状态的话，then方法会被执行，但是返回的promise会处于pending的状态。而then是非方法的话，会返回一个fulfilled的promise，对象被当做返回值返回。
- 其他类型的参数
传入对象、数组、字符串、数字等非方法类的参数，Promise.resolve会立即返回一个fulfilled的promise，并且将参数作为返回值。
Promise.resolve([1,2,3])
.then(res => {
console.log(res); // [1,2,3]
})传入的参数是一个非promise的方法，会获取该方法的返回值（如果有）做为返回值，同样也是返回一个状态为
fulfilled的promise。
function p1() {
console.log('function p1'); // function p1
return 'p1';
}
Promise.resolve(p1())
.then(res => {
console.log(res); // p1
})
function p2() {
console.log('function p2'); // function p2
}
Promise.resolve(p2())
.then(res => {
console.log(res); // undefined
})如果在方法中抛出错误呢？会不会走到catch呢？
function p1() {
throw new Error('p1 error');
}
Promise.resolve(p1())
.then(res => {
console.log(res);
}).catch(err => {
console.log(err);
});
答案是啥都没执行，因为p1在执行是就抛出错误了，后续代码终止执行。
Promise.reject
reject无论传不传入都是返回一个状态为rejected的promise。传入的任何参数都会做为失败的理由返回。
// 传入对象
Promise.reject({name: 'reject'})
.catch(err => {
console.log('object', err); // object {name: 'reject'}
});
// 传入字符串
Promise.reject('reject')
.catch(err => {
console.log('string', err); // string reject
});
function p1() {
console.log('function p1'); // function p1
return 'p1';
}
// 有返回值的方法
Promise.reject(p1())
.catch(err => {
console.log('p1', err); // p1 p1
});
function p2() {
console.log('function p2'); // function p2
}
// 无返回值的方法
Promise.reject(p2())
.catch(err => {
console.log('p2', err); // p2 undefined
});
// promise
Promise.reject(ajax('http://xxxx.com/user/get-list'))
.catch(err => {
console.log('ajax', err); // ajax promise
});这里跟resolve不一样的是，传入的参数是promise，也会将promise实例理由返回。而不是返回promise实例的结果。
总结
本文介绍了Promise最基础的知识，了解了Promise的基础应用。接下会继续深入了解Promise，敬请期待吧。
