インターセプトし、使用にVueの-CLI3 axiosルート

（プロジェクト内）axiosをインストール1.

NPM私axios

2. axios.intercept.jsを作成し、以下の

//インターセプタ設定Axios 
Axios 'Axios'からインポートし、
ストア'../store'からインポート; //追加のトークン
//インスタンスを作成しますAxios 
のconst = axios.create-サービス（{ 
    //ベースURL：process.env.VUE_APP_URL、 VUE_APP_URL用の// API 
    タイムアウト：50000 //要求時間
}）; 
//要求インターセプタは、要求の前にいくつかの処理を行う
service._requestCount = 0; //インタフェースリクエスト蓄積
service.interceptors.request.use（
    設定=> { 
        ; service._requestCount ++ 
        store.commit（真の'handleLoading'）; //インターフェイスを要求するロード
        リターン設定
    }、
    エラー=> { 
        デバッグのためにconsole.log（エラー）// 
        Promise.reject（エラー）
    } 
）

//応答ブロッカー、いくつかの処理後の戻りデータ
service.interceptors.response.use（
    => {応答
        service._requestCount--; 
        IF（service._requestCount <= 0）{//累積値が0未満インタフェース要求がある場合にそう閉じるローディング
            store.commit（falseに'handleLoading'）; 
        } 
        CONST RES = response.data; 
        戻りRES; 
    }、
    エラー=> { 
        service._requestCount--; 
        IF（service._requestCount <= 0）{ 
            store.commit（偽の'handleLoading'）; 
        } 
        Promise.reject（ '異常'、エラー）; 
    } 
）
エクスポートデフォルト・サービス・

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

インターセプトし、使用にVueの-CLI3 axiosルート

おすすめ