ES7 的 async 函数，用别样的方式让异步方法更简单易读-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，异步操作是非常常见的。虽然 JavaScript 提供了 Promise 及其链式调用的方式来解决异步编程的问题，但是在实际代码编写中，还是显得有些繁琐。而在 ES7 中，新增了 async 函数，进一步简化了异步编程的方式。

async 函数的概述

async 函数是一个新的语法糖，用于简化异步操作。它是一个能够自动将普通函数转化为 Promise 的特殊函数。 async 函数返回一个 Promise 对象，可以用 await 关键字来访问 Promise 的 resolve 值。async 函数应该总是返回一个 Promise 对象，无论其本身是否需要异步操作。

关于 async 函数的一些特点：

async 函数返回一个 Promise 对象
async 函数内部的异步操作会自动执行，并且等到异步操作执行完毕，才会执行 async 函数后续的代码
async 函数内部可以使用 await 关键字来等待异步操作完成，同时 await 关键字只能在 async 函数内部使用
async 函数内部的异步操作可以通过 try...catch 语句进行错误处理

async 函数的使用方法

定义一个 async 函数的语法如下：

async function functionName() {
    //code
}

同时，我们也可以使用函数表达式的形式来定义 async 函数：

let functionName = async function() {
    // code
};

简单看一下一个例子：

async function searchMusic(name) {
    let result = await fetch(`https://api.music.com/search?q=${name}`);
    let data = await result.json();
    return data;
}

这个函数使用了两次 await 关键字，它的作用是在 fetch 网络请求和 json 数据转换这两个异步操作完成之后，再进行下一步的操作。

调用这个函数时，我们可以使用 Promise 的链式调用或 async/await 关键字等方式来处理 Promise 值。下面展示 Promise 的链式调用方式：

searchMusic('fireworks').then(data => {
    console.log(data);
}).catch(error => {
    console.log(error);
});

下面是使用 async/await 的方式：

// javascriptcn.com 代码示例
async function getResult() {
    try {
        let result = await searchMusic('fireworks');
        console.log(result);
    } catch (err) {
        console.log(err);
    }
}
getResult();

async 函数的优点

代码更加简洁易读

由于 async 和 await 的使用方式，它们让代码更加易读和易于理解。相比于 Promise 的链式调用，使用 async 和 await 的方式可以避免大量的 then 和 catch 等语法。同时，使用 try...catch 可以很方便地处理异步操作中的错误。

屏蔽异步实现细节

async 函数可以将异步实现的细节封装在内部，可以让我们更加专注于业务逻辑的实现。相比于 Promise 的方式，我们不需要关注异步回调函数的参数处理、错误传递等问题，大大提高了开发效率。

更好的适配性

不同于 Promise 直接返回一个 Promise 对象，并依赖于 then 和 catch 方法来处理 Promise 的状态变化，async 函数更为通用。在 Node.js 和浏览器环境下均可使用，同时具有更高的语法兼容性。

总结

ES7 中新增的 async 函数使得异步操作代码更加简洁、易读和易于维护。async 函数的使用方式和 Promise 链式调用类似，但是它把更多的异步实现细节封装在函数内部，提高了代码的可读性和可维护性。同时，async 函数的使用更加通用，适用于 Node.js 和浏览器等不同的环境，更加便于项目开发。

参考代码：

// javascriptcn.com 代码示例
async function searchMusic(name) {
    let result = await fetch(`https://api.music.com/search?q=${name}`);
    let data = await result.json();
    return data;
}

searchMusic('firework').then(data => {
    console.log(data);
}).catch(err => {
    console.log(err);
});

async function getResult() {
    try {
        let result = await searchMusic('firework');
        console.log(result);
    } catch (err) {
        console.log(err);
    }
}
getResult();

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652b711e7d4982a6ebd569f0