如何在 vanilla JS 中使用 Fetch API

迷南。 2023-10-01 16:58 7阅读 0赞

Fetch API 用于发出 Ajax 请求，例如调用 API 或从服务器获取远程资源或 HTML 文件。

过去，我一直*非常*直言[我更喜欢 XHR 而不是 Fetch][XHR _ Fetch]。我错了。Fetch 客观上更胜一筹。它用更简单的语法完成了我需要的一切。

让我们看看它是如何工作的。

### 基本 Fetch API 语法[\#][Link 1] ###

对于今天的文章，我们将使用[JSON 占位符][JSON]来发出真正的 API 请求。

假设您想使用`https://jsonplaceholder.typicode.com/posts`端点从 API 获取帖子列表。`fetch()`首先，您将其作为参数传递给方法。

fetch('https://jsonplaceholder.typicode.com/posts');

昨天，我们查看[了 JavaScript 中的 Promises][JavaScript _ Promises]。

该`fetch()`方法返回一个 Promise。我们可以使用`then()`和处理 API 响应`catch()`。让我们将响应记录到控制台。

fetch('https://jsonplaceholder.typicode.com/posts').then(function (response) {
    	// The API call was successful!
    	console.log('success!', response);
    }).catch(function (err) {
    	// There was an error
    	console.warn('Something went wrong.', err);
    });

[这是一个演示。][Link 2]

如果您查看控制台中的响应，您会注意到JSON`response.body` *不可用。*这是一种叫做 a 的东西`ReadableStream`。

Fetch API 使用流。要将我们的 API 数据作为 JSON 对象获取，我们可以使用 Fetch API 的原生方法：`json()`. 我们将在我们的`response`对象上调用它，并返回它的值。

然后，我们可以在链式`then()`方法中使用实际的响应 JSON。

fetch('https://jsonplaceholder.typicode.com/posts').then(function (response) {
    	// The API call was successful!
    	return response.json();
    }).then(function (data) {
    	// This is the JSON from our response
    	console.log(data);
    }).catch(function (err) {
    	// There was an error
    	console.warn('Something went wrong.', err);
    });

[json()这是 Fetch方法的演示。][json_ Fetch]

### 使用 Fetch API 处理错误[\#][Link 3] ###

`catch()`因为它返回一个 Promise，所以 Fetch API 使用该方法处理错误。

`catch()`但是，Promise 仅在请求无法解决时才会拒绝并触发该方法。如果服务器有响应，即使是错误`404`或`500`错误，这些`then()`方法仍然会运行。

例如，在下面的这个请求中，我拼错`/posts`为`postses`，导致`404`.

fetch('https://jsonplaceholder.typicode.com/postses').then(function (response) {
    	// The API call was successful!
    	return response.json();
    }).then(function (data) {
    	// This is the JSON from our response
    	console.log(data);
    }).catch(function (err) {
    	// There was an error
    	console.warn('Something went wrong.', err);
    });

[这是一个演示。][Link 4]请注意，记录了一个空的 JSON 对象，并且我们的警告不会显示在控制台中。

#### 如何使用 Fetch API 正确处理错误代码[\#][Link 5] ####

为了“修复”这种行为，我们可以使用Fetch Promise 返回的`ok`属性。`response`

如果`response.ok`属性是`true`，我们将返回`response.json()`。如果没有，我们将返回一个被拒绝的 Promise 对象，传入`response`, 来触发我们的`catch()`方法。

fetch('https://jsonplaceholder.typicode.com/postses').then(function (response) {
    	// The API call was successful!
    	if (response.ok) {
    		return response.json();
    	} else {
    		return Promise.reject(response);
    	}
    }).then(function (data) {
    	// This is the JSON from our response
    	console.log(data);
    }).catch(function (err) {
    	// There was an error
    	console.warn('Something went wrong.', err);
    });

[这是一个具有更好错误处理的 Fetch 请求的演示。][Fetch]

#### XHR 也这样做[\#][Link 6] ####

这种行为曾经*真的很*困扰我。[这是我关于为什么 XHR 实际上更好的主要论点之一。][XHR]

但这就是我完全、完全、愚蠢地错误的地方：XHR 也这样做。

`onreadystatechange`无论响应成功还是失败，XHR处理程序都会运行。在使用它之前，您仍然需要检查响应是否介于`200`和`300`范围之间。

// Setup our listener to process compeleted requests
    xhr.onreadystatechange = function () {
    
    	// Only run if the request is complete
    	if (xhr.readyState !== 4) return;
    
    	// Process our return data
    	if (xhr.status >= 200 && xhr.status < 300) {
    		// What do when the request is successful
    		console.log('success', JSON.parse(xhr.responseText));
    	} else {
    		// What to do when the request has failed
    		console.log('error', xhr);
    	}
    
    };

现在来看，Fetch API 方法要干净得多。

### 发出其他请求类型[\#][Link 7] ###

默认情况下，Fetch API 会发出`GET`请求。假设您想`POST`通过 API 发出发布新文章的请求。

该`fetch()`方法接受第二个参数，您可以使用它来传递选项对象。其中之一是`method`。

fetch('https://jsonplaceholder.typicode.com/posts', {
    	method: 'POST'
    }).then(function (response) {
    	// The API call was successful!
    	if (response.ok) {
    		return response.json();
    	} else {
    		return Promise.reject(response);
    	}
    }).then(function (data) {
    	// This is the JSON from our response
    	console.log(data);
    }).catch(function (err) {
    	// There was an error
    	console.warn('Something went wrong.', err);
    });

对于某些类型的请求，您可能还需要随请求一起传递数据。您可以使用`body`选项对象上的属性来执行此操作。

这通常是一个字符串，但如果您正在执行诸如使用 JavaScript 提交表单之类的操作，它也可以是[一个FormData对象。][FormData]

fetch('https://jsonplaceholder.typicode.com/posts', {
    	method: 'POST',
    	body: 'title=' + encodeURIComponent('My awesome new article') + '&body=' + encodeURIComponent('This is the text of my article')
    }).then(function (response) {
    	// The API call was successful!
    	if (response.ok) {
    		return response.json();
    	} else {
    		return Promise.reject(response);
    	}
    }).then(function (data) {
    	// This is the JSON from our response
    	console.log(data);
    }).catch(function (err) {
    	// There was an error
    	console.warn('Something went wrong.', err);
    });

[POST这是一个使用 Fetch API的请求演示。][POST_ Fetch API]

### 使用 Fetch API 设置标头[\#][Link 8] ###

您可能需要做的另一件事是为您的请求设置标头和其他属性。这也可以通过选项对象来完成。

fetch('https://jsonplaceholder.typicode.com/posts', {
    	method: 'POST',
    	body: 'title=' + encodeURIComponent('My awesome new article') + '&body=' + encodeURIComponent('This is the text of my article'),
    	headers: {
    		'Content-Type': 'application/json'
    	},
    	referrer: 'no-referrer'
    }).then(function (response) {
    	// The API call was successful!
    	if (response.ok) {
    		return response.json();
    	} else {
    		return Promise.reject(response);
    	}
    }).then(function (data) {
    	// This is the JSON from our response
    	console.log(data);
    }).catch(function (err) {
    	// There was an error
    	console.warn('Something went wrong.', err);
    });

您可以[在 Mozilla Developer Network 上查看选项和值的完整列表][Mozilla Developer Network]。

### 浏览器兼容性[\#][Link 9] ###

Fetch API 适用于所有现代浏览器，包括 Edge，但不支持 IE。它适用于较新的移动浏览器，但可能不适用于较旧的移动浏览器（人们通常不更新手机上的操作系统）。

使用时应该[包含 Fetch polyfill][Fetch polyfill]。它还需要一个用于 Promises 的 polyfill。[Taylor Hakes][]的这一款非常好。

如果您更喜欢使用[polyfill.io][]，它默认包含 Promises，但*不*包含 Fetch API。您应该使用该`features`标志来包含它。

https://polyfill.io/v3/polyfill.min.js?features=default%2Cfetch

[XHR _ Fetch]: https://gomakethings.com/why-i-still-use-xhr-instead-of-the-fetch-api/
[Link 1]: https://gomakethings.com/how-to-use-the-fetch-api-with-vanilla-js/#the-basic-fetch-api-syntax
[JSON]: https://jsonplaceholder.typicode.com/
[JavaScript _ Promises]: https://gomakethings.com/promises-in-javascript/
[Link 2]: https://codepen.io/cferdinandi/pen/vYBRdaQ
[json_ Fetch]: https://codepen.io/cferdinandi/pen/RwbMQev
[Link 3]: https://gomakethings.com/how-to-use-the-fetch-api-with-vanilla-js/#error-handling-with-the-fetch-api
[Link 4]: https://codepen.io/cferdinandi/pen/dybmmPw
[Link 5]: https://gomakethings.com/how-to-use-the-fetch-api-with-vanilla-js/#how-to-properly-handle-error-codes-with-the-fetch-api
[Fetch]: https://codepen.io/cferdinandi/pen/MWgVVXG
[Link 6]: https://gomakethings.com/how-to-use-the-fetch-api-with-vanilla-js/#xhr-does-this-too
[XHR]: https://gomakethings.com/why-i-still-use-xhr-instead-of-the-fetch-api/#the-fetch-api-is-a-failed-promise
[Link 7]: https://gomakethings.com/how-to-use-the-fetch-api-with-vanilla-js/#making-other-request-types
[FormData]: https://developer.mozilla.org/en-US/docs/Web/API/FormData
[POST_ Fetch API]: https://codepen.io/cferdinandi/pen/oNvqdWx
[Link 8]: https://gomakethings.com/how-to-use-the-fetch-api-with-vanilla-js/#setting-headers-with-the-fetch-api
[Mozilla Developer Network]: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters
[Link 9]: https://gomakethings.com/how-to-use-the-fetch-api-with-vanilla-js/#browser-compatibility
[Fetch polyfill]: https://github.com/github/fetch
[Taylor Hakes]: https://github.com/taylorhakes/promise-polyfill
[polyfill.io]: https://polyfill.io/