如何在JavaScript中使用Async/Await调用API

在JavaScript中使用Async/AwAIt调用API 首先涉及对JavaScript异步编程的理解、async函数和await表达式的正确使用、以及错误处理机制的掌握。使用async/await可以有效简化异步操作的逻辑，提高代码的可读性和维护性。首先，通过声明一个async函数开始这个过程，该函数内部允许我们使用await关键字，用以等待一个异步操作（如API调用）的结果。其次，配合try...catch语句来捕获可能出现的异常，这样可以保证即使在遇到错误时，我们的程序也能够优雅地处理。

一、ASYNC/AWAIT 基础

在深入如何调用API之前，了解async/await的基本用法至关重要。async关键字用于声明一个函数是异步的，它会隐式地返回一个Promise对象。而await关键字则被用于等待一个Promise解决或拒绝。使用这两个关键字可以让异步代码的写法和理解变得更接近于同步代码。

常规函数转为异步函数

将常规函数转换为异步函数很简单，只需在函数声明前加上async关键字即可。异步函数中可以包含零个或多个await表达式，这些表达式后面跟的是返回Promise的函数调用。

async function fetchData() {
    // 函数逻辑
}

使用 Await 表达式等待 Promise

在异步函数内部，使用await关键字可以暂停函数的执行，等待Promise解决。当Promise解决后，函数会使用解决值继续执行。

async function fetchData() {
    const data = await someAsyncFunction();
}

二、调用 API

当我们谈到调用API时，我们通常指的是从Web服务请求数据，这通常通过HTTP请求实现。在JavaScript中，fetch API是执行此操作的现代工具，并且它返回一个Promise，这使它与async/await完美兼容。

使用 Fetch API

fetch函数用于发起网络请求，它接受一个URL参数，并返回一个Promise，代表请求的响应。

async function fetchData(url) {
    const response = await fetch(url);
    const data = await response.json();
    return data;
}

处理 Fetch 结果

使用fetch后，你获得了一个Response对象。在使用它之前，应当检查请求是否成功，并据此处理结果或抛出错误。

async function fetchData(url) {
    const response = await fetch(url);
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return data;
}

三、错误处理

使用async/await时，错误处理是一个不可或缺的方面，因为异步代码执行过程中可能会发生许多错误。

Try…Catch 语句

try...catch语句用于捕获异步函数中的错误。将可能抛出错误的代码放在try块中，一旦发生错误则执行catch块中的代码。

async function fetchData(url) {
    try {
        const response = await fetch(url);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error(`Could not fetch data: ${error}`);
    }
}

错误传播

在某些情况下，你可能想要将错误传播到异步函数的调用者，可以通过不在当前函数中捕获错误来实现。

async function fetchData(url) {
    const response = await fetch(url);
    const data = await response.json();
    return data;
}

四、使用 Async/Await 的最佳实践

虽然async/await使得代码更简洁，但也有一些最佳实践可以帮助我们更好地使用它们。

避免回调地狱

async/await的引入是为了解决回调地狱问题，应当尽量避免在异步函数中使用回调。这样有助于保持代码的清晰和一致性。

代码分离

将逻辑分解成小的、可测试的函数。这不仅有利于重用代码，而且还有利于单元测试。每个函数执行一个职责。

并发执行

在合适的情况下可以并发执行异步操作以提升效率。可以使用Promise.all来同时等待多个异步操作的完成。

async function fetchMultipleData(urls) {
    const promises = urls.map(url => fetch(url).then(r => r.json()));
    const results = await Promise.all(promises);
    return results;
}