Vue-cli3 axios route to intercept and use

1. Install axios (in the project)

npm i axios

　　

2. Create axios.intercept.js follows

// Configure Axios interceptor 
Import from Axios 'Axios'; 
Import from Store '../store'; // additional token 
// Create instance Axios 
const = axios.create-Service ({ 
    // the baseURL: process.env.VUE_APP_URL, // api of VUE_APP_URL 
    timeout: 50000 // request time 
}); 
// request interceptors, do some processing before the request 
service._requestCount = 0; // interface requests accumulated 
service.interceptors.request.use ( 
    config => { 
        ; service._requestCount ++ 
        ( 'handleLoading', to true) store.commit; // interface requests loading 
        return config 
    }, 
    error => { 
        the console.log (error) // for Debug 
        Promise.reject (error) 
    } 
)

// response blocker, return data after some processing 
service.interceptors.response.use ( 
    Response => { 
        service._requestCount--; 
        IF (service._requestCount <= 0) {// if the accumulated value is less than 0 interface request so Close loading 
            store.commit ( 'handleLoading', to false); 
        } 
        const RES = response.data; 
        return RES; 
    }, 
    error => { 
        service._requestCount--; 
        IF (service._requestCount <= 0) { 
            store.commit ( 'handleLoading', to false); 
        } 
        Promise.reject ( 'abnormal', error); 
    } 
) 
Export default-Service

　　

 

3. Use interceptor

Create Request Interface module UserRequest.js e.g.

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=>{});
        }
}