Vue和uni-app引入uView组件中的http请求http.interceptor.js文件的方法

Vue和uni-app引入uView组件中的http请求拦截器http.interceptor.js文件的方法

具体写法，建议在写在/common/http.interceptor.js(如无此文件夹和文件，请手动创建，一次配置，全局通用)，写完之后，


在uni-app项目根目录的 main.js  文件的 new Vue() 和 app.$mount() 之间引入uView组件中的拦截器http.interceptor.js文件，在new Vue()后面的原因是，外部JS文件需要引用vue的实例，也即this对象，要等main.js中通过new创建了实例之后才能引用。 在app.$mount()之前的原因是，在Vue挂载this实例(也即初始化App.vue)之前配置请求信息，所以在App.vue中也能正常发出请求。

以下为在main.js中的引入示例：

1. // main.js
   
2. 
   
3. // 此为main.js本身已有内容
   
4. const app = new Vue({
   
5.   ...App
   
6. })
   
7. 
   
8. // http拦截器，此为需要加入的内容，如果不是写在common目录，请自行修改引入路径
   
9. import httpInterceptor from '@/common/http.interceptor.js'
   
10. // 这里需要写在最后，是为了等Vue创建对象完成，引入"app"对象(也即页面的"this"实例)
    
11. Vue.use(httpInterceptor, app)
    
12. 
    
13. app.$mount()

复制代码

下面为配置信息的具体内容：

1. // common/http.interceptor.js
   
2. 
   
3. // 这里的Vue为Vue对象(非创建出来的实例)，vm为main.js中“Vue.use(httpInterceptor, app)”这一句的第二个参数，
   
4. // 为一个Vue的实例，也即每个页面的"this"
   
5. // 如果需要了解这个install方法是什么，请移步：https://uviewui.com/components/vueUse.html
   
6. const install = (Vue, vm) => {
   
7.         // 此为自定义配置参数，具体参数见上方说明
   
8.         Vue.prototype.$u.http.setConfig({
   
9.                 baseUrl: 'https://api.example.com',
   
10.                 loadingText: '努力加载中~',
    
11.                 loadingTime: 800,
    
12.                 // 设置自定义头部content-type
    
13.                 // header: {
    
14.                 //         'content-type': 'xxx'
    
15.                 // }
    
16.                 // ......
    
17.         });
    
18. }
    
19. 
    
20. export default {
    
21.         install
    
22. }

复制代码