前端如何用 ES7 async/await 优雅地处理异步请求-JavaScript中文网-JavaScript教程资源分享门户

前端开发中，异步请求是经常会遇到的事情。从最早的回调函数，到 Promise，再到最新的 async/await，前端处理异步请求的方式也逐渐递进。在这篇文章中，我们将学习最新的语言特性 async/await，并如何在项目中使用它进行优雅的异步处理。

什么是异步？

在 JavaScript 中，每个线程只有一个执行的事件循环 (Event Loop)，它负责接收事件并将它们排队放在一个调用栈中。调用栈中的每条指令都被视为同步的，并且每个指令都必须在它之前的指令执行完毕后再执行。而异步则是指一些在指令执行完毕之前并不立即执行的操作。

常见的异步操作包括读取远程数据，向服务器发起请求等等。在这些操作中，我们并不能确定响应时间的长短，因此需要使用异步机制使得 JavaScript 可以继续执行其他的指令。

Promise

为了更好地处理异步操作，ES6 引入了 Promise。它是一个对象，代表一个异步操作最终的完成 (或失败) 并返回给一个值。Promise 提供了 then 方法，使得我们可以对异步操作的结果进行处理。

例如，我们可以写一个 Promise 实现一个异步任务：

// javascriptcn.com 代码示例
function asyncTask() {
    return new Promise((resolve, reject) => {
        // 一些异步操作
        setTimeout(() => {
            const result = Math.random();
            if (result > 0.5) {
                resolve(result);
            } else {
                reject(result);
            }
        }, 1000);
    });
}

在 asyncTask 函数中，我们使用 Promise 对象实现了一个异步任务，调用了 setTimeout 方法在 1s 后返回一个随机数。如果随机数大于 0.5 ，则使用 resolve 方法返回结果，否则则使用 reject 方法拒绝异步任务。

我们可以使用 .then() 和 .catch() 处理结果或错误：

asyncTask()
    .then(result => console.log('成功：', result))
    .catch(error => console.log('失败：', error));

Promise 的方法是链式调用的，后面的方法会在前面的方法返回的 Promise 异步执行结束后执行，从而实现了对异步操作结果的处理。

然而，Promise 在解决回调地狱的情况下，then 和 catch 的多次嵌套会使得代码变得很复杂、难以维护。另外，Promise 中错误处理的实现方法也不是很优雅。因此 ES7 引入了 async/await 语法，使得异步操作的使用更加方便、简洁。

async/await

使用 async/await 语法，前端代码可以像同步代码一样清晰和简单。async/await 是基于 Promise 实现的，它让我们可以用同步方式编写异步代码。

async 告诉 JavaScript 该函数是异步的，await 则把异步操作包装在其中，等待异步操作完成。

下面是一个使用 async/await 实现异步任务的例子：

// javascriptcn.com 代码示例
async function asyncTask() {
    const result = await new Promise((resolve, reject) => {
        // 一些异步操作
        setTimeout(() => {
            const value = Math.random();
            if (value > 0.5) {
                resolve(value);
            } else {
                reject(value);
            }
        }, 1000);
    });
    return result;
}

在 asyncTask 函数中，使用 await 等待异步操作完成。如果操作成功完成，则将结果返回，否则将抛出错误。我们可以使用 try/catch 来处理错误：

// javascriptcn.com 代码示例
async function asyncTask() {
    try {
        const result = await new Promise((resolve, reject) => {
            // 一些异步操作
            setTimeout(() => {
                const value = Math.random();
                if (value > 0.5) {
                    resolve(value);
                } else {
                    reject(value);
                }
            }, 1000);
        });
        return result;
    } catch (error) {
        console.log('出错啦：', error);
    }
}

在上面的例子中，async/await 和 Promise 执行的效果是相同的，只是代码更加简洁清晰，使得代码结构更加符合语义化。代码呈现出同步执行的样式，但是在底层仍然是异步的。

使用 async/await 优雅地处理异步请求

在实际开发中，我们会遇到很多需要异步请求的场景，比如请求数据、上传文件、和其他服务端的交互等等。下面，我们将看到一个使用 async/await 优雅地处理异步请求的实例：

// javascriptcn.com 代码示例
async function getData() {
    try {
        const url = 'https://api.myjson.com/bins/k9i31';
        const response = await fetch(url);
        if (response.ok) {
            const result = await response.json();
            console.log(result);
        } else {
            throw new Error('获取数据失败！');
        }
    } catch (error) {
        console.log('出错啦：', error);
    }
}

getData();

在 getData 函数中，我们使用 async/await 编写异步操作，获取数据并对它进行处理。使用 await 等待网络请求返回的结果，然后使用 json() 方法解析 JSON 格式的响应。

除了 fetch，我们也可以使用 axios 或其他的 HTTP 客户端库来实现异步请求。

总结

在本文中，我们学习了如何使用 async/await 优雅地处理异步请求。使用 async/await，我们可以像同步代码一样清晰和简单地编写异步代码，同时减少对 Promise 处理的复杂性。

async/await 语法能够让我们更高效地利用 JavaScript 异步机制，提高代码的可读性和可维护性。当然，为了保证代码的可靠性，我们也需要处理错误和异常情况，以确保代码的稳定性。

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