Fetch 发送 GET 请求-JavaScript中文网-JavaScript教程资源分享门户

使用 Fetch API 发送 GET 请求是一种常见的网络请求方式。本章节将详细介绍如何使用 Fetch API 来发送 GET 请求，并展示一些实际应用中的例子。

基础 GET 请求

发送一个基础的 GET 请求非常简单。你需要做的只是调用 fetch() 方法并传入相应的 URL。Fetch API 返回一个 Promise，该 Promise 在请求成功时解析为响应对象。以下是一个简单的示例：

// www.javascriptcn.com code example
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('There has been a problem with your fetch operation:', error));

上述代码首先调用 fetch() 函数来发起一个 GET 请求到指定的 URL。然后，通过 .then() 方法处理响应对象。如果响应状态不是 OK（例如，404 或 500），则会抛出一个错误。最后，我们使用 .json() 方法将响应体解析为 JSON 格式，并打印结果。如果有任何错误发生，则会捕获并打印到控制台。

设置请求头

有时，你可能需要设置自定义的 HTTP 头信息。例如，为了验证身份或传递额外的元数据，你可以通过第二个参数传递一个配置对象。以下是如何设置请求头的例子：

// www.javascriptcn.com code example
fetch('https://api.example.com/data', {
    method: 'GET',
    headers: {
        'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
        'Content-Type': 'application/json'
    }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

在这个例子中，我们设置了 Authorization 和 Content-Type 头信息。注意，对于 GET 请求，method 应该被明确设置为 'GET'，尽管这是默认值。

使用查询字符串

在某些情况下，你可能希望在 URL 中添加查询字符串来过滤或排序数据。Fetch API 可以很容易地处理这种情况。只需在 URL 后面添加查询字符串即可：

const url = 'https://api.example.com/data?sort=asc&limit=10';
fetch(url)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

这个例子展示了如何通过 URL 直接添加查询参数。这些参数将作为 GET 请求的一部分发送给服务器。

处理跨域请求

当你的前端应用和服务端 API 不在同一域名下时，你可能会遇到跨域资源共享 (CORS) 的问题。为了确保跨域请求能够正常工作，服务器端需要正确配置 CORS 头信息。从客户端的角度来看，处理跨域请求与普通的 GET 请求几乎相同：

fetch('https://api.otherdomain.com/data', {
    method: 'GET',
    mode: 'cors' // 确保使用 CORS 模式
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

在此示例中，mode: 'cors' 参数告诉浏览器允许进行跨域请求。请注意，服务器端也需要支持和正确配置 CORS。

错误处理

虽然 Fetch API 提供了强大的功能，但错误处理是不可忽视的一部分。由于网络请求总是存在失败的可能性，因此应该始终包含适当的错误处理逻辑。除了检查响应状态外，还可以捕获其他类型的错误，如网络超时或 DNS 解析失败：

// www.javascriptcn.com code example
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 => {
        if (error.name === 'AbortError') {
            console.log('Request aborted.');
        } else {
            console.error('Fetch Error:', error);
        }
    });

此示例展示了如何根据错误类型输出不同的消息。这对于调试和提供用户友好的错误信息非常有用。

通过以上介绍，你应该对如何使用 Fetch API 发送 GET 请求有了全面的了解。无论是基本的 GET 请求还是更复杂的场景，Fetch API 都提供了足够的灵活性和功能来满足需求。