javaScript使用async定义异步函数配合await实现请求

async 关键字主要用于异步编程，在不同的编程语言中有不同的用法。这里主要介绍 JavaScript 中的 async 关键字的作用及其详细解析。

一、JavaScript 中的 async
在 JavaScript（尤其是 ES6+）中，async 关键字用于定义异步函数，其本质是返回一个 Promise 对象。配合 await 关键字，可以编写更易读的异步代码，避免传统 callback 嵌套或 .then() 链式调用导致的“回调地狱”。

1. 基本语法

async function fetchData() {
return “数据加载完成”;
}

fetchData().then(console.log); // 输出：数据加载完成
解析：

async 关键字使 fetchData 成为异步函数。
async 函数默认返回 Promise，即使显式返回的不是 Promise，JavaScript 也会自动封装成 Promise。
2. async 配合 await
await 关键字只能在 async 函数内部使用，它用于暂停函数执行，等待 Promise 解析完成后再继续。

async function fetchData() {
let result = await new Promise((resolve) => setTimeout(() => resolve(“数据加载完成”), 2000));
console.log(result);
}

fetchData();
解析：

await 让 fetchData 在 Promise 解析完成后才继续执行，而不会阻塞整个 JavaScript 线程（由于事件循环机制）。
setTimeout 模拟耗时操作，fetchData 需要等待 2 秒后再打印 “数据加载完成”。
3. 处理异常
在 async/await 代码中，可以使用 try…catch 处理异常，避免 Promise.catch() 方式的复杂性。

async function fetchData() {
try {
let result = await Promise.reject(“加载失败”);
console.log(result);
} catch (error) {
console.error(“发生错误：”, error);
}
}

fetchData();
解析：

Promise.reject(“加载失败”) 模拟请求失败的情况。
try…catch 捕获 await 语句中的异常，防止程序崩溃。
4. async 函数并行执行
如果 await 在循环中被滥用，可能会导致性能问题。例如：

async function sequentialRequests() {
await fetch(“https://api.example.com/data1”);
await fetch(“https://api.example.com/data2”);
}
问题：

fetch(“data1”) 结束后才执行 fetch(“data2”)，两者是串行执行，导致总耗时较长。
优化方式是并行执行：

async function parallelRequests() {
let [data1, data2] = await Promise.all([
fetch(“https://api.example.com/data1”),
fetch(“https://api.example.com/data2”),
]);
}
优化：

Promise.all() 让两个请求同时发出，减少整体等待时间，提高效率。