【Fetch 】深度剖析 JavaScript Fetch API

概览

在Web开发中，经常需要与服务器进行数据交互，而 Fetch API 是一种基于 Promise 的现代API，用于在网络中发送和接收请求。笔者将深入介绍 Fetch API 的工作原理，从网络请求到响应数据的处理，探索其在 Web 开发中的实际应用。

（1）什么是 Fetch API

Fetch API 是一种 JavaScript API，允许我们发送网络请求，并在接收响应后进行处理。它可以用于向服务器请求数据，上传数据或发送其他类型的请求。与 XMLHTTPRequest 相比，Fetch API 具有以下特点：

更简洁的 API：只需要一个函数就可以完成网络请求。

基于 Promise：支持更直观的异步编程。

内置 Request 和 Response 类：方便进行请求和响应的处理。

支持跨域请求：允许在不同域名之间进行数据交互。

在实际开发中，Fetch API 已经成为了前端开发的重要组成部分，被广泛应用于 Web 应用程序的开发中。

（2）发送网络请求

要发送网络请求，首先需要创建一个 Request 对象，用于描述我们要发送的请求。Request 对象包含了请求的 URL、请求方法和请求头等信息。

const request = new Request('https://example.com/data.json', {

	method: 'GET',
	
	headers: new Headers({
	
	'Content-Type': 'application/json'
	
	})

});

在创建 Request 对象时，可以指定请求的 URL 和选项，如请求方法、请求头、请求体等。以上面的代码为例，我们创建了一个 GET 请求，请求的 URL 是 https://example.com/data.json，并且指定了请求头的 Content-Type 为 application/json。

接下来，我们可以使用 fetch() 方法发送请求，并获取响应。fetch() 方法接收一个 Request 对象作为参数，并返回一个 Promise 对象。一旦 Promise 对象被解决，我们就可以从 Response 对象中获取服务器返回的数据。

fetch(request)

	.then(response => response.json())
	
	.then(data => console.log(data))
	
	.catch(error => console.error(error));

在上面的代码中，我们使用 fetch() 方法发送请求，并通过 then() 方法处理响应数据。如果服务器返回的数据是 JSON 格式，我们可以使用 response.json() 方法将其转换为 JavaScript 对象。如果出现错误，我们可以通过 catch() 方法处理错误。

（3）处理响应数据

一旦我们收到了服务器的响应，就可以从 Response 对象中获取响应数据。Response 对象包含了响应的状态码、响应头和响应体等信息。可以使用以下方法从 Response 对象中获取这些信息：

response.status：获取响应状态码。

response.statusText：获取响应状态文本。

response.headers：获取响应头。

response.text()：获取响应体，返回一个 Promise 对象，可以使用 then() 方法处理响应数据

response.json()：获取 JSON 格式的响应体，返回一个 Promise 对象，可以使用 then() 方法处理响应数据。

response.blob()：获取二进制格式的响应体，返回一个 Promise 对象，可以使用 then() 方法处理响应数据。

response.arrayBuffer()：获取 ArrayBuffer 格式的响应体，返回一个 Promise 对象，可以使用 then() 方法处理响应数据。

例如，如果服务器返回的是一个 JSON 格式的响应，我们可以使用 response.json() 方法将其转换为 JavaScript 对象，并在 then() 方法中处理响应数据：

fetch('https://example.com/data.json')

	.then(response => response.json())
	
	.then(data => console.log(data))
	
	.catch(error => console.error(error));

如果我们需要处理响应头的信息，可以使用 response.headers 方法。response.headers 返回一个 Headers 对象，我们可以通过 get() 方法获取指定的响应头：

fetch('https://example.com/data.json')

	.then(response => {
		
		const contentType = response.headers.get('content-type');
		
		console.log(contentType);
		
		return response.json();
	
	})

	.then(data => console.log(data))
	
	.catch(error => console.error(error));

如果我们需要处理二进制数据或者 ArrayBuffer 数据，可以使用 response.blob() 或者 response.arrayBuffer() 方法：

fetch('https://example.com/image.jpg')

	.then(response => response.blob())
	
	.then(blob => {
	
	const url = URL.createObjectURL(blob);
	
	const img = document.createElement('img');
	
	img.src = url;
	
	document.body.appendChild(img);

})

.catch(error => console.error(error));

（4）发送 POST 请求

除了发送 GET 请求，我们还可以使用 Fetch API 发送 POST 请求。发送 POST 请求时，需要指定请求头的 Content-Type 为 application/x-www-form-urlencoded 或者 multipart/form-data，同时将请求数据放在请求体中。

const data = new FormData();
data.append('name', '张三');
data.append('age', 18);

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

在上面的代码中，我们通过 FormData 对象创建了一些请求数据，并将其放在请求体中。在请求头中，我们指定了 Content-Type 为 application/x-www-form-urlencoded，然后使用 URLSearchParams 对象将请求数据进行编码。

（5）处理错误和超时

在实际开发中，网络请求往往会出现各种错误，比如服务器响应错误、网络错误、超时等。为了确保我们的应用程序具有良好的健壮性，我们需要对这些错误进行处理。

Fetch API 提供了 catch() 方法来捕获网络请求中出现的错误。如果请求失败，catch() 方法将会被调用，并接收一个 Error 对象作为参数。

fetch('https://example.com/data.json')

	.then(response => response.json())
	
	.then(data => console.log(data))
	
	.catch(error => console.error(error));

如果请求超时，我们可以使用 AbortController API 来取消请求。AbortController API 是一个比较新的 API，它提供了一个 AbortController 对象和一个 AbortSignal 对象。

AbortController 对象可以用来取消 Fetch 请求，它的 signal 属性指向一个 AbortSignal 对象。AbortSignal 对象可以用来检测 Fetch 请求是否已经被取消，从而停止处理响应数据。

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

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

setTimeout(() => {
	controller.abort();
}, 5000);

在上面的代码中，我们使用 AbortController API 来创建一个 AbortController 对象，并将其 signal 属性传递给 Fetch 请求的 signal 参数中。然后，我们使用 setTimeout() 函数在 5 秒后调用 abort() 方法来取消请求。

（6）处理跨域请求

Fetch API 默认情况下不允许跨域请求，也就是说，如果我们使用 Fetch API 发送请求到另一个域名，那么会出现跨域问题。

跨域问题是由于浏览器的同源策略所引起的。同源策略是浏览器的一个安全特性，它要求所有的 Web 应用程序在加载资源时都必须遵循同一个原则：协议、主机和端口号必须相同。

解决跨域问题有多种方式，最常用的方式是使用 CORS（跨域资源共享）协议。CORS 允许服务器在响应头中添加一些特殊的 HTTP 头信息，告诉浏览器可以接受来自其他域的请求。如果服务器不支持 CORS，我们可以使用 JSONP 或者反向代理等方式来解决跨域问题。

使用 Fetch API 发送跨域请求时，需要在请求头中添加一些特殊的信息，告诉服务器我们需要使用 CORS 协议来处理跨域请求。

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

在上面的代码中，我们使用 mode 属性将请求模式设置为 cors，然后使用 credentials 属性将凭证模式设置为 include。这样，我们就可以使用 Fetch API 发送跨域请求了。

结语

Fetch API 是一个强大的 Web API，它可以用来发送网络请求并处理响应数据。在实际开发中，我们可以使用 Fetch API 来构建各种类型的 Web 应用程序，包括基于 AJAX 的 Web 应用程序、单页面应用程序等。