Vue-cli3 axios路由攔截 並使用

1.安裝axios (在項目中)

npm i axios

　　

2.創建axios.intercept.js  內容如下

// 配置axios攔截器
import axios from 'axios';
import store from '../store'; // 追加token
// 創建axios實例
const service = axios.create({
    // baseURL: process.env.VUE_APP_URL, // api 的 VUE_APP_URL
    timeout: 50000 // 請求超時時間
});
// request攔截器,在請求之前做一些處理
service._requestCount = 0; // 接口請求累加
service.interceptors.request.use(
    config => {
        service._requestCount++;
        store.commit('handleLoading', true); // 接口請求loading
        return config
    },
    error => {
        console.log(error) // for debug
        Promise.reject(error)
    }
)

// response 攔截器,數據返回後進行一些處理
service.interceptors.response.use(
    response => {
        service._requestCount--;
        if(service._requestCount<=0){ // 如果接口請求累加值小於0 那麼關閉loading
            store.commit('handleLoading', false);
        }
        const res = response.data;
        return res;
    },
    error => {
        service._requestCount--;
        if(service._requestCount<=0){
            store.commit('handleLoading', false);
        }
        Promise.reject('異常', error);
    }
)
export default service

　　

 

3.使用攔截器

創建接口請求模塊 例如 UserRequest.js

import service from './axios.intercept'; // 導入剛纔 創建的攔截器

const interfaceAddress = process.env.VUE_APP_URL + '/user'; // 全局請求地址
const requestInterfaceList = {
    queryUsers: interfaceAddress + '/users', // 具體接口地址
    queryUserDetails: interfaceAddress + '/users/details'
}

export const UserRequest {
    queryUsers(params){
        const sendObj = {};
        ({
            pageNo: sendObj.pageNo,// 頁碼
            pageSize: sendObj.pageSize,// 每頁條數
            shopCodeOrName: sendObj.shopCodeOrName,// 網點code或名稱關鍵字
        } = params);
        return service({
            url: requestInterfaceList.queryUsers,
            method: 'get',
            params: sendObj
        })
    }
}        

　　

4.使用 封裝好的 接口請求

import {UserRequest} from "../../../../apis/UserRequest"; // 導入剛纔寫的UserRequest.js

在組件中使用
export default {
        name: "app-invoicing-record",
        created(){
           // 使用
           UserRequest.queryUsers({id: 1234}).then(res=>{});
        }
}