如何使用 Fetch API 在 JavaScript 中进行网络请求？

在JavaScript中，fetch 是一个用于进行网络请求的现代API，它提供了一种简单、灵活且功能强大的方法来获取资源，本文将详细介绍fetch 的使用，包括基本用法、常见选项以及如何处理响应。

Fetch 基本用法

fetch 函数返回一个 Promise，这使得它非常适合用于异步操作，其基本语法如下：

fetch(url, options)
    .then(response => response.json()) // 解析 JSON 响应体
    .then(data => console.log(data))   // 处理数据
    .catch(error => console.error('Error:', error));

参数详解

url: 请求的目标URL。

options: 一个可选的配置对象，包含以下属性：

method: 请求方法（如 ‘GET’, ‘POST’ 等）。

headers: 一个 Headers 对象，用于设置请求头。

body: 请求主体，通常用于 POST 请求。

mode: 请求的模式，如 ‘cors’, ‘no-cors’, ‘same-origin’ 等。

credentials: 指定是否发送凭证，如 ‘include’, ‘omit’。

redirect: 重定向模式，如 ‘follow’, ‘manual’, ‘error’。

referrer: HTTP 头部的 referrer 字段。

referrerPolicy: 控制 referrer 字段的值。

integrity: 用于 Subresource Integrity (SRI)，验证资源的完整性。

cache: 缓存模式，如 ‘default’, ‘no-store’, ‘reload’, ‘force-cache’, ‘only-if-cached’。

agent: 自定义代理设置。

signal: 用于中止请求的 AbortSignal 实例。

示例代码

以下是一些常见的fetch 使用示例：

GET 请求

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Fetch error:', error));

POST 请求

const postData = { key1: 'value1', key2: 'value2' };
fetch('https://api.example.com/post', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(postData)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Fetch error:', error));

带凭证的请求

fetch('https://api.example.com/secure-data', {
    credentials: 'include'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Fetch error:', error));

处理不同响应状态

fetch 不会自动抛出 HTTP 错误状态，你可以通过检查response.ok 属性来确定响应是否成功：

fetch('https://api.example.com/resource')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Fetch error:', error));

取消请求

你可以使用AbortController 来取消 fetch 请求：

const controller = new AbortController();
const signal = controller.signal;
fetch('https://api.example.com/long-request', { signal })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => {
        if (error.name === 'AbortError') {
            console.log('Fetch aborted');
        } else {
            console.error('Fetch error:', error);
        }
    });
// 取消请求
controller.abort();

FAQs

Q1: fetch 如何默认处理 HTTP 错误状态？

A1:fetch 默认不会拒绝 Promise，即使响应是 404 或 500，你需要手动检查response.ok 属性并抛出错误来处理这些情况。

fetch('https://api.example.com/non-existent')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Fetch error:', error));

Q2: 如何在 fetch 请求中添加自定义头部？

A2: 你可以使用headers 选项来添加自定义头部，以下是一个示例：

fetch('https://api.example.com/data', {
    method: 'GET',
    headers: {
        'Custom-Header': 'value',
        'Another-Header': 'anotherValue'
    }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Fetch error:', error));

小编有话说

fetch API 提供了一种强大而灵活的方法来进行网络请求，但它也有一些需要注意的地方，默认情况下它不会拒绝 Promise，因此你需要手动检查响应状态，对于复杂的请求，如带有凭证的请求或需要取消的请求，你可能需要使用更多的配置选项，希望本文能帮助你更好地理解和使用fetch，让你的网络请求更加高效和可靠。