使用 fetch

xubzhlin 2019-12-29

官方介绍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
})

⑷具体示例:

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的信息

 

㈢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 类

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

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

  });

 var header2 = new Headers(header1);

★Headers 实例的方法

①append

对一个字段追加信息,如果该字段不存在,就创建一个。

②delete

删除某个字段

③get

获得某个字段的第一个值

④getAll

获得某个字段所有的值

⑤has

判断是否存在某个字段

⑥set

设置一个字段,如果该字段已经存在,那么会覆盖之前的。

⑦forEach

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

㈥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

②url

③headers

④referrer

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

⑥mode

⑦credentials

⑧redirect

⑨integrity

⑩cache

㈦Response 类

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

其构造函数形式如下:

var res = new Response(body, init);

⑴其中 body 可以是:

①Blob

②BufferSource

③FormData

④URLSearchParams

⑤USVString

⑵init 是一个对象,其中包括以下字段:

status:响应的状态码,比如 200,404

statusText:状态信息,比如 OK

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

★Response 实例属性

以下属性均为只读属性

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

headers:头部信息

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

status:状态码

statusText:状态信息

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

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

 

★方法

clone:复制一个响应对象

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

arrayBuffer:把响应数据转化为 arrayBuffer 来 resolve

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

formData:把响应数据转化为 formData 来 resolve

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

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

㈧实例总结:

// 构造出 Request 对象
var req = new Request(‘https://api.github.com/repos/facebook/react‘,{
  method:‘GET‘
});

// 发起请求,fetch 方法返回一个 Promise 对象
fetch(req).then(function(res){
  // 得到了 response,这里调用 response 的 json 方法
  // 该方法同样返回一个 Promise
  return res.json();
}).then(function(data){
  // 得到解析后的对象
  console.log(data.stargazers_count)
});

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

          https://segmentfault.com/a/1190000010066409

          

相关推荐