uView——Interceptor過濾器

簡介

　　Interceptro過濾器包含：

　　　　setConfig({}) 配置請求請求默認信息

　　　　request：過濾請求

　　　　response：過濾響應

 

意義：

　　配置信息：讓每次請求自動攜帶請求頭

　　請求：同上

　　響應：不同狀態碼做出響應

 

配置：

　　common下新建http.interceptor.js

　　main.js：全局配置對象

 

請求過濾和響應過濾方法

　　請求過濾

   　// 不記憶，直接使用文檔給的 
　　Vue.prototype.$u.http.interceptor.request = (config) => {
        config.header.Token = 'xxxxxx';
　　　　　　
　　　　　return config;
    }

　　　　參數：

　　　　　　config：配置對象

　　　　返回值：config

　　　　返回值意義：request獲取到config對象

　　　　作用：通過config對象。可以用config.header.content-type= "xxx"，為上面配置的config賦上新請求頭

　　

　　響應過濾

    Vue.prototype.$u.http.interceptor.response = (response) => {
     　　if(response.statusCode < 400 ){
　　　　　　
　　　　　　}       
    }

　　　　參數；

　　　　　　response：響應json對象

　　　　返回值：對象或者false

　　　　返回值意義：對象回調給this.$u.get("xxx").then( (res) => {} )中的res對象。

　　　　作用：對象回調給this.$u.get("xxx").then( (res) => {} )中的res對象。

	// 如果返回false，則會調用Promise的reject回調， // 並將進入this.$u.post(url).then().catch(res=>{})的catch回調中，res為服務端的返回值

使用

// http.interceptor.js
// 這里的vm，就是我們在vue文件里面的this，所以我們能在這里獲取vuex的變量，比如存放在里面的token變量
const install = (Vue, vm) => {
    // 此為自定義配置參數，具體參數見上方說明
    Vue.prototype.$u.http.setConfig({
        baseUrl: '', // 請求的本域名
        method: 'POST',
        dataType: 'json',     // 設置為json，返回后會對數據進行一次JSON.parse()
        showLoading: true, // 是否顯示請求中的loading
        loadingText: '請求中...', // 請求loading中的文字提示
        loadingTime: 800, // 在此時間內，請求還沒回來的話，就顯示加載中動畫，單位ms
        originalData: true, // 是否在攔截器中返回服務端的原始數據，-----原始數據指源json
        loadingMask: true, // 展示loading的時候，是否給一個透明的蒙層，防止觸摸穿透
        // 配置請求頭信息
        header: {
            'content-type': 'application/json;charset=UTF-8'
        },
    });

　　// 請求過濾：自動添加請求頭
    Vue.prototype.$u.http.interceptor.request = (config) => {
        
    }
    //響應過濾，對不同的狀態作響應
    Vue.prototype.$u.http.interceptor.response = (response) => {
         if( response.statusCode < 400 ){
　　　　　　　vm.$u.toast('驗證失敗，請重新登錄');
　　　　　　　return false;
　　　　　　}
　　　　　　return response.data;
    }
}    
export default {
    install
}

 

// main.js：作配置
.......................
.......................
const app = new Vue({
    ...App
})

// http攔截器，此為需要加入的內容，如果不是寫在common目錄，請自行修改引入路徑
import httpInterceptor from '@/common/http.interceptor.js'
// 這里需要寫在最后，是為了等Vue創建對象完成，引入"app"對象(也即頁面的"this"實例)
Vue.use(httpInterceptor, app)

app.$mount()