tb-vue-http 是一个基于 Vue.js 的 HTTP 请求库，可以简化前端开发中的 HTTP 请求操作。适用于 Vue.js 2.0 及以上版本。本教程将介绍如何使用 tb-vue-http。
安装
你可以通过 npm 安装 tb-vue-http。
npm install tb-vue-http --save
引入
在 Vue.js 应用中使用 tb-vue-http，你需要在 main.js 中引入 tb-vue-http。
import Vue from 'vue' import TbVueHttp from 'tb-vue-http' Vue.use(TbVueHttp)
使用
tb-vue-http 为 Vue.js 添加了 $http 属性，你可以在组件中直接使用 $http 发起 HTTP 请求。下面是一个发送 GET 请求的示例：
this.$http.get('/api/data')
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
})tb-vue-http 支持以下 HTTP 方法：
get(url, config)delete(url, config)head(url, config)options(url, config)post(url, data, config)put(url, data, config)patch(url, data, config)
其中，config 是可选参数，支持的选项如下：
params：请求参数，会自动转换为查询字符串headers：请求头，可以设置请求头的 Content-Type 和 Authorization 等信息timeout：请求超时时间，单位是毫秒，默认为 0，表示没有超时时间限制
下面是一个发送 POST 请求的示例：
-- -------------------- ---- -------
---------------------------- -
----- -------
---- --
-- -
-------- -
--------------- ------------------
-
--
-------------- -- -
--------------------------
--
------------ -- -
------------------
--响应数据
tb-vue-http 的响应数据包括以下属性：
data：响应的数据status：HTTP 状态码statusText：HTTP 状态文本headers：响应头，包括 Content-Type 等信息config：请求的配置信息
在处理响应数据时，你可以根据状态码处理成功或失败的情况。下面是一个根据状态码判断请求成功或失败的示例：
-- -------------------- ---- -------
---------------------------
-------------- -- -
-- ---------------- --- ---- -
--------------------------
- ---- -
--------------------
-
--
------------ -- -
------------------
--拦截器
tb-vue-http 支持拦截请求和响应，在请求或响应被 then 或 catch 处理前拦截它们。你可以为 tb-vue-http 添加多个拦截器，它们按照添加顺序依次执行。
下面是一个添加请求拦截器和响应拦截器的示例：
-- -------------------- ---- -------
------------------------------------------ -- -
---------------------------- - ------- - - ----------
------ ------
-- ----- -- -
------ ---------------------
--
--------------------------------------------- -- -
-- ---------------- --- ---- -
------ --------
- ---- -
------ -----------------------------------
-
-- ----- -- -
------ ---------------------
--其中，getToken() 是一个获取访问令牌的方法。
小结
tb-vue-http 是一个方便的 HTTP 请求库，可以简化前端开发中的 HTTP 请求操作。在使用时，你需要引入并注册 tb-vue-http，然后使用 $http 属性发起 HTTP 请求。tb-vue-http 支持拦截器，你可以为它添加请求拦截器和响应拦截器，以便在请求或响应被处理前拦截它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822c93