在前端开发中，经常需要进行网络请求来获取数据。传统的方式是使用回调函数或者 Promise 进行异步编程。但是随着 ES8/ES2017 的发布，我们可以使用 async/await 来更加方便地进行异步编程，特别是在处理网络请求时，可以使代码更加简洁易读。本文将介绍如何使用 async/await 优化网络请求，并提供示例代码。
什么是 async/await？
async/await 是 ES8/ES2017 中新增的异步编程语法。它可以让异步代码看起来更像同步代码，使得代码可读性更高，同时也能够更加方便地处理异步操作中的错误。
async/await 的基本用法是在 async 函数中使用 await 关键字来等待异步操作完成。await 关键字会暂停 async 函数的执行，直到异步操作完成并返回结果。如果异步操作抛出异常，await 会把异常抛出到 async 函数的调用栈中，方便进行错误处理。
下面是一个简单的示例：
async function foo() {
const result = await Promise.resolve('hello');
console.log(result);
}
foo(); // 输出：'hello'如何使用 async/await 发送网络请求？
在使用 async/await 发送网络请求时，我们通常会使用 fetch 或者 axios 这样的库。fetch 是浏览器原生提供的发送网络请求的 API，而 axios 是一个基于 Promise 封装的网络请求库，可以在浏览器和 Node.js 中使用。
使用 fetch 发送 GET 请求，代码如下：
async function getUsers() {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const users = await response.json();
console.log(users);
}
getUsers(); // 输出从 API 获取到的用户列表使用 axios 发送 POST 请求，代码如下：
// javascriptcn.com 代码示例
async function createUser(user) {
try {
const response = await axios.post('https://jsonplaceholder.typicode.com/users', user);
console.log(response.data);
} catch (error) {
console.error(error);
}
}
createUser({ name: 'John Doe', email: 'john.doe@example.com' }); // 输出从 API 创建的用户信息如何处理多个网络请求？
在实际开发中，我们经常需要同时发送多个网络请求，并等待它们全部完成后再进行后续操作。在使用 Promise 时，我们可以使用 Promise.all 方法来实现这个功能。而在使用 async/await 时，我们可以使用 Promise.all 和 for...of 循环结合使用来实现同样的功能。
下面是一个使用 Promise.all 和 async/await 处理多个网络请求的示例：
// javascriptcn.com 代码示例
async function getUsers() {
const urls = [
'https://jsonplaceholder.typicode.com/users',
'https://jsonplaceholder.typicode.com/posts',
'https://jsonplaceholder.typicode.com/albums'
];
const responses = await Promise.all(urls.map(url => fetch(url)));
const results = await Promise.all(responses.map(response => response.json()));
console.log(results);
}
getUsers(); // 输出从三个 API 获取到的数据下面是一个使用 for...of 循环和 async/await 处理多个网络请求的示例：
// javascriptcn.com 代码示例
async function getUsers() {
const urls = [
'https://jsonplaceholder.typicode.com/users',
'https://jsonplaceholder.typicode.com/posts',
'https://jsonplaceholder.typicode.com/albums'
];
const results = [];
for (const url of urls) {
const response = await fetch(url);
const data = await response.json();
results.push(data);
}
console.log(results);
}
getUsers(); // 输出从三个 API 获取到的数据总结
使用 async/await 可以让我们更加方便地进行异步编程，特别是在处理网络请求时，可以使代码更加简洁易读。在实际开发中，我们可以使用 fetch 或者 axios 发送网络请求，并使用 Promise.all 和 for...of 循环结合使用来处理多个网络请求。希望本文能够对你理解和使用 async/await 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65607ce5d2f5e1655daaf760