Promise第一篇：基本使用方法和串联

1.基本使用

2.Promise的串联

1.基本使用

首先清楚promise的过程：事件从unsettled未解决阶段（pending状态）开始发展到settled已解决阶段（resolved和rejected状态），Promise对象可以传resolve与reject两个函数，其中resolve函数将Promise推向resolved阶段，reject函数将Promise推向rejected阶段，且两者均只可传一个参数，表示推向状态的数据，下面给个图理解一下

注册thenable函数：当Promise是resolved状态时，执行thenable函数，注册格式如【例1-1】

注册catchable函数：当Promise是rejected状态时，执行catchable函数，注册格式如【例1-1】

【例1-1】pro.then可以只添加thenable函数，pro.catch可以单独添加catchable函数

方法一

const pro = new Promise((resolve, reject) => {})
pro.then(data => { //data是状态数据})
pro.catch(err => { //err是状态数据})

方法二

const pro = new Promise((resolve, reject) => {})
pro.then(data => {}, err => {})

【注】

1）如果当前是未解决阶段，thenable函数和catchable函数会加入到作业队列，等待状态到达后执行

2）未解决阶段的处理函数是同步的，会立即执行，thenable和catchable函数是异步的，就算是立即执行，也会加入到事件队列中等待执行，并且，加入的是微队列【例1-2】

4）在未解决阶段的处理函数中，如果发生未捕获的错误，会将状态推向rejected，并会被catchable捕获【例1-3】

5）一旦状态推向了已解决阶段，无法再对状态做任何更改

6）Promise并没有消除回调，只是让回调变得可控

【例1-2】

const pro = new Promise((resolve, reject) => {console.log('未解决阶段');setTimeout(() => {console.log('计时器进宏队列')}, 0);resolve(123);
})
pro.then(data => {console.log(data);
})
console.log('执行栈不为空');

【结果】首先事件是pending状态，执行第二行代码，打印“未解决阶段”；之后定时器线程监控到有计时器事件，计时器事件进入宏队列，等待执行，然后状态到达resolved，调用thenable函数，放进微队列，但是由于此时的执行栈并不是空栈，还有log事件，因此先执行第十一行代码，打印“执行栈不为空”，之后执行栈为空，优先执行微队列中的thenable函数，打印data“123”，再执行宏队列，打印“计时器进宏队列”，结果图1-2所示

【例1-3】

const pro = new Promise((resolve,reject)=>{throw new Error('rejected');
})
pro.then(data =>{console.log(data);
})
pro.catch(err=>{console.log(err);
})

【结果】

2.Promise的串联

当后续的Promise需要用到之前的Promise的处理结果时，需要Promise的串联。在Promise对象中，无论then方法还是catch方法，它们都具有返回值，返回的是一个全新的Promise对象【例2-1】

【注】它的状态满足下列规则

如果当前的Promise是未解决的，得到的新的Promise是挂起状态【例2-2】
后续的Promise一定会等到前面的Promise有了后续处理结果后才会变成已解决状态【例2-2】
如果当前的Promise是已解决的，会运行相应的后续处理函数，并将后续处理函数的结果（返回值）作为resolved的状态数据，应用带新的Promise中，如果后续处理函数发生错误，则把返回值作为rejected状态数据，应用到新的Promise中【例2-3】

【注】若前面的Promise的后续处理，返回的是Promise，则返回的新的Promise状态和后续处理返回的Promise状态保持一致【例2-4】

【例2-1】

// then/catch的返回结果是一个新的Promise
const pro = new Promise((resolve, reject) => {if (Math.random() > 0.5) {resolve(1);} else {reject(2);}
})
const pro1 = pro.then(result => {return result * 2;
}, err => {return err * 2
})
console.log('pro:',pro);
console.log('pro1:',pro1);

【结果】

【例2-2】

//当前Promise为解决状态，则新的得到的Promise是挂起状态
const pro = new Promise((resolve, reject) => {setTimeout(() => {resolve(123)}, 500);
})
const pro1 = pro.then(result => {console.log(result);
})
console.log(pro);
console.log(pro1);

【结果】

等pro的后续处理函数执行以后，pro1的挂起状态变为resolved状态，

【例2-3】***重点***

const pro = new Promise((resolve, reject) => {
if (Math.random() > 0.5) {//运行pro的thenable函数resolve(1);
} else {//运行pro的catchable函数reject(2);
}
})
const pro1 = pro.then(result => {
//pro的thenable函数
if (Math.random() > 0.5) {console.log('状况1')//执行pro1的thenable函数，且状态数据来自pro的thenable函数，打印 1 * 2 * 2 = 4return result * 2;
} else {console.log('状况2')//执行pro1的catchable函数，且状态数据来自pro的thenable函数，打印 1 * 3 * 3 = 9throw result * 3;
}
}, err => {
//pro的catchable的函数
if (Math.random() > 0.5) {console.log('状况3')//执行pro1的thenable函数，且状态数据来自pro1的catchable函数，打印 2*2*2 = 8return err * 2;
} else {console.log('状况4')//执行pro1的catchable函数，且状态数据来自pro1的catchable函数，打印 2 * 3 * 3 = 18throw err * 3
}
})
//前者为pro1的thenable函数，后者为pro1的catchable函数
pro1.then(result => console.log(result * 2), err => console.log(err * 3))

【结果】上述4种状态，分别打印4，9，8，18，感觉代码分析的很清楚了，这里就不贴图了，小伙伴可以自己试试

【例2-4】

const pro1 = new Promise((resolve, reject) => {resolve(1);
})
const pro2 = new Promise((resolve, reject) => {setTimeout(() => {resolve(2)}, 2000);
})
pro1.then(result => {console.log('结果出来了，得到的是一个Promise');return pro2;
}).then(result => {console.log(result);
}).then(result => {console.log(result);
})

【结果】第一行立即打印，第二行和第三行隔2000毫秒打印，并且数据和状态是拿pro2的状态和数据，第3行打印undefined，是因为前一个Promise没有返回值