fetch是什么？写一个fetch请求

之前看PWA时，知道它使用的技术包括了fetch，然后就是把这些概念简单的记住，再多就不知道了。今天再看看fetch这个api，了解它的最好方法就是手写出来。

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

这种功能以前是使用 XMLHttpRequest实现的。Fetch提供了一个更好的替代方法，可以很容易地被其他技术使用，例如 Service Workers。

除此之外，Fetch 还利用到了请求的异步特性——它是基于Promise的。

get请求

这里给大家推荐两个网站：
http://jsonplaceholder.typicode.com/
http://myjson.com/

我这里用第二个网站，生成了一个JSON数据。

一个基本的 fetch请求设置起来很简单，这里发起一个get请求。看看下面的代码：

fetch('https://api.myjson.com/bins/of6pw')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

调用fetch函数，传入接口url，然后返回一个promise（response），为了获取JSON的内容，我们需要使用 json()方法，这个方法返回的也是一个promise。

输出结果：

image.png

post请求

发起一个post请求，这里用到了第一个网站的接口：

fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify({
        name: "ceido",
        age: 100
    }),
    headers: {
      "Content-type": "application/json; charset=UTF-8"
    }
  })
  .then(response => response.json())
  .then(json => console.log(json))

输出结果：

image.png

看起来这比XMLHttpRequest简洁多了，但是不知道现在的使用情况怎么样，我知道的话就是在PWA中用到，对于一般的HTTP库如axios不知道有没有封装。

配合Service Worker使用，可以看看这里：https://www.jianshu.com/p/778f37db5a49

参考：

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

https://zhuanlan.zhihu.com/p/28206325