fetch

一，前言

1.fetch是Fetch API提供的全局的函数，用于http管道上的操作例如请求和响应。

2.fetch是浏览器支持的，可以不需要依赖$.ajax()和axios等http库

二，fetch使用

1.fetch接受两个参数，第一个是请求的url,第二个是一个配置对象的option

2.最简单的使用方法，只需传url

fecth(url).then(res=>res)

三，fetch的option配置

1.fetch的第二个参数是一个option对象，通过一些字段的配置，可以进行不同的请求操作。

fecth(url，{
	method:'POST', //请求类型
	body:{ a:1 }, //请求参数
	headers:{ //请求头
		content-type:'application/json',
    },
    credentials:'include' | 'same-origin' | 'omit', 
    //是否携带cookies凭证,带上 | 同源带上 | 不带上
    ...
	}).then(res=>res)

2.method:请求的方式支持post，get，put，delete,等等。默认为get请求。

3.fetch的body参数传递方式

（1）当headers里设置了content-type:'application/json'，那么body接受的一定要是一个json格式字符串。

（2）当为post普通表单提交请求如content-type:application/x-www-form-urlencode，接受的参数是a=1&b=2这种形式。且注意fetch默认的不是application/x-www-form-urlencode这种形式

（3）当为get请求时，body参数无效，参数需放在在url上。

四，fetch返回

1.fetch返回一个promise对象，因此我们可以用.then方法来获取数据

2.如下代码：

fecth(url).then(res=>res)

3.res包含了本次请求的许多信息，其中body才是我们想要的数据

  body: ReadableStream
  bodyUsed: false
  headers: Headers
  ok : true
  redirected : false
  status : 200
  statusText : "OK"
  type : "cors"
  url : "http://some-website.com/some-url"
  __proto__ : Response

4.注意body返回的是一个ReadableStream，后续我们要处理才能使用

（1）当body是一个对象时，可使用response.json()方法转化为对象。

fecth(url).then(res=>res.json())

（2）当body是文件流时。可使用response.blob()返回文件流blob对象

fecth(url).then(res=>res.blob())

五，fetch注意事项

1.fetch的错误处理比较麻烦，请求的状态为401,500等不会进入catch，而是直接进入then，此时res的ok字段会是false。因此我们要在第一个then方法做错误处理。

fetch('xx.png')  
.then((response) => {
  if (response.ok) {
    console.log('ok');
  } else {
    console.log('error');
  }
})
.catch(() => {
  console.log('error');
});