JS Fetch的用法|极客笔记

JS Fetch的用法

在前端开发中，经常需要与后端进行数据交互。而使用 JavaScript 的 fetch 函数能够轻松地发送 HTTP 请求来与服务器进行通信。本文将详细介绍 JS Fetch 的用法，包括发送 GET 和 POST 请求、处理响应、传递请求头和设置超时等。

一、发送 GET 请求

1. 基本用法

使用 fetch 函数发送 GET 请求非常简单，只需要传入请求的 URL 即可。下面是一个示例：

fetch('https://api.example.com/users')
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error(error);
    });

在这个示例中，我们发送了一个 GET 请求到 https://api.example.com/users 这个 URL。fetch 函数返回的是一个 Promise 对象，我们可以通过调用 .then() 方法来处理响应。在第一个 .then() 中，我们使用 response.json() 方法将响应数据解析为 JSON 格式。然后，我们在第二个 .then() 中使用解析后的数据。

2. 处理错误

在使用 fetch 函数发送请求时，可能会发生网络错误或服务器返回错误状态码。我们可以使用 .catch() 方法来捕获并处理这些错误。

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

在这个示例中，我们在第一个 .then() 中通过检查 response.ok 属性来判断是否发生了错误。如果 response.ok 为 false，则通过 throw 语句抛出一个自定义的错误。在第二个 .then() 中，我们仍然使用解析后的数据。

3. 传递参数

如果发送 GET 请求时需要传递参数，可以将参数拼接到 URL 后面。示例如下：

const params = {
    page: 1,
    limit: 10
};

const url = new URL('https://api.example.com/users');
url.search = new URLSearchParams(params).toString();

fetch(url)
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error(error);
    });

在这个示例中，我们定义了一个 params 对象，包含了两个参数 page 和 limit。然后，我们通过 URLSearchParams 对象将参数转换为 URL 查询字符串，并将其附加到 URL 后面。

二、发送 POST 请求

1. 基本用法

发送 POST 请求时，需要指定请求方法为 POST，并将请求数据作为 body 参数传递给 fetch 函数。下面是一个示例：

const data = {
    username: 'exampleuser',
    password: 'examplepassword'
};

fetch('https://api.example.com/login', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
})
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error(error);
    });

在这个示例中，我们发送了一个 POST 请求到 https://api.example.com/login 这个 URL。我们通过 method 参数指定请求方法为 POST，并设置请求头的 Content-Type 为 application/json。我们使用 JSON.stringify() 方法将请求数据转换为 JSON 字符串，并作为 body 参数传递给 fetch 函数。

2. 传递表单数据

如果需要发送表单数据，可以将请求头的 Content-Type 设置为 application/x-www-form-urlencoded。下面是一个示例：

const data = new URLSearchParams();
data.append('username', 'exampleuser');
data.append('password', 'examplepassword');

fetch('https://api.example.com/login', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: data
})
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error(error);
    });

在这个示例中，我们使用了 URLSearchParams 对象来存储表单数据，并将其作为 body 参数传递给 fetch 函数。

三、处理响应

1. JSON 响应

在上面的示例中，我们使用了 .json() 方法将响应数据解析为 JSON 格式。如果服务器返回的是 JSON 数据，可以直接使用此方法。但是，如果服务器返回的是其他类型的数据（如文本或二进制数据），则需要使用其他方法。示例代码如下：

fetch('https://api.example.com/users')
    .then(response => {
        if (!response.ok) {
            throw new Error('HTTP error, status = ' + response.status);
        }
        // 如果服务器返回的是 JSON 数据
        if (response.headers.get('content-type').includes('application/json')) {
            return response.json();
        }
        // 如果服务器返回的是文本数据
        if (response.headers.get('content-type').includes('text/plain')) {
            return response.text();
        }
        // 其他情况
        throw new Error('Unsupported content type');
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error(error);
    });

在这个示例中，我们在第一个 .then() 中检查响应的 content-type 头部字段，判断服务器返回的数据类型。根据不同的数据类型，我们可以使用不同的方法进行解析，如使用 .json() 方法将响应解析为 JSON 格式，使用 .text() 方法将响应解析为文本格式。

2. 处理响应头

fetch 函数返回的响应对象包含了许多有用的属性和方法，可以用来处理响应头。示例代码如下：

fetch('https://api.example.com/users')
    .then(response => {
        console.log(response.status); // 输出响应状态码
        console.log(response.statusText); // 输出响应状态文本
        console.log(response.headers.get('content-type')); // 输出 'content-type' 头部字段的值
        console.log(response.headers.get('date')); // 输出 'date' 头部字段的值
        console.log(response.url); // 输出响应的 URL
        console.log(response.redirected); // 输出是否发生了重定向
        console.log(response.type); // 输出响应的类型
        console.log(response.ok); // 输出响应是否成功
        return response.json();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error(error);
    });

在这个示例中，我们使用了一些响应对象的属性和方法，如 status 用于获取响应状态码，headers.get() 用于获取指定头部字段的值，url 用于获取响应的 URL 等。

四、传递请求头

如果需要在发送请求时传递特定的请求头，可以在 fetch 函数的第二个参数中指定 headers。示例如下：

fetch('https://api.example.com/users', {
    headers: {
        'Authorization': 'Bearer token123',
        'Content-Type': 'application/json'
    }
})
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error(error);
    });

在这个示例中，我们通过在 fetch 函数的第二个参数中指定 headers 对象来传递请求头。可以在 headers 对象中设置多个头部字段，并将其对应的值作为属性值。

五、设置超时

如果希望在请求超时时执行特定的操作，可以使用 AbortController 和 signal 属性。示例如下：

const controller = new AbortController();
const signal = controller.signal;

const timeout = setTimeout(() => {
    controller.abort();
    console.error('请求超时');
}, 5000); // 设置超时时间为5秒

fetch('https://api.example.com/users', { signal })
    .then(response => response.json())
    .then(data => {
        clearTimeout(timeout); // 清除超时计时器
        console.log(data);
    })
    .catch(error => {
        clearTimeout(timeout); // 清除超时计时器
        console.error(error);
    });

在这个示例中，我们创建了一个 AbortController 对象，然后通过 setTimeout 函数设置了超时时间为 5 秒。在超时时间到达后，我们调用 controller.abort() 方法来终止请求。同时，在 fetch 函数的第二个参数中设置了 signal 属性为 controller.signal，以便将中止信号传递给 fetch 函数。