「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」
一、谈谈 promise 和 await 的关系
1.async是一个通过异步执行并隐式返回promise对象作为结果的函数。也就是说，执行 async 函数，返回的都是promise对象。
async function fn1(){
return 1; // 如果返回的是一个普通值，那么它会帮你封装成一个promise对象返回；
}
// 等价于
async function fn2(){
return Promise.resolve(2); // 如果你直接返回的是一个promise对象的话，那么它就会直接返回这个promise对象；
}
// 等价于
async function test2(){
return new Promise((resolve,reject)=>{
resolve(2)
})
}
// 执行输出
const res1 = fn1()
const res2 = fn2()
console.log('res1::', res1)
console.log('res2::', res2)
结果：
2.promise成功返回的情况和await的写法
async function fn3(){
const p3 = new Promise((resolve,reject)=>{
resolve(555)
})
p3.then((res)=>{
console.log('fn3::', res)
})
}
// 相当于
async function fn4(){
const p4 = await(6666)
console.log('fn4:::', p4)
}
结果：
扩展：后续再补充捕获错误的写法
二、使用 async 和 await 实现用同步代码的方式来执行异步代码操作
1.异步执行的情况
function fn5(){
console.log('fn5:', 11111)
setTimeout(()=>{
console.log('fn5:', 22222)
},2000)
}
function fn6(){
console.log('fn5:', 33333)
}
结果：
解析：
在 fn5 中有一个 setTimeout 函数，这两个函数是异步执行的，而 fn5 和 fn6 两个函数是同步执行的，先执行fn5，再执行fn6，2秒后再执行setTimeout函数。
备注：如果把fn5中的setTimeout时间设置为0，结果输出顺序还是一样。
2.同步执行情况
async function fn7(){
console.log('fn7:', 11111)
const fn72 = await(22222)
console.log('fn72:',fn72)
console.log('fn73:',33333)
}
结果：
解析：
一般情况下,async与await配合使用才能使异步操作同步化；await就是等待的意思,等待某一个函数执行完之后,后面的代码才能开始执行。
三、使用 async 和 await 解决 promise 的回调地狱的问题的优雅写法
1.promise回调地狱的问题
const pn = new Promise((resolve, reject)=>{
setTimeout(() => {
resolve('周五了')
}, 1000);
}).then((res)=>{
console.log('res::', res)
return new Promise((resolve, reject)=>{
setTimeout(() => {
resolve('下班了')
}, 1000);
})
}).then((res)=>{
console.log('res2::', res)
})
结果：
2.使用await的优雅写法
function fn8(){
return new Promise((resolve, reject)=>{
setTimeout(() => {
resolve('周五了')
}, 1000);
})
}
function fn9(){
return new Promise((resolve, reject)=>{
setTimeout(() => {
resolve('下班了')
}, 1000);
})
}
async function fn10(){
const res1 = await fn9()
const res2 = await fn10()
console.log('res1::', res1)
console.log('res2::', res2)
}
四、promise 的特点
1.Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），不受外界影响。
2.Promise状态一旦改变之后，就不会再变了。
3.Promise一旦建立，无法中途取消。Promise内部抛出的错误，不会反应到外部。当处于pending状态时，无法得知目前进展到哪一个阶段。
五、扩展
Promise.all() 和 Promise.race()的用法
