位置: IT常识 - 正文
ES6+--》熟知JS中的async函数(js es6常用方法)
编辑：rootadmin目录
async函数
await 表达式
async使用形式
async读取文件
async发送AJAX请求
与生成器(Generator)相比
async函数
推荐整理分享ES6+--》熟知JS中的async函数(js es6常用方法)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:js中es6语法,js中es6语法,js的es6新特性,js中es6是什么,js中es6语法,js中es6语法,js中es6语法,js中es6是什么,内容如对您有帮助，希望把文章链接给更多的朋友！
async函数的返回值为 promise 对象，promise对象的结果由async函数执行的返回值决定。async函数能使得异步操作变得更加方便，简而言之就是 Generator 的语法糖。
定义async函数，特点是即便函数内部返回结果不是promise对象，调用函数其最后的返回结果依然是promise对象，代码如下：
如果返回的结果不是 Promise 对象的情况下：
<script> async function fn(){ // 返回的结果是字符串 // return '123' // // 返回的结果是undefined // return; // 返回的结果是抛出一个异常 throw new 'error' } const result = fn() console.log(result);</script>如果返回的结果是 Promise 对象时，我们正常使用 then 方法即可，如下：
<script> async function fn(){ return new Promise((resolve,reject)=>{ // resolve('成功的数据') reject('失败的数据') }) } const result = fn() // 调用 then 方法 result.then((value)=>{ console.log(value); },(reason)=>{ console.log(reason); // 打印失败的数据 })</script>await 表达式通过上文的对 async 介绍，感觉其功能有点鸡肋，其实恰恰不是，而是 async 需要搭配 await 一起使用才能达到语法糖的效果。
await的特点：
await必须写在 async 函数中
await右侧的表达式一般为 promise 对象
await返回的是 promise 成功的值
await的 promise 失败了，就会抛出异常，需要通过 try...catch捕获处理
说白了：await就相当于 then 方法的第一个回调函数，只返回成功的值，失败的值需要 try...catch来捕获。
async函数内部抛出错误，会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。
<script> const p = new Promise((resolve,reject)=>{ // resolve('用户数据') reject('用户加载数据失败了') }) async function fn(){ // 为防止promise是失败的状态，加上try...catch进行异常捕获 try { // await 返回的结果就是 promise 返回成功的值 let result = await p console.log(result); } catch (error) { console.log(error);//因为是失败的状态，所以打印：用户加载数据失败了 } } fn()</script>总结：
（1）await命令后面的Promise对象，运行结果可能是rejected，所以最好把await命令放在try...catch代码块中。
（2）如果有多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。
比如：await Promise.all([a(), b()])，这里简单提一下
（3）await命令只能用在async函数之中，如果用在普通函数，就会报错。
（4）(理解一下async的运行原理) async 函数可以保留运行堆栈，普通函数内部运行一个异步任务时，如果异步任务运行结束普通函数可能早就运行完了，异步任务的上下文环境已经消失了，如果异步任务报错，错误堆栈将不包括普通函数；而async函数内部的异步任务运行时，async函数是暂停执行的，所以一旦async函数内部的异步任务运行报错，错误堆栈将包括async函数。
async使用形式// 函数上一篇：【ChatGPT】AI 发展如此火热，程序员的发展呢？(发ai的英文单词)
下一篇：【简陋Web应用2】人脸检测——基于Flask和PaddleHub
![帝国CMS中[!--no.num--]标签的用法分析(帝国cms中英)](https://www.jiuchutong.com/image/20231126/1700989350.jpg)