JavaScript中的async函数怎么使用

本篇内容主要讲解“JavaScript中的async函数怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript中的async函数怎么使用”吧!async函数的返回值为 promise 对象，promise对象的结果由async函数执行的返回值决定。async函数能使得异步操作变得更加方便，简而言之就是 Generator 的语法糖。定义async函数，特点是即便函数内部返回结果不是promise对象，调用函数其最后的返回结果依然是promise对象，代码如下：如果返回的结果不是 Promise 对象的情况下：

如果返回的结果是 Promise 对象时，我们正常使用 then 方法即可，如下：

通过上文的对 async 介绍，感觉其功能有点鸡肋，其实恰恰不是，而是 async 需要搭配 await 一起使用才能达到语法糖的效果。await的特点：await必须写在 async 函数中await右侧的表达式一般为 promise 对象await返回的是 promise 成功的值await的 promise 失败了，就会抛出异常，需要通过 try…catch捕获处理说白了：await就相当于 then 方法的第一个回调函数，只返回成功的值，失败的值需要 try…catch来捕获。async函数内部抛出错误，会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到。

总结：（1）await命令后面的Promise对象，运行结果可能是rejected，所以最好把await命令放在try…catch代码块中。（2）如果有多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。比如：await Promise.all([a(), b()])，这里简单提一下（3）await命令只能用在async函数之中，如果用在普通函数，就会报错。（4）(理解一下async的运行原理) async 函数可以保留运行堆栈，普通函数内部运行一个异步任务时，如果异步任务运行结束普通函数可能早就运行完了，异步任务的上下文环境已经消失了，如果异步任务报错，错误堆栈将不包括普通函数；而async函数内部的异步任务运行时，async函数是暂停执行的，所以一旦async函数内部的异步任务运行报错，错误堆栈将包括async函数。

//函数声明
asyncfunctionfoo(){}

//函数表达式
constfoo=asyncfunction(){};

//对象的方法
letobj={asyncfoo(){}};
obj.foo().then(...)

//Class的方法
classStorage{
constructor(){
this.cachePromise=caches.open('avatars');
}

asyncgetAvatar(name){
constcache=awaitthis.cachePromise;
returncache.match(`/avatars/${name}.jpg`);
}
}

conststorage=newStorage();
storage.getAvatar('jake').then(…);

//箭头函数
constfoo=async()=>{};

和之前讲解的 promise 读取文件内容 一样，我们也可以使用async进行文件的读取，代码如下：

//1.引入fs模块
constfs=require('fs')

//2.读取文件
functionindex(){
returnnewPromise((resolve,reject)=>{
fs.readFile('./index.md',(err,data)=>{
//如果失败
if(err)reject(err)
//如果成功
resolve(data)
})
})
}
functionindex1(){
returnnewPromise((resolve,reject)=>{
fs.readFile('./index1.md',(err,data)=>{
//如果失败
if(err)reject(err)
//如果成功
resolve(data)
})
})
}
functionindex2(){
returnnewPromise((resolve,reject)=>{
fs.readFile('./index2.md',(err,data)=>{
//如果失败
if(err)reject(err)
//如果成功
resolve(data)
})
})
}

//3.声明一个async函数
asyncfunctionfn(){
leti=awaitindex()
leti1=awaitindex1()
leti2=awaitindex2()
console.log(i.toString());
console.log(i1.toString());
console.log(i2.toString());
}
免费云主机、域名fn()

和之前讲解 promise发送ajax请求 一样，我们也可以使用async进行发送ajax请求，代码如下：

我们发现 async与await之间的关系 和 Generator与yield之间的关系十分类似，不熟悉Generator的朋友可以看一下我之前的文章：生成器讲解 ；一比较就发现： async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await。代码比较如下：

async函数的实现原理就是将 Generator 函数和自动执行器包装在一个函数里。

我们可以分析一下 Generator 和 async 代码的书写特点和风格：

所以 async 函数的实现符合语义也很简洁，不用写Generator的自动执行器，改在语言底层提供，因此代码量少。从上文代码我们可以总结以下几点：（1）Generator函数执行需要借助执行器，而async函数自带执行器，即async不需要像生成器一样需要借助 next 方法才能执行，而是会自动执行。（2）相比于生成器函数，我们可以看到 async 函数的语义更加清晰（3）上面就说了，async函数可以接受Promise或者其他原始类型，而生成器函数yield命令后面只能是Promise对象或者Thunk函数。（4）async函数返回值只能是Promise对象，而生成器函数返回值是 Iterator 对象到此，相信大家对“JavaScript中的async函数怎么使用”有了更深的了解，不妨来实际操作一番吧！这里是云技术网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: html表格居中如何设置

本篇内容介绍了“html表格居中如何设置”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ 1.使用CSS样式表在HTML中创建表格后，使用CSS样式表可以轻松地将…