关于Fetch

关于Fetch

一、Fetch是什么？二、Fetch 的核心是什么？三、Fetch与ajax的区别四、Fetch中Request接口1、构造方法1.1参数 2、属性3、方法 五、Fetch中的Response接口1、构造方法1.1参数 2、属性3、方法 六、Fetch中的Headers接口——允许对HTTP请求和响应头执行各种操作1、构造参数1.1参数 2、方法 七、Fetch中的Body接口——代表响应/请求的正文1、属性方法 八、fatch()1、概念2、语法2.1 参数 九、简单使用fetch1、使用GET完成请求且不传入参数2、使用GET完成请求且传入参数3、使用POST完成请求且不传入参数4、使用POST完成请求且传入参数5、使用POST完成请求且上传JSON 数据6、使用POST完成请求且上传文件7、使用POST完成请求且上传多个文件

一、Fetch是什么？

Fetch 是一个现代的概念, 等同于 XMLHttpRequest，它提供了许多与XMLHttpRequest相同的功能。

二、Fetch 的核心是什么？

Fetch 的核心在于对 HTTP 接口的抽象，包括 Request，Response，Headers，Body，以及用于初始化异步请求的 global fet

三、Fetch与ajax的区别

1、当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject， 即使响应的 HTTP 状态码是 404 或 500。

2、fetch() 可以接受跨域 cookies。 3、fetch 不会发送 cookies，除非使用了credentials 的初始化选项。

四、Fetch中Request接口

1、构造方法

var myRequest = new Request(input[, init]);

1.1参数

input：可以是两种类型。一个是资源的URL，一个是Request 对象。init：一个可选对象，包含希望被包括到请求中的各种自定义选项，下面为常见的可选对象 method: 请求的方法，例如：GET, POST；headers: 任何你想加到请求中的头；body: 任何你想加到请求中的body；可以是Blob, BufferSource, FormData, URLSearchParams, 或 USVString对象。注意GET 和 HEAD请求没有body；mode: 请求的模式, 比如 cors, no-cors, same-origin, 或 navigate。默认值为 cors；credentials: 想要在请求中使用的credentials：: omit, same-origin, 或 include。默认值应该为omit；cache: 请求中想要使用的cache mode；redirect: 对重定向处理的模式： follow, error, or manual。

调用fetch()时：

var myImage = document.querySelector('img'); var myRequest = new Request('flowers.jpg'); fetch(myRequest).then(function(response) { return response.blob(); }).then(function(response) { var objectURL = URL.createObjectURL(response); myImage.src = objectURL; });

在调用fetch()时，传入init对象：

var myImage = document.querySelector('img'); var myHeaders = new Headers(); myHeaders.append('Content-Type', 'image/jpeg'); var myInit = { method: 'GET', headers: myHeaders, mode: 'cors', cache: 'default' }; var myRequest = new Request('flowers.jpg',myInit); fetch(myRequest).then(function(response) { ... }) //将init对象作为参数传递到fetch调用中来达到同样的效果 //fetch(myRequest,myInit).then(function(response) { // ... //});

使用在init中使用对象字面量作为headers：

var myInit = { method: 'GET', headers: { 'Content-Type': 'image/jpeg' }, mode: 'cors', cache: 'default' }; var myRequest = new Request('flowers.jpg', myInit);

2、属性

method：包含请求的方法 (GET, POST, 等.) * ；url ：包含这个请求的URL *；headers：包含请求相关的Headers对象 *；context：包含请求的上下文 *；referrer：包含请求的来源 (例如：client) *；referrerPolicy ：包含请求来源的策略 (例如：no-referrer) *；mode ：包含请求的模式 *；credentials：包含请求的证书 *；cache ：包含请求的缓存模式 (例如： default, reload, no-cache) *。 var myRequest = new Request('flowers.jpg'); var myMethod = myRequest.method; // GET var myURL = request.url; var myHeaders = request.headers; var myContext = request.context; var myReferrer = request.referrer; var myReferrerPolicy = request.referrerPolicy; var myMode = request.mode; var myCred = request.credentials; var currentCacheMode = request.cache;

3、方法

Request.clone()：创建当前request的副本。 var myRequest = new Request('flowers.jpg'); var newRequest = myRequest.clone();

五、Fetch中的Response接口

1、构造方法

let myResponse = new Response(body, init);

1.1参数

body Blob：表示一个不可变、原始数据的类文件对象BufferSourceFormData：表单数据的键值对 key/value 的构造方式ReadableStream：一个可读取的二进制流操作URLSearchParams ：定义了一些实用的方法来处理 URL 的查询字符串USVString：类似字符串 init：为可选参数 status：response的状态码, 例如:200；statusText：和状态码关联的状态消息, 例如: OK；headers：你想加到response上的任何headers。

2、属性

headers：包含此 Response 所关联的 Headers 对象 *；ok：包含了一个布尔值，标示该 Response 成功（HTTP 状态码的范围在 200-299 *；redirected：表示该 Response 是否来自一个重定向，如果是的话，它的 URL 列表将会有多个条目 *；status：包含 Response 的状态码 *；statusText：包含了与该 Response 状态码一致的状态信息（例如，OK对应 200）*；type：包含 Response 的类型（例如，basic、cors）*；url：包含 Response 的URL；useFinalURL：包含了一个布尔值，来标示这是否是该 Response 的最终 URL；body：一个简单的 getter，用于暴露一个 ReadableStream 类型的 body 内容；bodyUsed：包含了一个布尔值来标示该 Response 是否读取过 Body；

3、方法

clone()：创建一个 Response 对象的克隆；error()：返回一个绑定了网络错误的新的 Response 对象；redirect()：用另一个 URL 创建一个新的 Response；Body接口中的五个方法

六、Fetch中的Headers接口——允许对HTTP请求和响应头执行各种操作

1、构造参数

var myHeaders = new Headers(init);

1.1参数

init：通过一个包含任意 HTTP headers 的对象来预设你的 Headers。

2、方法

append()：给现有的header添加一个值, 或者添加一个未存在的header并赋值；entries()：以 迭代器 的形式返回Headers对象中所有的键值对；delete()：从Headers对象中删除指定header；get()：以 ByteString 的形式从Headers对象中返回指定header的全部值；has()：以布尔值的形式从Headers对象中返回是否存在指定的header；keys()：以迭代器的形式返回Headers对象中所有存在的header名set()：替换现有的header的值, 或者添加一个未存在的header并赋值；values()：以迭代器的形式返回Headers对象中所有存在的header的值. //创建一个空的Headers对象: var myHeaders = new Headers(); //通过append()方法添加header myHeaders.append(name,value); //通过get()方法获取header myHeaders.get('Content-Type'); //删除指定header myHeaders.delete(name); //返回Headers对象中所有的键值对 myHeaders.entries(); myHeaders.has(name); myHeaders.set(name, value); myHeaders.keys(); myHeaders.values();

七、Fetch中的Body接口——代表响应/请求的正文

1、属性

body：一个简单的getter用于暴露一个ReadableStream类型的主体内容 * ；bodyUsed：表示是否body已经被标记读取 *。

方法

arrayBuffer()：使Response挂起一个流操作并且在完成时读取其值，它返回一个Promise对象，其resolve参数类型是ArrayBuffer。此操作会将bodyUsed状态改为已使用（true）；blob()：同上，其resolve参数类型是Blob；formData()：同上，其resolve参数类型是formData；json()：同上，其resolve参数类型是json；text()：同上，其resolve参数类型是text。 //返回一个json类型的数据 const myList = document.querySelector('ul'); const myRequest = new Request('products.json'); fetch(myRequest) .then(response => response.json()) .then(data => { //处理返回的数据，视情况而定 for (const product of data.products) { let listItem = document.createElement('li'); listItem.appendChild( document.createElement('strong') ).textContent = product.Name; listItem.append( ` can be found in ${ product.Location }. Cost: ` ); listItem.appendChild( document.createElement('strong') ).textContent = `£${product.Price}`; myList.appendChild(listItem); } });

八、fatch()

1、概念

fetch() 方法用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象

2、语法

Promise<Response> fetch(input[, init]);

2.1 参数

input：定义要获取的资源，可以是USVString 字符串，也可以是Request 对象init：见request接口

九、简单使用fetch

1、使用GET完成请求且不传入参数

//数据库返回的是一个json类型的数据,请求方式默认为GET，所以在此处省略 fetch("url地址").then(function(response) { //可以将json换成其他类型，具体类型参考规定参数类型和服务器的返回值类型 return response.json(); }).then(function(data) { //对返回数据进行处理 });

2、使用GET完成请求且传入参数

//数据库返回的是一个json类型的数据 //在url地址上拼接参数具体格式`?参数名=参数值&参数名=参数值` fetch("url地址").then(function(response) { //可以将json换成其他类型，具体类型参考规定参数类型和服务器的返回值类型 return response.json(); }).then(function(data) { //对返回数据进行处理 });

3、使用POST完成请求且不传入参数

//数据库返回的是一个json类型的数据 fetch("url地址",{method:"post"}).then(function(response) { //可以将json换成其他类型，具体类型参考规定参数类型和服务器的返回值类型 return response.json(); }).then(function(data) { //对返回数据进行处理 });

4、使用POST完成请求且传入参数

//数据库返回的是一个json类型的数据 let init = {method:"post",body:"参数"} var myRequest = new Request('url地址',init); fetch(myRequest ).then(function(response) { //可以将json换成其他类型，具体类型参考规定参数类型和服务器的返回值类型 return response.json(); }).then(function(data) { //对返回数据进行处理 });

5、使用POST完成请求且上传JSON 数据

var url = 'https://example.com/profile'; var data = {username: 'example'}; fetch(url, { method: 'POST', // or 'PUT' body: JSON.stringify(data), // data can be `string` or {object}! headers: new Headers({ 'Content-Type': 'application/json' }) }).then(res => res.json()) .catch(error => console.error('Error:', error)) .then(response => console.log('Success:', response));

6、使用POST完成请求且上传文件

var formData = new FormData(); var fileField = document.querySelector("input[type='file']"); formData.append('username', 'abc123'); formData.append('avatar', fileField.files[0]); fetch('https://example.com/profile/avatar', { method: 'PUT', body: formData }) .then(response => response.json()) .catch(error => console.error('Error:', error)) .then(response => console.log('Success:', response));

7、使用POST完成请求且上传多个文件

var formData = new FormData(); var fileField = document.querySelector("input[type='file']"); formData.append('username', 'abc123'); formData.append('avatar', fileField.files[0]); fetch('https://example.com/profile/avatar', { method: 'PUT', body: formData }) .then(response => response.json()) .catch(error => console.error('Error:', error)) .then(response => console.log('Success:', response));

本文摘抄与此(戳一下)，如有错误请看原文或联系本人！