npm 包 Fetch-This 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发过程中，我们经常需要与后端 API 进行数据交互。而 fetch 方法可以实现与后端 API 数据交换，具体使用可以参阅 MDN Web Docs - Fetch API。而 npm 包 fetch-this 是对 fetch 方法的进一步封装，使其更加易用，下面就来学习一下该 npm 包的使用方法。

安装

npm install fetch-this --save

使用方法

使用该包的方式有两种：单独使用和与 Vue.js 集成。接下来我们将详细讲解两种使用方式。

单独使用

完成安装后，我们可以创建一个 fetch.js 文件用于配置 fetch-this 包。以下是一个基本的示例代码：

-- -------------------- ---- -------
------ ----- ---- ------------

----- ------- - -
  -------- -
    --------------- ------------------
  --
  ------------ ---------
-

----- ----- - --- --------------

------ ------- -----

以上代码中，我们首先引入了 fetch-this 包，然后配置了 options 对象，该对象包含请求头和相关信息，并创建了新的 fetch 实例。最后将 fetch 实例导出。

完成配置后，我们就可以在组件中使用 fetch 了。

import fetch from '../utils/fetch.js'

fetch.get('/api/user').then(res => {
  console.log(res)
})

以上代码中，我们导入了刚刚配置的 fetch.js 并使用 fetch.get() 方法进行 GET 请求，请求的 API 地址为 /api/user。

除此之外，还有其他 HTTP 方法可以使用，包括：

fetch.get(url, params?, config?)：发送 GET 请求
fetch.post(url, data?, config?)：发送 POST 请求
fetch.patch(url, data?, config?)：发送 PATCH 请求
fetch.put(url, data?, config?)：发送 PUT 请求
fetch.delete(url, config?)：发送 DELETE 请求

在使用 POST、PATCH、PUT 方法时，可以通过向 data 内传入数据来发送数据到后端 API。

与 Vue.js 集成

fetch-this 也可以集成到 Vue.js 项目中，这样我们可以更加方便地使用该 npm 包。以下是一个基本的示例：

-- -------------------- ---- -------
------ --- ---- -----
------ ----- ---- ------------

----- ------- - -
  -------- -
    --------------- ------------------
  --
  ------------ ---------
-

------------------- - --- --------------

以上代码中，我们将 fetch-this 包作为一个插件引入 Vue 实例并创建了一个 fetch 实例。最后，我们将该实例绑定到 Vue.prototype.$http，使其可以通过 this.$http 在 Vue 实例中使用。

使用这个插件的方式与在 Vue 实例中使用其它插件的方式相同：

this.$http.get('/api/user').then(res => {
  console.log(res)
})

上述代码中，我们在 Vue 组件中使用了 this.$http.get() 进行了 GET 请求。

配置参数

fetch-this 支持传递第二个参数配置项，包括：

headers：请求头对象
credentials：请求时是否携带 cookie，可选值：include、same-origin、omit
timeout：超时时间，以毫秒为单位
beforeFetch：请求前的回调函数
beforeResponse：请求成功且返回状态码为 200 时的回调函数
afterResponse：请求完成后的回调函数

总结

在本文中，我们学习了如何使用 fetch-this 包来更加方便地使用 fetch 方法。我们可以通过单独使用或者集成到 Vue.js 项目中来使用该 npm 包。在使用 fetch-this 包时，我们还可以使用一系列配置参数来自定义请求头、请求参数等。希望本文能够对你学习 fetch-this 的使用有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600575e681e8991b448ea815