本文包括以下部分：
- promise来解决callback hell
- promise 的三种状态
一、promise来解决callback hell
对于如下的场景——如果我们想要根据获取的data1，来获取data2，再根据获取的data2来获取data3，那么就会形成callback hell：
这时，我们就需要promise来解决callback hell。
所以，我们对上面的代码进行如下改写：
function getData(url){
return new Promise((resolve, reject)=>{
$.ajax({
url,
success(data){
resolve(data)
},
error(err){
reject(err)
}
})
})
}
const url1 = ‘data1.json‘
const url2 = ‘data2.json‘
const url3 = ‘data3.json‘
getData(url1).then(data1=>{
console.log(data1)
return getData(url2)
}).then(data2=>{
console.log(data2)
return getData(url3)
}).then(data3=>{
console.log(data3)
}).catch(err => console.error(err))
这样呢，callback hell的嵌套形式就变成了管道形式。
二、promise 三种状态
- 三种状态
- 状态的表现和变化
- then和catch对状态的影响
（1）三种状态
主要有 pending resolved rejected
pending --> resolved
pending --> rejected
上面的两种变化不可逆，且只有这两种变化。
大家可以运行下面的代码，感受一下状态的变化：
const p1 = new Promise((resolve , reject) => {
})
console.log(‘p1‘, p1) // pending
const p2 = new Promise((resolve , reject) => {
setTimeout(() => {
resolve()
})
})
console.log(‘p2‘, p2) //pending 一开始打印时
setTimeout(() => {
console.log(‘p2-setTimeout‘, p2) // fulfilled
});
const p3 = new Promise((resolve , reject) => {
setTimeout(() => {
reject()
})
})
console.log(‘p3‘, p3) //pending 一开始打印时
setTimeout(() => {
console.log(‘p3-setTimeout‘, p3) // rejected
});
（2）三种状态的表现
- pending 状态，不会触发then和catch
- resolved 状态，会触发后续的then回调函数
- rejected 状态，会触发后续的catch回调函数
const p1 = new Promise((resolve , reject) => {
})
console.log(‘p1‘, p1);
p1.then(()=>{
console.log(‘then‘)
}).catch(()=>{
console.log(‘catch‘)
}) //p1 Promise {<pending>} 不会触发then和catch
const p2 = new Promise((resolve , reject) => {
resolve()
})
console.log(‘p2‘, p2);
p2.then(()=>{
console.log(‘then‘)
}).catch(()=>{
console.log(‘catch‘)
})
//p2 Promise {<fulfilled>: undefined} 触发then回调函数
//then
const p3 = new Promise((resolve , reject) => {
reject()
})
console.log(‘p3‘, p3);
p3.then(()=>{
console.log(‘then‘)
}).catch(()=>{
console.log(‘catch‘)
})
//p3 Promise {<rejected>: undefined} 触发catch回调函数
//catch
（3）then 和 catch 改变状态
- then 正常返回resolved，里面有报错则返回rejected
- catch 正常返回resolved，里面有报错则返回rejected
// then 正常返回resolved，里面有报错则返回rejected
const p1 = Promise.resolve().then(()=>{
return 100
})
console.log(‘p1‘, p1) //resolved
const p2 = Promise.resolve().then(()=>{
throw new Error(‘error‘)
})
console.log(‘p2‘, p2) //rejected
运行结果：
// catch 正常返回resolved，里面有报错则返回rejected
const p1 = Promise.reject().catch(()=>{
return 100
})
console.log(‘p1‘, p1) //resolved
const p2 = Promise.reject().catch(()=>{
throw new Error(‘error‘)
})
console.log(‘p2‘, p2) //rejected
运行结果：