Fetch的使用

如果喜欢使用lower-level，使用标准的 fetch API. 好处是无需额外的加载一个外部资源。但没有被浏览器完全支持，需要使用polyfill。因此使用Axios的更多一些。

参考Axios的使用：

https://www.cnblogs.com/chentianwei/p/9705909.html

使用Vue cli3搭建一个用Fetch Api的组件。

https://scotch.io/@bedakb/lets-build-type-ahead-component-with-vuejs-2-and-fetch-api

VueCli3文档https://cli.vuejs.org/zh/guide/

Fetch basic concepts

Fetch 的核心在于对 HTTP 接口的抽象，包括 Request，Response，Headers，Body，以及用于初始化异步请求的 global fetch。得益于 JavaScript 实现的这些抽象好的 HTTP 模块，其他接口能够很方便的使用这些功能。

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

Using Fetch （点击看中文文档）

Fetch api 提供了一个js接口，用于访问和操作HTTP管道的部分，如响应和请求。

注意

当接收到代表错误的HTTP state code时，从fetch()返回的Promise不会被标记为reject, 即状态码不是400／500。相反，它会将Promise状态标记为resolve,(resolve: false)。只有当网络硬件故障或请求被阻止时，才会标记为reject
默认，fetch不从服务器发送或接收任何cookies。要设置credentials选项。

例子：

      fetch(`http://localhost:3000/api/v1/discussions/${encodeURIComponent(url)}/comments`, {
        headers: {accept: 'application/json'},
        method: 'post',
        body: formData,
      })
      .then(response => response.json())
      .then(comment => commit('addComment', comment))

使用了箭头函数简化：

then(function(response) {
  return response.json()
})

第一个then, 把响应的结果promise对象（也是Response对象）转化为json格式。

第二个then, 执行一个函数。

Fetch basic concepts

Using Fetch （点击看中文文档）

猜你喜欢