【Fetch】fetch的使用

1.使用fetch进行请求

fetch请求是基于promise的HTTP库，整个配置和请求很简单，来看MDN上提供的代码:

fetch('http://example.com/movies.json')
  .then(function(response) {
  	console.log(response);
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

// console.log(response)  输出的内容
{
  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
}

• fetch请求返回的是一个promise
• 打印response，真正的数据存储在body中，字面意思是可读流，需要一个方法转成我们想要的数据
• response.json()就是转化的方法，它返回的也是一个promise
• myJson是我们需要的json数据

2.fetch请求配置

fetch(url, options)接收两个参数，第一个参数为请求的url，第二个参数为请求的options配置。
options为一个对象，来看下options接收的参数

let data = { name: 'Mike' };
{
	method: 'post',
	headers: {
		''Content-Type': 'application/json;charset=utf-8''
	},
	body: data
}

3.fetch响应配置

无论请求响应返回的状态码是多少，都会被fetch resolve掉，除非出现网络异常或者请求中断的情况。一般情况下，我们需要配合返回的响应状态码来完成业务。

fetch('some-url')
  .then(response => {
    if (response.status == 200) {		// 这里根据状态码添加逻辑
      return response.json()
    } else {
      return Promise.reject({			// 将异常的状态码如401、500等返回一个promise或者抛出异常
        status: response.status,
        statusText: response.statusText
      })
    }
  })
  .catch(error => {
    if (error.status === 404) {
      // do something about 404			// 这里可以根据情况来跳转路由页面
    }
  })