1、axios官网

https://www.axios-http.cn/docs/interceptors 

2、安装

npm install axios

3、在onMouunted钩子函数中使用axios来发送请求，接受响应

 

4.出现的问题：

（1） 但是如果发送请求请求时间过长，回出现请求待处理的情况，用户体验很不好，没有画面，我们可以加一个loding遮罩层，提示用户正在加载中，但是如果没个请求都手动添加，代码冗余

 

（2） 每个请求都要考虑，程序报错的情况，都需要catch一下，处理下异常，而且在拿数据时我们后端写了统一返回格式，但是前端响应的数据res里我们的数据被一层一层包裹着，每次都要一层一层的拿，代码冗余

 

5、解决方法：
 使用axios的拦截器

 新建一个http文件夹，新建index.ts文件用于定义请求和响应拦截器，在请求和响应拦截器中解决以上问题

import axios from 'axios'
import { ElMessage, ElLoading } from 'element-plus'
const config = {
    baseURL: '',
    timeout: 30 * 1000,
    withCredentials: true,
}

let loading: any
class Http {
    myAxios: any;
    constructor(config: any) {
        this.myAxios = axios.create(config);
        // 添加请求拦截器
        this.myAxios.interceptors.request.use(function (config: any) {
            //在发送请求时加载loading层
            loading = ElLoading.service({
                lock: true,
                text: '加载中...',
                background: 'rgba(0, 0, 0, 0.7)',
            })

            return config;

        }, function (error: any) {
            // 对请求错误做些什么
            loading.close()
            return Promise.reject(error);
        });
        // 添加响应拦截器
        this.myAxios.interceptors.response.use(function (response: any) {
            //在响应后关闭loading层
            loading.close()
            //取出响应的数据进行判断
            const { code, message, data } = response.data

            if (code == 0) {
                return data
            } else if (code == undefined) {
                return response
            } else {

                ElMessage.error(message)
                return Promise.reject(message);
            }


        }, function (error: any) {
            loading.close()
            return Promise.reject(error);
        });
    }
    get<T>(url: string, params?: object, data = {}): Promise<any> {
        return this.myAxios.get(url, { params, ...data });
    }

    post<T>(url: string, params?: object, data = {}): Promise<any> {
        return this.myAxios.post(url, params, data);
    }

    put<T>(url: string, params?: object, data = {}): Promise<any> {
        return this.myAxios.put(url, params, data);
    }

    delete<T>(url: string, params?: object, data = {}): Promise<any> {
        return this.myAxios.delete(url, { params, ...data });
    }

}


export default new Http(config);

在页面中使用时，直接使用用axios封装好的类

 

结果：