html5开发app人教版优化设计电子书
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)。