fetch用法

{{MARKDOWN}}

1. 概念和用法

fetch的核心在于对http接口的抽象,包括request,response,Headers,Body以及用于初始化异步请求的global fetch,除此之外还有一个特性:异步,基于promise

Fetch 提供了对 Request 和 Response （以及其他与网络请求有关的）对象的通用定义.

fetch() 必须接受一个参数—资源的路径。无论请求成功失败都会返回一个promise对象,resolve对应response,也可以传一个可选的第二个参数,

headers:相当于 response/request 的头信息，可以修改它，或者针对不同的结果做不同的操作。

request:相当于一个资源请求.
response:相当于请求的响应.

2. 使用fetch

fetch提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合乎逻辑的方式来跨网络异步获取资源。

以上功能之前是ajax提供的,但是fetch提供了一个更好的替代方法,可以很好的被其他技术使用,例如:Service Workers,fetch还提供了cors,http的拓展.

fetch(input,[,init]);

//参数input
定义要获取的资源(string或者request对象)
//init(可选参数)配置项对象,包含所有对请求的设置
method:请求的方法GET,POST
headers:请求的头信息
body:请求的body信息
mode:请求的模式
credentials:
cache:
redirect:
referrer:
referrerPolicy:
integrity:

fetch与ajax的不同:
当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ）， 仅当网络故障时或请求被阻止时，才会标记为 reject。

默认情况下, fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）.

3. fetch请求 (get)

fetch('http://localhost:3000/data', {
	method: 'GET'
}).then((value) => {
	return value.text()
}).then((res) => {
	console.log(res);
	console.log(typeof(res))
	console.log(JSON.parse(res))
})

fetch请求刚开始用会很不习惯,因为

fetch(url).then((res)=>{
    console,log(res)
    //这里的res只是Response对象也就是这个请求的信息,里面并没有返回的信息.
    console.log(res.text());
    console.log(res.json());
    console.log(res.blob());
    //通过res.text(),res.json(),res.blob()给结果提取并转换.结果是带有响应数据格式的promise对象
    return res.text()
}).then(function(res){
    console.log(res);//输出响应结果.
})

fetch请求之后会返回response对象,then回调函数return把promise对象返回.

4. fetch请求post

fetch('http://localhost:8081/register', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/x-www-form-urlencoded'
	},
	body: reqData // 这里是请求对象
	}) // 返回一个Promise对象
	.then((res) => {
    	return  res.text()// res.text()是一个Promise对象
	}).then((res)=>{
		console.log(res);
	})

同get一样的情况,只是请求参数option不同

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

/*resolve时回传response对象
*/
//属性
status:(number)//http请求结果参数,100-599
status(string)//服务器返回的状态报告
ok(bool)//如果返回200,则请求成功true
headers(Headers)//返回头部信息
url//请求的地址
//方法
text()// 以string的形式生成请求text
json()//生成JSON.parse(responseText)的结果
blob()//生成一个bool
arrayBuffer()//生成一个ArrayBuffer
formData()//生成生成格式化的数据，可用于其他的请求
//其他方法
clone()
Response.error()
Response.redirect()

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