使用 fetch

Posted 难得糊涂

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用 fetch相关的知识，希望对你有一定的参考价值。

㈠官方介绍fetch

⑴在Fetch API中说到：

“The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set”.

即Fetch API提供了一个用于获取资源(包括通过网络)的接口。对于任何使用过XMLHttpRequest的人来说，这看起来都很熟悉，但是新的API提供了更强大、更灵活的特性集。

 

⑵Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。

  它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

 

⑶这种功能以前是使用  XMLHttpRequest实现的。

Fetch提供了一个更好的替代方法，可以很容易地被其他技术使用，例如 Service Workers。

Fetch还提供了单个逻辑位置来定义其他HTTP相关概念，例如CORS和HTTP的扩展。

 

㈡fetch的使用方法

⑴基本概念

Headers表示响应/请求标头，允许您查询它们并根据结果采取不同的操作。

Request表示资源请求。

Response表示对请求的响应。

 

⑵基本用法

fetch 接受一个 url 作为参数，发起 GET 请求，返回 Promise ,请求成功后将返回结果封装为一个 Response 对象，该对象上具有一些方法（比如 json 方法），调用 json 方法后同样返回一个 Promise 对象，并用解析 json 字符串得到的对象来 resolve。

 

⑶语法：

第一种：

fetch(url, options).then(function(response) {
  // handle HTTP response
}, function(error) {
  // handle network error
})

 

第二种：

fetch(\'api/data.json\', {
  
  method:\'POST\', //请求类型GET、POST
  
  headers:{},// 请求的头信息，形式为 Headers 对象或 ByteString。
  
  body:{},//请求发送的数据 blob、BufferSource、FormData、URLSearchParams（get或head方法中不能包含body）
  
  mode:\'\',//请求的模式,是否跨域等，如 cors、 no-cors 或者 same-origin。
  
  credentials:\'\',//cookie的跨域策略，如 omit、same-origin 或者 include。
  
  cache:\'\', //请求的 cache 模式: default, no-store, reload, no-cache, force-cache, or only-if-cached.

}).then(function(response) { ... });

 

⑷具体示例：

require(\'babel-polyfill\')
require(\'es6-promise\').polyfill()
import \'whatwg-fetch\'
fetch(url, {
  method: "POST",
  body: JSON.stringify(data),
  headers: {
    "Content-Type": "application/json"
  },
  credentials: "same-origin"
}).then(function(response) {
  response.status     //=> number 100–599
  response.statusText //=> String
  response.headers    //=> Headers
  response.url        //=> String
  response.text().then(function(responseText) { ... })
}, function(error) {
  error.message //=> String
})

 

⑸具体分析

1.url

定义要获取的资源。这可能是：

• 一个 USVString 字符串，包含要获取资源的 URL。

• 一个 Request 对象。

 

options（可选）

一个配置项对象，包括所有对请求的设置。可选的参数有：

• method: 请求使用的方法，如 GET、POST。

• headers: 请求的头信息，形式为 Headers 对象或 ByteString。

• body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。

• mode: 请求的模式，如 cors、 no-cors 或者 same-origin。

• credentials: 请求的 credentials，如 omit、same-origin 或者 include。

• cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, 或者 only-if-cached。

 

2.response

一个 Promise，resolve 时回传 Response 对象：

 

• 属性：

① status (number) - HTTP请求结果参数，在100–599 范围

② statusText (String) - 服务器返回的状态报告

③ ok (boolean) - 如果返回200表示请求成功则为true

④headers (Headers) - 返回头部信息，下面详细介绍

⑤ url (String) - 请求的地址

 

• 方法：

① text() - 以string的形式生成请求text

② json() - 生成JSON.parse(responseText)的结果

③blob() - 生成一个Blob

④ arrayBuffer() - 生成一个ArrayBuffer

⑤formData() - 生成格式化的数据，可用于其他的请求

 

• 其他方法：

①clone()

② Response.error()

③ Response.redirect()

 

3.response.headers

① has(name) (boolean) - 判断是否存在该信息头

② get(name) (String) - 获取信息头的数据

③ getAll(name) (Array) - 获取所有头部数据

④ set(name, value) - 设置信息头的参数

⑤ append(name, value) - 添加header的内容

⑥delete(name) - 删除header的信息

⑦forEach(function(value, name){ ... }, [thisContext]) - 循环读取header的信息

 

4.mode

①no-cors 允许来自CDN的脚本、其他域的图片和其他一些跨域资源，但是首先有个前提条件，就是请求的method只能是”HEAD”,”GET”或者”POST”。此外，任何 ServiceWorkers 拦截了这些请求，它不能随意添加或者改写任何headers，除了这些。第三，JavaScript不能访问Response中的任何属性，这保证了 ServiceWorkers 不会导致任何跨域下的安全问题而隐私信息泄漏。

②cors 通常用作跨域请求来从第三方提供的API获取数据。这个模式遵守CORS协议。只有有限的一些headers被暴露给Response对象，但是body是可读的。

③same-origin 如果一个请求是跨域的，那么返回一个简单的error，这样确保所有的请求遵守同源策略。

 

5.cache

①default 缓存相同的请求

②no-store 不缓存任何请求

③reload 创建一个正常的请求，并用响应更新HTTP缓存

④no-cache 如果HTTP缓存中有响应，并且不是正常请求，则Fetch创建条件请求。然后，它使用响应更新HTTP缓存。

⑤force-cache Fetch使用HTTP缓存中与请求匹配的任何响应，不管是否过期。如果没有响应，则会创建正常请求，并使用响应更新HTTP缓存。

⑥only-if-cached Fetch使用HTTP缓存中与请求匹配的任何响应，不管是否过期。如果没有响应，则返回网络错误。

（只有当请求的模式为“same-origin”时，才能使用任何缓存重定向，假设请求的重定向模式为“follow”，重定向不会违反请求的模式）。

 

如果header中包含名称为“If-Modified-Since”，“If-None-Match”，“If-Unmodified-Since”，“If-Match”和“If-Range”之一，如果是“default”，fetch 会将 cache 自动设置为 “no-store”。

 

㈢Fetch API 

Fetch API 包含一组类和方法，用来简化 HTTP 请求。其中包含以下方法和类：

①fetch 方法：用于发起 HTTP 请求

②Request 类：用来描述请求

③Response 类：用来表示响应

④Headers 类：用来表示 HTTP 头部信息

 

㈣fetch 方法

★fetch 方法有两种调用方法，

第一个参数可以是一个 Request 对象，也可以是一个简单的 url

第二个参数是可选参数，包含一些配置信息。

如下：

Promise fetch(String url [, Object options]);
Promise fetch(Request req [, Object options]);

 

★可选的配置信息可以一个简单对象，可以包含下列字段：

①method: 请求的方法, 比如： GET, POST

②headers：请求头部信息，可以是一个 Headers 对象的实例，也可以是一个简单对象

③body: 任何希望发送的信息，可以是 Blob, BufferSource, FormData, URLSearchParams, 或者 USVString。需要注意的是 GET 和 HEAD 方法不能包含 body。

④mode：请求的模式，可以取这几个值：cors, no-cors, same-origin, navigate

   ⑴same-origin：只允许同源的请求，否则直接报错

   ⑵cors：允许跨域，但也要要求响应中 Access-Control-Allow-Origin 这样的头部信息表示允许跨域，响应中只有部分头部信息可以读取，但响应内容可以不受限地读取。

   ⑶no-cors：只允许使用 HEAD、 GET 和 POST 方法，且 JavaScript 不允许访问 response 中的内容。ServiceWorkers 拦截了这些请求，它不能随意添加或者改写任何headers。

   ⑷navigate：用于支持页面导航。通常使用不到。

⑤credentials：表示是否发送 cookie，有三个可选值 omit, same-origin, includecache：表示处理缓存的策略

   ⑴omit：不发生 cookie

   ⑵same-origin： 仅在同源时发生 cookie

   ⑶include：发送 cookie

⑥redirect：发生重定向时候的策略。有以下可选值：referrer： 一个字符串，可以是 no-referrer, client, 或者是一个 URL。默认值是 client。

   ⑴follow：跟随

   ⑵error：发生错误

   ⑶manual：需要用户手动跟随

⑦integrity：包含一个用于验证子资源完整性的字符串。

 

★该函数返回一个 Promise 对象，若请求成功会用 Response 的实例作为参数调用 resolve ，若请求失败会用一个错误对象来调用 reject。

 

㈤Headers 类

①请求头对象，Fetch API 的Headers类允许你去对HTTP request 和 response 的headers执行各种操作。

②这些操作包括：检索, 设置, 添加和删除。

③一个Headers类里包含一个header列表, 它的初始值为空或者是零个或多个键值对。

④你可以使用 append()方法添加， 这个类中所有的方法, 其 header的名字顺序匹配并不区分大小写。

 

★Headers 类用来表示 HTTP 的头部信息，其构造函数可以接受一个表示 HTTP 头信息的对象，也可以接受一个 Headers 类的实例作为对象：

var header1 = new Headers({
  
       \'Content-Type\': \'image/jpeg\',
   
       \'Accept-Charset\': \'utf-8\'

  });

 var header2 = new Headers(header1);

 

★Headers 实例的方法

①append()

添加一个header信息

②delete()

删除指定的header

③get()

从Headers对象中返回指定的值

④getAll()

返回全部的header

⑤has()

检测指定的header，返回布尔值

⑥set()

修改或添加header

⑦forEach()

遍历所有的字段，接受一个回调函数，和可选的第二个参数。可选的第二个参数地值作为回调函数的 this 值。

⑧entries() 

返回headers对象中的所有键值对，是一个 iterator 对象

⑨keys() 

返回所有的header的键，是一个iterator对象

⑩values() 

返回所有的header的值 ，是一个iterator对象

 

㈥Request 类

★Request 对象用于描述请求内容。

构造函数接受的参数和 fetch 函数的参数形式一样，实际上 fetch 方法会使用传入的参数构造出一个 Request 对象来。

下面例子从 github 抓取到 react 的 star 数并打印出来。

var req = new Request(\'https://api.github.com/repos/facebook/react\',{
    
      method:\'GET\'
 
});

fetch(req).then(function(res){
 
       return res.json()

 }).then(function(data){
     
      console.log(data.stargazers_count)
 
});

 

★Request 实例的属性

以下属性均为只读属性。

①method：请求的方法POST/GET等

②url：请求的地址

③headers：请求头（可以是Headers对象，也可是JSON对象）

④referrer：指定请求源地址

⑤referrerPolicy：处理来源信息的策略

⑥mode：请求的模式（是跨域cors还是正常请求no-cors）

⑦credentials：跨域请求时，是否携带cookie信息（omit跨域携带/same-origin同源携带）

⑧redirect：重定向

⑨integrity：一个散列值，用于检验请求资源的完整性

⑩cache：是否缓存这个请求

 

★Request的方法

clone() 复制一个当前request对象的实例

 

㈦Response 类

★Response 用来表示 HTTP 请求的响应。

其构造函数形式如下：

var res = new Response(body, init);

 

★Body

Fetch mixin 对象，提供了关联 response/request 中 body 的方法，可以定义它的文档类型以及请求如何被处理。

Request 和 Response 对象都实现了Body的接口，所以都拥有Body的方法和属性，

用于指定请求体中的body或响应体的内容的数据类型（arrayBuffer/blob /json/text) 主要是做数据类型的转换。

 

⑴属性

bodyUsed   用于判断是否在响应体中是否设置过body读取类型

 

⑵方法

①Blob()：将响应流转换为大的二进制的promise对象，并将bodyUsed 状态改为已使用，一般用于文件读取（下载大文件或视频）

②arrayBuffer()： 将响应流转换为buffer数组的promise对象，并将bodyUsed状态改为已使用

③FormData()：将响应流转换为formData的promise对象，并将bodyUsed状态改为已使用

④json()：将响应流转换为json的promise对象，并将bodyUsed状态改为已使用

⑤text()：将响应流转换为文本字符串的promise对象，并将bodyUsed状态改为已使用

 

⑵init 是一个对象，其中包括以下字段：

①status：响应的状态码，比如 200，404

②statusText：状态信息，比如 OK

③headers: 头部信息，可以是一个对象，也可以是一个 Headers 实例

 

★Response 实例属性

以下属性均为只读属性

①bodyUsed：用于表示响应内容是否有被使用过

②headers：头部信息

③ok：表明请求是否成功，当响应的状态码是 200~299 时，该值为 true

④status：状态码（1xx-5xx）

⑤statusText：状态信息

⑥type：表明了响应的类型，可能是下面几种值：url：响应的地址

  • basic： 同源
  • cors：跨域
  • error：出错
  • opaque：Request 的 mode 设置为 “no-cors” 的响应

⑦url：包含Response的URL

⑧useFinalURL：包含了一个布尔值来标示这是否是该Response的最终URL 

★方法

①clone：复制一个响应对象

要想从 Response 的实例中拿到最终的数据需要调用下面这些方法，这些方法都返回一个 Promise 并且使用对应的数据类型来 resolve。

②arrayBuffer：把响应数据转化为 arrayBuffer 来 resolve

③blob：把响应数据转换为 Blob 来 resolve

④formData：把响应数据转化为 formData 来 resolve

⑤json：把响应数据解析为对象后 resolve

⑥text：把响应数据当做字符串来调用 resolve

 

㈧实例总结：

 1 // 构造出 Request 对象
 2 var req = new Request(\'https://api.github.com/repos/facebook/react\',{
 3   method:\'GET\'
 4 });
 5 
 6 // 发起请求，fetch 方法返回一个 Promise 对象
 7 fetch(req).then(function(res){
 8   // 得到了 response，这里调用 response 的 json 方法
 9   // 该方法同样返回一个 Promise
10   return res.json();
11 }).then(function(data){
12   // 得到解析后的对象
13   console.log(data.stargazers_count)
14 });

 

 

参考：https://www.cnblogs.com/liuwei-0313/p/10059004.html

          https://segmentfault.com/a/1190000010066409

          http://jartto.wang/2017/01/17/xhr-or-fetch-api/

          http://coderlt.coding.me/2016/11/20/JS-Feach/

          

以上是关于使用 fetch的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 fetch 从一个模块导出从 GET API 获得的响应数据到另一个模块

回归 | js实用代码片段的封装与总结（持续更新中...）

TP5报如下的错误 Indirect modification of overloaded element of thinkpaginatorCollection has no effect(代码片段

Vue-Select：如何将此 fetch() 代码转换为使用 axios？

齐博分类系统漏洞分析

在 javascript 中的另一个 fetch 中使用 fetch