什么是Fetch?

 

Fetch 提供了对 Request 和 Response （以及其他与网络请求有关的）对象的通用定义。使之今后可以被使用到更多地应用场景中：无论是 service worker、Cache API、又或者是其他处理请求和响应的方式，甚至是任何一种需要你自己在程序中生成响应的方式。

 

兼容性

ECMAScript 2015(ES6) 标准的发布已经三年有余，现代浏览器对ES6语法的支持趋于完善。

Electron12集成的Chrome89毫无疑问是支持的

 

请求对象Request

Fetch API 的 Request接口用来表示资源请求。

你可以使用  Request.Request() ?构造函数创建一个Request 对象，但是你可能会遇到一个 Request 对象作为其它 API 的操作被返回，比如一个 service worker的FetchEvent.request (en-US)。

 

可设置属性

 

Request.method

包含请求的方法 (GET, POST, 等.)

Request.url

包含这个请求的URL。

Request.headers 

包含请求相关的Headers对象。

Request.context 

包含请求的上下文(例如：audio, image, iframe, 等)

Request.referrer (en-US)

包含请求的来源 (例如：client)。

Request.referrerPolicy (en-US) 

包含请求来源的策略 (例如：no-referrer)。

Request.mode 

包含请求的模式 (例如： cors, no-cors, same-origin, navigate).

Request.credentials 

包含请求的证书(例如： omit, same-origin).

Request.redirect (en-US) 

包含?如何处理重定向模式，它可能是一个 follow ，error或者manual。

Request.integrity (en-US) 

包含请求的子资源的完整性值 (例如： sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).

Request.cache 

包含请求的缓存模式 (例如： default, reload, no-cache).

Request实现了Body, 所以它还具有以下属性可用:

 

Body.body 

一个简单getter用于曝光一个ReadableStream的主体内容.

Body.bodyUsed 

存储一个Boolean (en-US)判断主体是否已经被用于一个响应中.

 

 

响应对象body

Fetch API 中的 Body mixin 代表响应/请求的正文，允许你声明其内容类型是什么以及应该如何处理。

Body被Request 和Response实现，并为这些对象提供了一个相关联的主体（字节流），一个已使用的标志（最初未设置）和一个MIME类型（最初为空字节序列）

 

提供的方法

 

Body.arrayBuffer()

使Response挂起一个流操作并且在完成时读取其值，它返回一个Promise (en-US)对象，其resolve参数类型是ArrayBuffer。此操作会将bodyUsed状态改为已使用（true）。

Body.blob()

使Response挂起一个流操作并且在完成时读取其值，它返回一个Promise (en-US)对象，其resolve参数类型是Blob。此操作会将bodyUsed状态改为已使用（true）。

Body.formData()

使Response挂起一个流操作并且在完成时读取其值，它返回一个Promise (en-US)对象，其resolve参数类型是FormData表单。此操作会将bodyUsed状态改为已使用（true）。

Body.json()

使Response挂起一个流操作并且在完成时读取其值，它返回一个Promise (en-US)对象，其resolve参数类型是使用JSON解析body文本的结果。此操作会将bodyUsed状态改为已使用（true）。

Body.text()

使Response挂起一个流操作并且在完成时读取其值，它返回一个Promise (en-US)对象，其resolve参数类型是USVString（文本）。此操作会将bodyUsed状态改为已使用（true）。

 

 

一个栗子

Fetch API提供了一个全局变量fetch。使用它访问一个URL，返回的是一个Promise对象，当浏览器完成获取远端资源时，这个Promise对象会被resolve。基于请求的资源类型，可用不同的方式使用Promise对象的结果，对响应内容进行处理。

 

调用Hello接口，打印返回的Promise对象

const data = { data: "fetch" };
fetch("http://192.168.6.241/index/hello",{
    method: "post",
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(data)

})
    .then(renponse=> {console.log(renponse.text())})
    .catch(err=>{console.log(err)})

测试