async await 介绍 从0手动实现async await
1 async await介绍
async 和 await 是用于处理异步编程的语法糖,它们简化了异步操作的编写,使其看起来像同步代码。通过 async 标记一个函数为异步函数,返回的是一个 Promise 对象,而 await 用来暂停执行,直到 Promise 解决9相当于then函数),错误处理使用try...catch...(相当于catch),从而实现异步流程的同步化表达。下面将通过代码示例逐步解释上面一段话。
1.1 async 标记函数 返回 Promise 对象
调用async方程式将会返回Promise对象,即使返回值不是Promise也会包装,相当于调用了Promise上的静态类方法resolve对返回值进行了封装,代码如下:
async function asyncFunction() {
console.log("inside asyncFunction");
return 'Hello';
}
async function undefinedFunction(){
console.log("inside undefinedFunction");
console.log('no return value');
}
// 调用async函数时会立即执行函数内部的代码,并且将返回一个promise对象
console.log(asyncFunction()); // Promise { 'Hello' } // async function always return a promise
// 相当于resolve了一个promise
Promise.resolve('Hello')
console.log(undefinedFunction()); // Promise { undefined }
// 输出结果:
// inside asyncFunction
// Promise { 'Hello' }
// inside undefinedFunction
// Promise { undefined }
1.2 await 用来暂停执行,直到 Promise 解决 错误处理
await 的工作原理类似于调用 Promise 的 then 方法,等待 Promise 从 pending 状态变为 fulfilled 状态后返回结果(相当于暂停代码了,后面都是回调函数callback)。如果 Promise 失败或一直处于 pending 状态,将会在下文介绍。因为 async 函数返回的是一个 Promise,所以 await 后面不仅可以跟 Promise,也可以跟 async 函数或其他值。若是其他值,JavaScript 会先将其转换为 Promise.resolve(val),再继续执行。这样 await 可以兼容不同类型的数据并处理异步操作。
下面代码是一般的await的使用,演示了Promise,async function,normal value的处理情况。
(async function awaitTestFunction() {
// await 处理async函数返回的promise对象
let res = await asyncFunction()
console.log(res) // Hello
// await 处理promise对象
res = await new Promise((resolve) => {
setTimeout(() => {
resolve('world')
}, 1000)
})
console.log(res) // world
// await 处理普通值
res = await 'normal value'
console.log(res) // normal value
})();
// 最终输出结果
// Hello
// world
// normal value
当出现Promise一直处于pending状态,throw error 或者rejected状态就会代码执行,这时就要使用try catch捕获错误(这样就替代了.catch的作用)如下所示:
async function pendingFunction(){
console.log("inside pendingFunction");
// await将会一直等待promise对象的状态变为resolved,在node环境中将会直接导致程序退出
await new Promise(() => {
})
// 将会无法执行到这里
console.log('after pending')
}
async function rejectFunction(){
console.log("inside rejectFunction");
try {
// 抛出错误
await new Promise((undefined, reject) => {
// reject('reject error during new Promise instance')
throw new Error('throw error')
})
} catch (error) {
console.log(error) // reject
}
// 不使用try catch将会无法执行到这里
console.log('after reject')
}
async function Testall(){
// await awaitTestFunction()
// await pendingFunction()
await rejectFunction()
}
Testall()
await一直处于pending状态将会导致程序直接中断。await后面的错误不使用try...catach捕获将会导致程序报错终止 。
1.3 async和await综合使用
现在将上面所有的async函数按照从前到后的顺序依次执行,实现异步操作变为同步操作,代码如下所示:
async function asyncFunction() {
console.log("inside asyncFunction");
return 'Hello';
}
async function undefinedFunction(){
console.log("inside undefinedFunction");
console.log('no return value');
}
async function awaitTestFunction() {
// await 处理async函数返回的promise对象
let res = await asyncFunction()
console.log(res) // Hello
// await 处理promise对象
res = await new Promise((resolve) => {
setTimeout(() => {
resolve('world')
}, 1000)
})
console.log(res) // world
// await 处理普通值
res = await 'normal value'
console.log(res) // normal value
}
async function pendingFunction(){
console.log("inside pendingFunction");
// await将会一直等待promise对象的状态变为resolved,在node环境中将会直接导致程序退出
await new Promise(() => {
})
// 将会无法执行到这里
console.log('after pending')
}
async function rejectFunction(){
console.log("inside rejectFunction");
try {
// 抛出错误
await new Promise((undefined, reject) => {
// reject('reject error during new Promise instance')
throw new Error('throw error')
})
} catch (error) {
console.log(error) // reject
}
// 不使用try catch将会无法执行到这里
console.log('after reject')
}
// 如果顶层异步函数之间资源有先后要求,可以使用await来保证执行顺序
async function Testall(){
await asyncFunction()
await undefinedFunction()
await awaitTestFunction()
// await pendingFunction()
await rejectFunction()
}
Testall()
1.4 手写代码实现async和await逻辑-待定
1.5 总结与注意事项
- 不能在全局作用域顶层使用await,将异步操作封装在async函数中然后再调用。
- async和await与Promise是相辅相成的,async相当于new Promse,await相当于.then方法,使用try...catch...相当于.catch方法
- async和await是语法糖,将异步执行的代码转变为同步执行(这是由于js单线程执行的特性)。
- async 函数返回 Promise:当一个函数使用 async 关键字定义时,它会自动返回一个 Promise,即使函数内部没有显式返回 Promise。
- await 等待异步操作完成:await 用于暂停 async 函数的执行,等待 Promise 解决(fulfilled),并返回其结果。
- 兼容同步值:await 不仅可以处理 Promise,如果跟随的是非 Promise 值,会被自动包装为 Promise.resolve(val)。
原文地址:https://blog.csdn.net/qq_33546823/article/details/142622783
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!