深入探讨JavaScript中的async函数

async函数

async函数的返回值为 promise 对象，promise对象的结果由async函数执行的返回值决定。async函数能使得异步操作变得更加方便，简而言之就是 Generator 的语法糖。

定义async函数，特点是即便函数内部返回结果不是promise对象，调用函数其最后的返回结果依然是promise对象，代码如下：

如果返回的结果不是 Promise 对象的情况下：

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

await 表达式

通过上文的对 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函数。

async使用形式

// 函数声明
async function foo() {}
 
// 函数表达式
const foo = async function () {};
 
// 对象的方法
let obj = { async foo() {} };
obj.foo().then(...)
 
// Class 的方法
class Storage {
  constructor() {
    this.cachePromise = caches.open('avatars');
  }
 
  async getAvatar(name) {
    const cache = await this.cachePromise;
    return cache.match(`/avatars/${name}.jpg`);
  }
}
 
const storage = new Storage();
storage.getAvatar('jake').then(…);
 
// 箭头函数
const foo = async () => {};

async读取文件

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

// 1.引入 fs 模块
const fs = require('fs')
 
// 2.读取文件
function index(){
    return new Promise((resolve,reject)=>{
        fs.readFile('./index.md',(err,data)=>{
            // 如果失败
            if(err) reject(err)
            // 如果成功
            resolve(data)
        })
    })
}
function index1(){
    return new Promise((resolve,reject)=>{
        fs.readFile('./index1.md',(err,data)=>{
            // 如果失败
            if(err) reject(err)
            // 如果成功
            resolve(data)
        })
    })
}
function index2(){
    return new Promise((resolve,reject)=>{
        fs.readFile('./index2.md',(err,data)=>{
            // 如果失败
            if(err) reject(err)
            // 如果成功
            resolve(data)
        })
    })
}
 
// 3.声明一个 async 函数
async function fn(){
    let i = await index()
    let i1 = await index1()
    let i2 = await index2()
    console.log(i.toString());
    console.log(i1.toString());
    console.log(i2.toString());
}
fn()

async发送AJAX请求

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

与生成器(Generator)相比

我们发现 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高级教程】

以上是深入探讨JavaScript中的async函数的详细内容。更多信息请关注PHP中文网其他相关文章！