JavaScript Fetch API 教程：处理异步请求、超时和错误

在 JavaScript 中，fetch API 是一个强大的工具，用于发出网络请求并处理响应。本教程将引导您了解如何使用 fetch API 处理异步请求、不同类型的响应、设置超时和实现错误处理逻辑。

1. 发出异步 GET 请求并处理响应

以下示例演示如何使用 fetch 函数发出异步 GET 请求，并根据响应类型处理数据：javascriptconst url = 'https://api.example.com/data';const headers = { 'Content-Type': 'application/json'};

fetch(url, { method: 'GET', headers: headers,}) .then(response => { if (response.ok) { // 处理文本响应 return response.text(); // 处理二进制数据响应 // return response.blob(); } else { throw new Error('Error: ' + response.status); } }) .then(data => { console.log(data); // 如果是文本响应，则打印文本内容 // 如果是二进制数据响应，则可以进行进一步处理，例如下载文件 }) .catch(error => console.log(error));

在这个例子中：

我们使用 fetch 函数发出一个 GET 请求到指定的 URL，并设置了请求头。- response.ok 属性用于检查响应状态码是否在 200-299 范围内，如果是，则表示请求成功。- 根据响应类型，我们可以使用 response.text() 获取文本内容，或使用 response.blob() 获取二进制数据。- 如果请求失败，我们会抛出一个错误，并在 .catch 块中捕获。

2. 设置请求超时和错误处理

以下示例演示如何设置请求超时，并在超时或发生错误时进行处理：javascriptconst url = 'https://api.example.com/data';const timeout = 5000; // 设置超时时间为 5 秒

const timeoutPromise = new Promise((resolve, reject) => { setTimeout(() => reject(new Error('Request timed out')), timeout);});

const dataPromise = fetch(url) .then(response => { if (response.ok) { return response.json(); } else { throw new Error('Error: ' + response.status); } });

Promise.race([timeoutPromise, dataPromise]) .then(data => console.log(data)) .catch(error => console.log(error));

在这个例子中：

我们使用 setTimeout 创建一个在指定时间后 rejected 的 Promise，作为超时处理。- Promise.race 方法用于竞争超时 Promise 和数据获取 Promise，哪个先完成就返回哪个结果。- 如果请求在超时时间内完成，则 dataPromise 会先完成，返回数据。- 如果请求超时，则 timeoutPromise 会先完成，抛出一个超时错误。

总结

fetch API 是一个非常实用的工具，可以方便地进行网络请求。通过学习如何处理异步请求、不同类型的响应、设置超时和错误处理，您可以更好地控制您的网络请求，并构建更健壮的 Web 应用程序。

请记住，以上代码示例仅供参考，您需要根据实际需求修改 URL、请求头、请求方法、超时时间和响应处理逻辑。