ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

简单封装axios

2026/9/17 23:49:37 拓冰建站 浏览量
简单封装axios

目录

  • 一、代码解读
  • 二、整体代码

一、代码解读

import axios from ‘axios’;

创建一个名为 instance 的 Axios 实例,配置默认的请求地址和超时时间

const instance = axios.create({baseURL: 'http://localhost:8085',timeout: 5000,
});

请求拦截器,用于在请求发送前进行处理,比如在请求头中添加 token ,在请求发送之前,如果有需要,可以在请求头中加入认证信息

instance.interceptors.request.use((config) => {// config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;return config;},(error) => {return Promise.reject(error);}
);

响应拦截器,用于统一处理后端返回的错误信息

instance.interceptors.response.use((response) => {// 对后端返回的数据进行统一处理const data = response.data;// 如果返回的状态码不是 200,则输出错误信息到控制台if (data.code !== 200) {console.error(`Error: ${data.message}`);}return data;},(error) => {// 处理响应错误,输出错误信息到控制台console.error('Response Error:', error);return Promise.reject(error);}
);

封装 GET 请求方法,支持传入请求地址和参数

function get(url, params = {}) {return instance.get(url, { params });
}

封装 POST 请求方法,支持传入请求地址和数据

function post(url, data = {}) {return instance.post(url, data);
}

封装上传文件的方法,支持传入请求地址和文件

function uploadFile(url, file) {// 创建一个 FormData 对象,用于上传文件const formData = new FormData();formData.append('file', file);// 使用 POST 方法上传文件,并设置请求头的 Content-Type 为 multipart/form-datareturn instance.post(url, formData, {headers: {'Content-Type': 'multipart/form-data',},});
}

导出封装好的 GET、POST 和上传文件的方法

export { get, post, uploadFile };

二、整体代码

import axios from 'axios';const instance = axios.create({baseURL: 'http://localhost:8085',timeout: 5000,
});instance.interceptors.request.use((config) => {// config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;return config;},(error) => {return Promise.reject(error);}
);instance.interceptors.response.use((response) => {const data = response.data;if (data.code !== 200) {console.error(`Error: ${data.message}`);}return data;},(error) => {console.error('Response Error:', error);return Promise.reject(error);}
);function get(url, params = {}) {return instance.get(url, { params });
}function post(url, data = {}) {return instance.post(url, data);
}function uploadFile(url, file) {const formData = new FormData();formData.append('file', file);return instance.post(url, formData, {headers: {'Content-Type': 'multipart/form-data',},});
}export { get, post, uploadFile };