Fetch API

截取自Fetch API

1. Why Fetch

   • XMLHttpRequest是一个设计粗糙的API，不符合关注分离的原则，配置和调用方式非常的混乱，而且基于事件的异步模型写起来也没有现代的Promise, generator/yield, async/await友好
   • 使用fetch后：

   fetch(url).then(function(response) {
       return response.json();
   }).then(function(data) {
       console.log(data);
   }).catch(function(e){
       console.log('Ooops, error');
   });
   

   • 使用ES6函数之后：

   fetch(url).then((blob) => blob.json())
       .then((data) => console.log(data))
       .catch((e) => console.log('Oops, error', e))
   

   • async/await是非常新的API。

   try {
       let response = await fetch(url);
       let data = response.json();
       console.log(data);
   } catch(e) {
       console.log('Error');
   }
   

    * 这里， await后面可以跟Promise对象，表示等待Promise resolve()才会继续向下执行，如果Promise被reject()或者抛出异常则会被外面的`try...catch`捕获。
   

2. Fetch的基本用法：

   • fetch方法接受一个表示url的字符串或者一个Request对象作为参数，返回Promise对象。请求成功后将结果封装为Response对象，Response对象上具有json, text等方法。调用这些方法后可以获得不同类型的结果。Response对象上的这些方法同样返回Promise对象。
   • 基本用法如下：

   fetch('https://api.github.com/repos/facebook/react').then(function(res) {
   //请求成功，得到response对象，调用response对象的json方法返回。
   return res.json();
   }).then(function(data) {
   // response对象的json方法执行成功，得到结果。
       console.log(data);
   })
   

3. fetch方法

   • fetch方法的第一个参数可以是request对象，也可以是一个url，第二个参数可选，包含一些配置信息。fetch方法返回Promise。
   • 配置信息包含下列内容： method, headers, body（需要发送的信息）, mode（请求的模式）

4. Headers类

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

   var header = new Headers({
       'Content-Type': 'image/jpeg',
       'Accept-Charset': 'utf-8'
   });
   var anotherHeader = new Header(header);
   

   • Headers 实例的方法： append（对一个字段追加信息，如果该字段不存在，就创建一个）， delete（删除某个字段）， get（获得某个字段的第一个值），getAll（获得某个字段所有的值），has（判断是否存在某个字段）, set（设置一个字段，如果该字段已经存在，那么会覆盖之前的），forEach（遍历所有的字段，接受一个回调函数，和可选的第二个参数，可选的第二个参数的值作为回调函数的this值。）

5. 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);
   })