基础
Promise
- 抽象表达：是js中进行异步编程的新的解决方案
- 具体解释：1、从语法上来说是一个构造函数 2、从功能上来说promise对象用来封装一个异步操作并可以获取其结果
- 状态改变：0、new实例为pending（未知）状态 1、pending变为resolved（成功） 2、pending变为rejected（失败）
一个promise对象只能改变一次，成功结果数据一般为value，失败结果数据一般为reason
示例代码
const p1 = new Promise
(
function(resolve, reject) // 这里的参数为两个处理函数，该函数称为执行器函数（执行异步任务），该函数为同步回调
{
setTimeout
(
function()
{
if(Date.now() % 2 === 0)
{
resolve('成功的数据！');
}
else
{
reject('失败的数据！');
}
},1000
)
}
)
基本使用
var x;
function fun1()
{
return new Promise
(
function(resolve, reject)
{
// 模拟异步任务
setTimeout
(
function()
{
console.log('get data successfully'); // 完成数据的接收，并将其处理抛出
resolve('datax');
},2000
)
}
)
}
fun1().then( (value) => { x = value; console.log(x); } ); // 在回调函数内部将数据输出
// 语法糖
const p1 = Promise.resolve(1); // 构建一个产生一个成功数据为1的promise对象
const p2 = Promise.reject(0); // 构建一个产生一个失败数据为0的promise对象
p1.then( (value) => { console.log(value); } );
p2.catch( (reason) => { console.log(reason); } );
// Promise.all
const allP = Promise.all([p1, p2]); // 参数为一个包含promise对象的数据
// 对象数组中有一个promise对象返回错误就会得到错误结果，成功的数据将返回一个数组保存（顺序按照对象数组内的顺序）
allP.then( value => { console.log('onResolved') } ).catch( reason => { console.log('onRejected', reason) } );
// Promise.race 了解（结果为第一个完成的promise实例对象的结果）
Promise.race([p2, p1]).then( value => { console.log('111') } ).catch( reason => { console.log('000') } );
关键问题
- promise实例对象返回的新promise的结果由指定的对应的回调函数的执行结果来决定
- 详细解释：
- 如果抛出异常，新的promise状态为rejected，reason为抛出的异常
- 如果返回值为任意非promise的值，新的promise状态变为resolved，value的值为返回的值
- 若返回值为一个新的promise，则该promise的结果就会称为新promise的结果
- 详细解释：
代码示例
new Promise
(
function(resolve, reject)
{
resolve('正确的输出结果');
}
).then(value => {console.log('value1', value); return 111;}, reason => {console.log('reason1', reason)}).then(value => {console.log('value2', value)}, reason => {console.log('reason1', reason)});
关键问题2
-
成功或者失败的回调是异步的
-
执行器函数内部的内容是同步执行（关键！）
代码示例
new Promise(
function(resolve, reject){
setTimeout(
function(){
resolve('成功返回的数据');
console.log('这是resolve语句后的内容');
}
)
}
).then(value => {console.log(value)}).catch(reason => {console.log(reason)});
异常穿透
示例代码
new Promise
(
function(resolve, reject)
{
reject('onRejected');
}
).then
(
value => { console.log('value1', value) },
// reason => { console.log('reason1', reason) } // 若不传入失败的回调函数，相当于 reason => {throw reason}
).then
(
value => { console.log('value2', value) },
// reason => { console.log('reason1', reason) }
).then
(
value => { console.log('value3', value) },
// reason => { console.log('reason1', reason) }
).catch
(
reason => { console.log('reason', reason); return new Promise( ()=>{} ); } // 返回一个pending状态的promise实例对象终止链式调用
).then
(
value => { console.log('value4', value) },
reason => { console.log('reason4', reason) }
)
宏队列与微队列（补充）
- 宏队列：dom事件回调、ajax回调、定时器回调
- 微队列：promise回调、mutation回调
- 注意！：在执行每个宏任务前，都要将微任务执行完
示例代码
setTimeout(function(){
console.log('延迟定时器1');
Promise.resolve('promise3').then(value => {console.log(value)});
},0);
setTimeout(function(){
console.log('延迟定时器2');
},0);
Promise.resolve('promise1').then(value => {console.log(value)});
Promise.resolve('promise2').then(value => {console.log(value)});