fetch是什么?写一个fetch请求

0.174字数 480阅读 6422

之前看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