vue3--require.ts

封装require.ts api.ts 然后在项目引用api.ts

request.js

//src/utils/request.js
import axios from 'axios'
import $store from '@/store'
// 创建 axios 实例
const service:any = axios.create({
    baseURL: '', // url = base url + request url   process.env.VUE_APP_BASE_URL
    timeout: 20000, // request timeout
})

//  请求拦截器
service.interceptors.request.use(
    (config:any)=> {
        config.headers['Content-Type'] = 'application/json;charset=UTF-8'
        config.headers['Accept'] = 'application/json'
        config.headers.Authorization = 'DDY'
        const token:any = $store.getters['token'];
        if (token && token['access_token'] && token['refresh_token']) {
            config.headers['Authorization'] = token['access_token']
            config.headers['RefreshToken'] = token['refresh_token']
        }
        return config
    },
    (error:any) => {
        return Promise.reject(error)
    }
)

// 响应拦截器
service.interceptors.response.use(
    (res:any) => {
        //届时根据后端返回success或者code值判断
        if (res.status === 200) {
            return Promise.resolve(res.data);
        } else {
            if (res.status === 401) {
                console.log('11', 11)
            }
            return Promise.reject(res)
        }
    },
    (error:any) => {
        //响应错误
        const status = error.response.status  //固定
        if (status === 400) {
            //Message.error('参数错误')
        }
        if (status === 401) {
            //Message.error('登录过期,请重新登录')
        }
        if (status === 403) {
            //Message.error('没有权限')
        }
        if (status === 404) {
            // Message.error('接口路径错误')
        }
        if (status === 500) {
            //Message.error('服务器出错')
        }
        if (status === 503) {
            //Message.error('服务器在维护')
        }
        const msg = {
            status: status,
            err_msg: error.response.data.message
        }
        return Promise.reject(msg)
    }
)
export default service;
export const myHttp:any=(url: string, data = {}, md = 'get') =>{
    const method = md.toUpperCase();
    const option:any= {
        url,
        method
    }
    if (method == 'GET' || method == 'DELETE') {
        option['params'] = data;
    } else {
        option['data'] = data;
    }
    return service(option);
}

/**
 * @description: 上传文件
 * @param {*} data fromdata
 * @param {*} option  url:url
 */
export function UploadFile(data:any = {}, option:any = {}):any {
    return service({
        url: '/' + option.url,
        method: 'post',
        data,
        headers: {
            'Content-Type': 'multipart/form-data'
        },
        transformRequest: [
            (data:any) => {
                return data
            }
        ],
    })
}

/**
 * @description: 下载文件方法
 * @param {*} url String
 * @param {*} data {}
 * @param {*} method get post
 * @param {*} fileName String
 * @return Promise
 */
export function DownLoadFile(url:string, data = {}, method = "post", fileName = ''):any {
    return new Promise((resolve, reject) => {
        service({
            url: url,
            method: method,
            [method.toLowerCase() === 'post' ? 'data' : 'params']: data,
            responseType: 'blob'
        }).then((res:any) => {
            // var resHeaders = res.headers.toJSON() || {};
            /**
             * 关于Blob 如何获取内容
             * https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
             * reader.result 包含转化为类型数组的blob
             */
            const reader:any = new FileReader();
            reader.readAsText(res.data, 'utf-8');
            // reader.readAsArrayBuffer(res.body);
            reader.addEventListener("loadend", () => {
                let toJson;

                try {
                    /**
                     * 尝试将接口返回的数据转换成json格式
                     * 接口正常情况下返回的数据流的形式，转成json数据肯定会报错。
                     * catch捕获后执行文件下载。
                     *
                     * 假如能够顺利转成json,说明接口是报错状态，返回的是错误数据
                     */
                    toJson = JSON.parse(reader.result)

                } catch (error) {
                    /*
                    * 获取reseponse headers中的 文件名
                    */
                    const disposition = res.headers['content-disposition'];
                    let newfileName = '';
                    if (disposition) {
                        newfileName = decodeURI(disposition.split('=')[1]);
                        fileName = newfileName;
                    }
                    resolve('success');
                    downFile(res.data, fileName);
                    return null;
                }
                //报错
                reject({
                    type: 'error',
                    message: toJson.msg || toJson.message || '下载错误'
                });
            });
        })
    })
}
function downFile(blob:Blob, fileName:string) {
    // if (fileName === "test") { }
    const window:any=Window;
    if (window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveBlob(blob, fileName);
    } else {
        const link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = fileName;
        link.click();
        window.URL.revokeObjectURL(link.href);
    }
}

api.ts

//api.ts
import { myHttp } from '../utils/request';
const envProxy = "/api";

export const Api:any = {
    login(data={}) {
        return myHttp(envProxy + '/auth/login', data, 'post');
    },
    logOut(data = {}) {
        return myHttp(envProxy + '/sso/auth/logOut', data, 'post');
    },
    getUserInfo(data = {}) {
        return myHttp(envProxy + '/personnel/query/getmenu', data, 'post');
    },
}

封装公共ts