封装网络请求：使用 Fetch API 返回 Promise 对象

在前端开发中，网络请求是非常常见的操作。随着技术的发展，我们有了更多的工具和库来简化这个过程。Fetch API 是现代浏览器提供的一个功能强大的网络请求工具，它返回一个 Promise 对象，使得异步操作更加方便。

Fetch API 的基本用法

Fetch API 的基本用法非常简单。下面是一个基本的示例：

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

在上面的代码中，我们使用了 fetch 函数来发送一个 GET 请求。fetch 函数返回一个 Promise 对象，我们可以使用 .then 方法来处理响应。在这个例子中，我们首先把响应转换为 JSON 格式，然后打印出数据。如果发生错误，我们使用 .catch 方法来捕获并处理错误。

封装 Fetch API

虽然 Fetch API 的基本用法很简单，但在实际应用中，我们可能需要对它进行一些封装，以便更好地满足我们的需求。下面是一个简单的 Fetch 封装示例：

function fetchData(url, method = 'GET', headers = {}, body = null) {
    return fetch(url, {
        method,
        headers,
        body: body ? JSON.stringify(body) : null
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    });
}

在上面的代码中，我们创建了一个名为 fetchData 的函数，它接受四个参数：url（请求的 URL）、method（请求方法，默认为 GET）、headers（请求头，默认为空对象）和 body（请求体，默认为 null）。这个函数返回一个 Promise 对象，它使用 fetch 函数发送请求，并处理响应。如果响应的状态码不是 200，我们抛出一个错误。否则，我们把响应转换为 JSON 格式并返回。

使用封装的 Fetch

现在我们可以使用封装的 fetchData 函数来发送网络请求了。下面是一个示例：

fetchData('https://api.example.com/data', 'POST', { 'Content-Type': 'application/json' }, { name: 'John', age: 30 })
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

在上面的代码中，我们使用 fetchData 函数发送了一个 POST 请求，并指定了请求头、请求体和 URL。然后，我们处理响应并打印出数据。如果发生错误，我们捕获并处理错误。

总结

通过封装 Fetch API，我们可以更方便地使用它发送网络请求，并返回 Promise 对象。这使得异步操作更加简洁、清晰，提高了代码的可读性和可维护性。希望本文能帮助你更好地理解和使用 Fetch API。