在前端开发中，使用一个好的请求库可以大大提高开发效率和代码质量。今天，我要介绍的是 nb-vue-request，这个基于 Vue 和 Axios 的请求库提供了一些强大的特性，让你的前端请求变得更加简单、快捷、灵活。
安装
安装 nb-vue-request 很简单，只需要使用 npm 进行安装即可：
npm install nb-vue-request --save
基本用法
在使用 nb-vue-request 之前，需要先在 Vue 中进行初始化，并定义一些全局的配置。类似于这样：
import Vue from 'vue'
import NbVueRequest from 'nb-vue-request'
Vue.use(NbVueRequest, {
baseApi: 'https://api.example.com' // 接口基础路径
})上面的代码中，我们通过 Vue.use() 挂载了 nb-vue-request，同时传递了一些全局配置项。其中，baseApi 是接口的基础路径，在使用请求函数时会自动拼接在前面。
接下来，我们就可以愉快地发起请求了！样例代码如下：
this.$request.get('/user', {id: 123}).then(response => {
console.log(response.data)
}).catch(error => {
console.error(error)
})nb-vue-request 提供了丰富、易用的 API，支持 GET、POST、PUT、DELETE 等 HTTP 请求方法，带上请求参数，则通过 Promise 方式返回请求结果或错误信息。
高级用法
除了基本的请求方式，nb-vue-request 还提供了一些高级特性，让你的请求代码变得更简单、灵活。下面我们就来介绍几个常用的扩展功能。
拦截器
nb-vue-request 支持拦截器，可以在请求发送以及返回时进行一些处理，如在请求中添加请求头，进行全局错误处理等。使用拦截器，你可以在每一次请求前、请求后进行一些处理。
-- -------------------- ---- -------
----- -------- - ----------------------
---------------------------------------- -- -
---------------------------- - ----------
------ ------
--
------------------------------------------- -- -
----- ---- - -------------
-- ---------- --- -- -
------ ---------------------
- ---- -
------ --------------------
-
-- ----- -- -
-------------
------ ---------------------
--
--------------------- ---- ------------------- -- -
---------------------
-------------- -- -
--------------------
--代码中，我们通过 this.$request.create() 创建了一个新的实例，并使用 instance.interceptors.request.use() 和 instance.interceptors.response.use() 定义了请求拦截器和响应拦截器。通过这样的方式，我们可以在请求前加入 token 请求头，并对返回的数据进行全局错误处理。
单独配置
除了全局配置之外，还可以在每次调用请求方法时单独传入配置项，以覆盖全局配置。如下：
this.$request.get('/article', {
params: { id: 1 },
baseApi: 'https://other.api.example.com'
}).then(response => {
console.log(response.data)
}).catch(error => {
console.error(error)
})在上面的样例中，我们单独传递了 baseApi 和 params 配置项，用于在本次请求中覆盖全局配置项中的相应值。
自定义共享实例
有时候，我们需要创建多个实例来分别应对不同的请求，而不想每次都定义新的配置。这个时候，我们可以通过自定义共享实例来实现。
-- -------------------- ---- -------
------ --- ---- -----
------ ------------ ---- ----------------
----- -------- - --- --------------
-------- -------------------------
--
------------------------------ - --------
------------------------ - -------- ----- ------- -
------ ----------------- ----------------- -
------- ------
---
-以上代码中，我们通过创建一个新的 NbVueRequest 实例并将其存储在 Vue.prototype 上，可以通过 this.$requestInstance 进行访问。同时，我们也可以定义自己的请求方法，通过单独传递一些不同的配置项来实现不同的请求。
总结
通过本篇教程，我们介绍了 nb-vue-request 的基本用法和一些高级特性，你可以根据自己的需求和实际场景选择不同的用法，以提高你的开发效率和代码质量。相信通过这篇文章的学习，您已经对 nb-vue-request 有了更加深入的了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cda81e8991b448e685c