背景
在前端项目中，数据请求是一个常见的需求，而 axios 是一款常见的处理网络请求的库。而在 Vue 项目中，我们常常需要对 axios 进行一些二次封装，以便在组件中更加方便地使用。fary-vue-http 就是一款基于 axios 封装的 Vue 插件，提供了一些常见的数据请求操作。
安装
使用 npm 安装：
npm install fary-vue-http --save
使用
在项目中引入 fary-vue-http，并将其作为 Vue 插件来使用。示例代码如下：
import Vue from 'vue'
import faryVueHttp from 'fary-vue-http'
Vue.use(faryVueHttp, {
baseURL: '/api/v1'
})在上面的例子中，我们将 faryVueHttp 注册成了 Vue 的插件，并传入了一个选项对象，其中 baseURL 用于配置接口请求的基础 URL。
接下来，我们就可以在组件中使用 this.$http 进行数据请求了。示例代码如下：
-- -------------------- ---- -------
------ ------- -
---- -- -
------ -
--------- --
-
--
------- -- -
----------------------------
--------- -- -
------------- - --------
--
---------- -- -
------------------
--
-
-在上面的例子中，我们在组件的 mounted 钩子函数中使用了 this.$http 对 /user/list 接口进行了一个 GET 请求，并将返回的列表数据赋值给了 userList 数据。
功能
fary-vue-http 封装的功能包括：GET、POST、PUT、DELETE 四种请求方式，以及拦截器（请求拦截器和响应拦截器）。
GET 请求
对应 axios 中的 axios.get 方法。
this.$http.get(url[, config])
POST 请求
对应 axios 中的 axios.post 方法。
this.$http.post(url[, data[, config]])
PUT 请求
对应 axios 中的 axios.put 方法。
this.$http.put(url[, data[, config]])
DELETE 请求
对应 axios 中的 axios.delete 方法。
this.$http.delete(url[, config])
请求拦截器
-- -------------------- ---- -------
------------------------------------
-------- -------- -
-- -----------
------ ------
--
-------- ------- -
-- ------
------ ---------------------
-
-响应拦截器
-- -------------------- ---- -------
-------------------------------------
-------- ---------- -
-- ---------
------ --------
--
-------- ------- -
-- ------
------ ---------------------
-
-总结
以上就是 fary-vue-http 的使用教程，本插件提供了常见的数据请求操作和拦截器功能，可以方便地在 Vue 项目中使用。同时，也可以根据需要，自行扩展和修改本插件的功能。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bd081e8991b448e571d