TS封装axios

import axios, {AxiosInstance, AxiosRequestConfig, AxiosPromise, AxiosResponse, AxiosError} from 'axios'
import {ElLoading, ElMessage, LoadingOptions, ElMessageBox} from 'element-plus'

import {LoadingInstance} from "element-plus/es/components/loading/src/loading";

import {storage} from '@/utils/storage'
import {ACCOUNT_TOKEN} from "@/store/const";
import {store} from '@/store'
import {useAccountStore} from '@/store/modules/account'

interface AxiosServiceConfig extends AxiosRequestConfig {
    noLoading?: boolean, // 是否显示loading
    loadingText?: string, // loading文案
    noToken?: boolean // 是否需要token
}

interface AxiosService extends AxiosInstance {
    (config: AxiosServiceConfig): AxiosPromise
}

const service: AxiosService = axios.create({
    baseURL: "/sms_api"
})

let loadingInstance: LoadingInstance = null

const tokenExpired = () => {
    let timer = null
    return () => {
        if (timer) return
        timer = setTimeout(() => {
            ElMessageBox.alert('您的登录已过期请重新登录', '登录过期', {
                confirmButtonText: '重新登录',
                closeOnClickModal: false,
                closeOnPressEscape: false,
                showClose: false,
                type: 'warning'
            }).then(() => {
                //......
            }).finally(() => {
                clearTimeout(timer)
                timer = null
            })
        }, 500)
    }
}

const tokenExpiredFn = tokenExpired()

const loadingOptions: LoadingOptions = {
    fullscreen: true,
    lock: true,
    text: 'Loading',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
}

service.interceptors.request.use((config: AxiosServiceConfig): AxiosServiceConfig => {
    if (!config.noToken) {
        const TOKEN = storage.get(ACCOUNT_TOKEN)
        if (TOKEN) {
            config.headers['Token'] = TOKEN
        }
    }
    // 是否loading显示
    if (!config.noLoading) {
        loadingOptions.text = config.loadingText || null
        loadingInstance = ElLoading.service(loadingOptions)
    }
    return config
}, (error: AxiosError) => {
    if (loadingInstance) loadingInstance.close()
    return Promise.reject(error)
})

service.interceptors.response.use((response: AxiosResponse) => {
    const {config} = response
    if (loadingInstance && !config['noLoading']) loadingInstance.close()
    const {data: result} = response
    const {code, msg, data} = result
    if (code === 0) return data
    if (code === 401) {
        tokenExpiredFn()
        return Promise.reject(new Error(msg || '401'))
    }

    ElMessage({
        message: msg,
        grouping: true,
        type: 'error'
    })
    return Promise.reject(new Error(msg || 'Error'))

}, (error: AxiosError) => {
    if (loadingInstance) loadingInstance.close()
    ElMessage({
        message: error.message,
        grouping: true,
        type: 'error'
    })
    return Promise.reject(error)
})


export {service}
export type {
    AxiosPromise
}

使用： 

export const getMessRecordApi = (params: any): Promise<any> => {
    return service({
        url: '/api',
        noLoading: true,
        method: 'GET',
        params
    })
}


// get请求参数为params post为data