关于Fetch_fetch content type

一、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.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;
});
1
2
3
4
5
6
7
8

在调用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) {
//  ...
//});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

var myInit = { method: 'GET',
               headers: {
                   'Content-Type': 'image/jpeg'
               },
               mode: 'cors',
               cache: 'default' };

var myRequest = new Request('flowers.jpg', myInit);
1
2
3
4
5
6
7
8

2、属性

1. method：包含请求的方法 (GET, POST, 等.) * ；
2. url ：包含这个请求的URL *；
3. headers：包含请求相关的Headers对象 *；
4. context：包含请求的上下文 *；
5. referrer：包含请求的来源 (例如：client) *；
6. referrerPolicy ：包含请求来源的策略 (例如：no-referrer) *；
7. mode ：包含请求的模式 *；
8. credentials：包含请求的证书 *；
9. 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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3、方法

1. Request.clone()：创建当前request的副本。

var myRequest = new Request('flowers.jpg');
var newRequest = myRequest.clone(); 
1
2

五、Fetch中的Response接口

1、构造方法

let myResponse = new Response(body, init);
1

1.1参数

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

2、属性

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

3、方法

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

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

1、构造参数

var myHeaders = new Headers(init);
1

1.1参数

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

2、方法

1. append()：给现有的header添加一个值, 或者添加一个未存在的header并赋值；
2. entries()：以 迭代器 的形式返回Headers对象中所有的键值对；
3. delete()：从Headers对象中删除指定header；
4. get()：以 ByteString 的形式从Headers对象中返回指定header的全部值；
5. has()：以布尔值的形式从Headers对象中返回是否存在指定的header；
6. keys()：以迭代器的形式返回Headers对象中所有存在的header名
7. set()：替换现有的header的值, 或者添加一个未存在的header并赋值；
8. 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();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

1、属性

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

方法

1. arrayBuffer()：使Response挂起一个流操作并且在完成时读取其值，它返回一个Promise对象，其resolve参数类型是ArrayBuffer。此操作会将bodyUsed状态改为已使用（true）；
2. blob()：同上，其resolve参数类型是Blob；
3. formData()：同上，其resolve参数类型是formData；
4. json()：同上，其resolve参数类型是json；
5. 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);
    }
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

八、fatch()

1、概念

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

2、语法

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

2.1 参数

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

九、简单使用fetch

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

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

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

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

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

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

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) {
    //对返回数据进行处理
 });
1
2
3
4
5
6
7
8
9
10

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));
1
2
3
4
5
6
7
8
9
10
11
12

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));
1
2
3
4
5
6
7
8
9
10
11
12
13

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));
1
2
3
4
5
6
7
8
9
10
11
12
13

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