当前位置：首页 > news >正文

axios的使用，处理请求和响应，axios拦截器

news 2025/6/20 16:03:14

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.dataif (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封装好的类