JS宏进阶：全局函数fetch

最新推荐文章于 2025-02-13 10:56:25 发布

jackispy

最新推荐文章于 2025-02-13 10:56:25 发布

阅读量1.2k

点赞数 20

分类专栏： JS宏进阶文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/jackispy/article/details/145596299

版权

JS宏进阶专栏收录该内容

25 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

fetch函数是一个用于在JavaScript中执行HTTP请求的现代API。它提供了一种更简洁、更强大的方式来处理网络请求，相比传统的XMLHttpRequest对象，fetch API更加易于使用且功能更丰富。

一、基本使用

1、语法

fetch(url, options)

url：要请求的资源的URL（即网址）。

options：要配置的请求头信息。

2、返回值

无论请求成功与否，fetch函数都会返回一个Promise对象。如果请求成功，Promise对象会被解析成一个Response对象。如果请求失败（如网络问题或请求被阻止），Promise会被拒绝，抛出一个异常。

3、简单示例

function main() {
	fetch('https://www.baidu.com').then(response => {
	    if (!response.ok) {
	      throw new Error('Network response was not ok');
	    }
	    return response.text();  // 返回一个 Promise，解析为响应的文本内容
	}).then(text => {
		console.log(text);  // 这里可以打印响应的文本内容，即response.text()，也就是网页源码
	}).catch(error => {
    	console.error('There was a problem with the fetch operation:', error);
  	});
}

上述示例中，发送一个GET请求，返回响应的文本数据，并在控制台打印，效果如下：

二、配置option

fetch函数的第二个参数options，是一个配置对象，可以用来自定义请求的选项。以下是一些常用的配置选项：

method：请求使用的方法，如GET、POST、PUT、DELETE等。

headers：请求的头信息，形式为headers对象或包含字符串值的对象字面量。

body：请求的body信息，可以是blob、buffer source、from data、url serch params、或字符串对象。注意，GET或HEAD方法的请求不能包含body信息。

mode：请求的模式，决定发起的是同源请求还是跨域请求。可选值包括cors（允许跨域请求，但需要服务器支持CORS）、no-cors （只允许使用HEAD、GET和POST方法，且JavaScript不允许访问响应的内容）、same-origin（只允许同源请求）。

credentials：请求的凭证模式，决定请求是否携带cookie。可选值包括omit（不携带cookie）、same-origin（仅在同源时携带cookie）、include（无论是否同源都携带cookie）。

cache：请求的缓存模式。可选值包括default、no-store、reload、no-cache、force-cache、only-if-cached。

redirect：可用的重定向模式。可选值包括follow（自动重定向）、error（如果产生重定向将自动终止并且抛出一个错误）、manual（手动处理重定向）。

referrer：设置请求的来源地址。可选值包括no-referrer、client或一个URL。

referrerPolicy：指定HTTP头部referrer字段的值。

integrity：包括请求的子资源完整性值，用于验证资源的完整性。

三、响应处理

fetch函数返回的 response 对象包含了服务器对请求的响应。可以使用 response 对象提供的方法来处理响应的内容，如 text 、fromData、blob 、json 等。

text()：返回 promise 对象，用于解析响应返回的文本信息。

json()：返回 promise 对象，用于解析响应返回的JSON字符串信息。

blob()：返回 promise 对象，用于解析响应体的 blob 对象。

fromData()：返回 promise 对象，用于解析响应体的 fromData 对象。

四、取消请求

使用 AbortController 和 AbortSignal，可以在需要时中断fetch请求。这对于需要取消或中止某些操作的情况非常有用。示例代码如下所示：

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

fetch('你的网址', { signal })
  .then(response => response.json()) //根据实际情况选择合适的解析方式
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// 在需要时取消请求
controller.abort();

五、注意事项

1、跨域问题

fetch API默认支持跨域请求，但在某些情况下可能需要额外配置以处理CORS（跨域资源共享）。不过，在wps编辑器中可以忽视。

2、错误处理

前面讲过，网页请求有一些常见的错误，不管是使用fetch还是XHR都会遇到。只不过，在fetch中，部分网页错误信息（如404，500等等），promise是不会拒绝的，只有当出现网络故障或请求被阻止时promise才会拒绝。因此，在 .then 方法中，需要检查response中的 ok 属性，来判断请求是否成功。

3、兼容性问题

fetch API在现代的Web浏览器中得到了广泛支持，但在某些低版本浏览器中可能不支持。如果需要考虑低版本浏览器的兼容性，可以使用polyfill库来模拟fetch API的行为。不过，wps编辑器中是支持的，可忽略该问题。