typescript,axios封装

新建文件request.ts（axios封装）

import axios, {AxiosInstance, AxiosRequestConfig, AxiosResponse} from 'axios';
import url from './url';    //请求地址
import Global_utils from "@/utils/global_utils"; //统一工具封装  
import {inside_status} from "@/utils/enum";  //返回状态枚举

axios.defaults.timeout = 6000;
axios.defaults.baseURL = url.baseUrl;

export default class request {

    private loading_axios : AxiosInstance = axios.create();

    private global_utils : Global_utils = new Global_utils();  //如果自己没有封装工具类，可以不写

    constructor() {
        this.init();
    }

    private init():void{
        this.add_interceptors(this.loading_axios,true);
    }

    private add_interceptors(requestObj : AxiosInstance , Loading : boolean):void{
        requestObj.interceptors.request.use((options : AxiosRequestConfig) : AxiosRequestConfig => {
            Loading && this.global_utils.showLoading();
            return options;
        },(err : any) : Promise =>{
            return this.outer_status_response_interceptors(err,Loading)
        });
        requestObj.interceptors.response.use((response : AxiosResponse) : AxiosResponse | Promise =>{
            Loading && this.global_utils.hideLoading();
            return this.inside_status_response_interceptors(response);
        },(err : any) : Promise =>{
            return this.outer_status_response_interceptors(err,Loading)
        })
    }

    private outer_status_response_interceptors(error : any , Loading : boolean):Promise{
        Loading && this.global_utils.hideLoading();
        const {response = {}} = error;
        return Promise.reject(response.statusText||(error && error.toString())||"未知错误");
    }

    private inside_status_response_interceptors(response : AxiosResponse) : AxiosResponse | Promise{
        const {data} = response;
        return data.code === inside_status.success ? response : Promise.reject(data.msg);
    }

    private last_status_response_interceptors(err:string, action:boolean): Promise{
        (err && action) && this.global_utils.showError(err);
        return Promise.reject(err)
    }

    public async loading_post(url : string, data : T) : Promise{
        return await this.loading_axios.post(url,data).then((res : AxiosResponse) : Promise => Promise.resolve(res)).catch((err : string) : Promise => this.last_status_response_interceptors(err , true));
    }

    public async loading_get(url : string, data : T) : Promise{
        return await this.loading_axios.get(url,{params:data}).then((res : AxiosResponse) : Promise => Promise.resolve(res)).catch((err : string) : Promise => this.last_status_response_interceptors(err , true));
    }
}

新建文件requestMethods.ts（请求方法封装）

import Axios from "@/services/request";
import {user,admin} from '@/services/url';
import {AxiosResponse} from "axios";

export interface Iff {
    (res? : object | string) : void
}

export interface Ifs {
    (error? : Promise) : void
}

class AxiosMethods {
    protected request : Axios = new Axios();
    protected disposeRESULT(RESULT : Promise,ff:Iff,fs?:Ifs):void{
        RESULT.then((res : AxiosResponse):void => ff(res.data.data)).catch((err : Promise):void =>fs&&fs(err))
    }
}

//如果不需要分管理用户和普通用户   可以不使用namespace

namespace Admin{
    export class Methods extends AxiosMethods{

        public user(data:T,ff:Iff,fs?:Ifs):void{
            this.disposeRESULT(this.request.LOADING_GET(admin.url.user,data),ff,fs)
        }

        public checkLogin(data:T,ff:Iff,fs?:Ifs):void{
            // this.disposeRESULT(this.request.NO_LOADING_NO_MESSAGE_GET(URL.checkLogin,data),ff,fs)
        }

        public login(data:T,ff:Iff,fs?:Ifs):void{
            // this.disposeRESULT(this.request.LOADING_GET(URL.login,data),ff,fs)
        }
    }
}

namespace User{
    export class Methods extends AxiosMethods{

        public user(data:T,ff:Iff,fs?:Ifs):void{
            this.disposeRESULT(this.request.LOADING_GET(user.url.user,data),ff,fs)
        }
    }
}

export {
    Admin,User
}

接口调用（vue示例）

this.$system_http.login({...this.formValidate},():void=>{
    this.checkUser() //成功回调
},():void=>{
    //失败回调  可以不用写
})