Promise
Promise三种状态
pending 过程中，不会触发then和catch
resolved 成功，会触发后续的then回调函数
rejected 失败，会触发后续的catch回调函数
then正常返回resolved，有报错则返回rejected
catch正常返回resolved，有报错则返回rejected
案例：
Promise.resolve().then(() =>{ // 里面没有报错，返回resolved，触发then
console.log('1');
}).catch(() => { // 不会触发catch
console.log('2');
}).then(() => { // 最后输出
console.log('3');
})
最后输出1 3
Promise.resolve().then(() =>{ // 里面有一个报错，返回rejected，触发catch
console.log('1');
throw new Error("error1")
}).catch(() => { // 里面没有报错，返回resolved，触发then
console.log('2');
}).then(() => { //最后输出
console.log('3');
})
输出1 2 3
Promise.resolve().then(() =>{ // 里面有报错，返回rejected，触发catch
console.log('1');
throw new Error("error1")
}).catch(() => { // 没有报错，返回resolved，触发then
console.log('2');
}).catch(() => { // 不会触发
console.log('3');
})
最后输出1 2
async/await
执行async函数，返回的是Promise对象
async function fn1() {
return 100
}
const res1 = fn1()
console.log(res1); // Promise {<fulfilled>: 100}
await相当于Promise的then
(async function () {
const p1 = Promise.resolve(300)
const data = await p1 // await相当于Promise的then，resolved才会执行
console.log(data);
})()
// 300 ,如果换成reject就会报错
(async function () {
const data = await 200 // 会自动封装成await Promise.resolve(400)
console.log(data);
})() // 200
async function fn1() {
return Promise.resolve(200)
}
(async function () {
const data = await fn1() // await还可以跟函数
console.log(data);
})() // 200
用try...catch可捕获异常，代替了Promise的catch
(async function () {
const p1 = Promise.reject("err1")
try {
const res = await p4
console.log(res);
} catch (error) {
console.log(error);
}
})() // Uncaught (in promise) err1
执行顺序案例
async function async1() {
console.log('async start');// 2.1 打印
await async2() //3、执行
// await 的后面，都可以看做是callback里的内容，即异步
console.log('async1 end'); // 5、打印，这是异步任务，所以最后才执行
}
async function async2() {
console.log('async2');// 3.1 打印
}
console.log('script start'); // 1、执行并打印
async1() // 2、执行
console.log('script end'); //4、打印，同步代码执行完毕
// script start
// async start
// async2
// script end
// async1 end
这里await属于同步任务，await之后的属于异步任务，js的运行机制是先执行同步任务，再执行异步任务
async function async1() {
console.log('async1 start'); // 2.1 打印输出
await async2() // 3、执行async2()
// 下面所有都是异步
console.log('async1 end'); // 异步开始 5、打印输出
await async3() // 6、执行async3()
console.log('async1 end 2'); // 7、打印输出
}
async function async2() {
console.log('async2'); // 3.1 打印输出
}
async function async3() {
console.log('async3'); // 6.1 打印输出
}
console.log('script start'); // 1、打印输出
async1() 2、执行
console.log('script end'); // 4、打印输出，所有同步执行完毕
//script start
//async1 start
//async2
//script end
//async1 end
//async3
//async1 end 2
await后面所有都是异步，最后执行
结合宏任务微任务
微任务执行时机比宏任务要早
宏任务：setTimeout和setInterval，Ajax，DOM事件
微任务：Promise async/await
// 综合题目
async function async1() {
console.log('async1 start');// 3.1 输出
await async2() // 4 执行
console.log('async1 end');// 5 异步 微任务1
}
async function async2() {
console.log('async2'); // 4.1 输出
}
console.log('script start'); // 1、输出
setTimeout(() => { // 2、执行，异步，宏任务1
console.log('setTimeout');
}, 0);
async1() // 3、执行
// 初始化Promise，传入的函数会立刻执行
new Promise((resolve, reject) => {
console.log('promise1'); // 6、输出
resolve() // 7、异步 微任务2
}).then(() =>{
console.log('promise2');
})
console.log('script end');// 8、输出，同步执行完毕，异步先执行微任务，再执行宏任务
//script start
//async1 start
//async2
//promise1
//script end
//async1 end
//promise2
//setTimeout
1、输出script start
2、setTimeout，异步，宏任务1，后执行
3、执行async1()
3.1、输出async1 start
4、执行async2()
4.1、输出async2
5、await的后面都是异步，微任务1
6、初始化Promise，传入的函数会立刻执行，输出promise1
7、resolve()后面都是异步，微任务2
8、输出script end，同步执行完毕
开始执行异步，异步先执行微任务，再执行宏任务
执行微任务1，输出async1 end
执行微任务2，输出promise2
执行宏任务1，输出setTimeout
面试精选之Promise
手撕 Promise
Promise之你看得懂的Promise
理解 JavaScript 的 async/await
手写promise
手写promise
一次弄懂Event Loop
统一错误信息，返回这个直接到catch
return Promise.reject(error)
网友评论