在前端开发过程中，我们经常需要与后端 API 进行数据交互。而 fetch 方法可以实现与后端 API 数据交换，具体使用可以参阅 MDN Web Docs - Fetch API。而 npm 包 fetch-this 是对 fetch 方法的进一步封装，使其更加易用，下面就来学习一下该 npm 包的使用方法。
安装
--- ------- ---------- ------
使用方法
使用该包的方式有两种：单独使用和与 Vue.js 集成。接下来我们将详细讲解两种使用方式。
单独使用
完成安装后，我们可以创建一个 fetch.js 文件用于配置 fetch-this 包。以下是一个基本的示例代码：
------ ----- ---- ------------
----- ------- - -
-------- -
--------------- ------------------
--
------------ ---------
-
----- ----- - --- --------------
------ ------- -----以上代码中，我们首先引入了 fetch-this 包，然后配置了 options 对象，该对象包含请求头和相关信息，并创建了新的 fetch 实例。最后将 fetch 实例导出。
完成配置后，我们就可以在组件中使用 fetch 了。
------ ----- ---- ------------------- ------------------------------- -- - ---------------- --
以上代码中，我们导入了刚刚配置的 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 实例中使用其它插件的方式相同：
------------------------------------ -- - ---------------- --
上述代码中，我们在 Vue 组件中使用了 this.$http.get() 进行了 GET 请求。
配置参数
fetch-this 支持传递第二个参数配置项，包括：
headers：请求头对象credentials：请求时是否携带 cookie，可选值：include、same-origin、omittimeout：超时时间，以毫秒为单位beforeFetch：请求前的回调函数beforeResponse：请求成功且返回状态码为 200 时的回调函数afterResponse：请求完成后的回调函数
总结
在本文中，我们学习了如何使用 fetch-this 包来更加方便地使用 fetch 方法。我们可以通过单独使用或者集成到 Vue.js 项目中来使用该 npm 包。在使用 fetch-this 包时，我们还可以使用一系列配置参数来自定义请求头、请求参数等。希望本文能够对你学习 fetch-this 的使用有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600575e681e8991b448ea815