vue axios请求封装
用来总结和学习，便于自己查找
文章目录
一、为什么使用请求统一封装?
二、 安装 Axios？
三、创建 Axios 封装文件 ？
3.1 重要代码
四、在 Vue 项目中如何使用封装好Axios？
一、为什么使用请求统一封装?
1. 减少重复代码
请求的 baseURL、超时设置、请求头处理（如 token 认证）、错误处理等。通过统一封装，这些公共逻辑只需编写一次，在需要请求时直接调用封装后的接口即可，大大减少了重复代码。
2. 集中管理
统一封装请求后，所有的请求配置、拦截器、错误处理逻辑都可以集中管理。当 API 变化时，或者需要对请求逻辑做统一调整时，只需修改封装文件中的代码，避免了在各个组件中查找和修改的麻烦。
例如，后端 API 地址变化了，只需修改封装文件中的 baseURL，而不需要修改每个 API 调用的地方。
3. 提高代码可维护性
通过请求的统一封装，所有 API 请求都集中到一处进行管理。在多人协作开发中，如果每个开发者都自己写请求逻辑，容易导致代码风格不一致、错误处理不统一等问题。统一封装能够提高代码的一致性、可维护性，方便后期调试和维护。
4. 统一错误处理
在请求拦截器中，可以统一处理不同的 HTTP 响应状态码（如 401 未授权、500 服务器错误等），给用户友好的提示，避免在各个组件中重复编写相同的错误处理逻辑。比如，401 未认证时，可以统一跳转到登录页。
二、安装 Axios？
npm install axios
三、创建 Axios 封装文件 ？
3.1 重要代码
代码有注释
// utils/request.js
import axios from 'axios';
import {
Message } from 'element-ui'; // 引入 Element UI 的消息组件
// 创建 axios 实例
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000,
});
// 请求拦截器
instance.interceptors.request.use(config => {
// config.headers['Authorization'] = localStorage.getItem('token');
return config;
}, error => {
Message.error('请求错误: ' + error.message); // 替换为 Element UI 消息提示
return Promise.reject(error);
});
// 响应拦截器
instance.interceptors.response.use(
response => {
const data = response.data;
if (data && !data.Status) {
// 判断 Status 是否为 false
Message.error(`Error: ${
data.Message || 'Unknown error'}`); // 使用 Element UI 消息提示
return data;;
} else {
return data; // 返回整个响应数据
}
},
error => {
if (error.response) {
// 处理服务器返回的错误响应
Message.error(`Error code ${
error.response.status}: ${
error.response.statusText}`);
} else {
// 处理网络问题
Message.error('No response from server');
}
return Promise.reject(error);
}
);
export default instance;
四、在 Vue 项目中如何使用封装好Axios？
再建一个api文件引入前面封装的
1、api.js
import request from '../utils/request';
export function GetBedInfo(params) {
return request({
url: '',
method: 'get',
params,
});
}
2、组件里面使用
async buildings1() {
try {
const data = {
action: "GetBedInfo",
supplier_id: "参数",
};
const response = await GetBedInfo(data);
if (response.Status) {
console.log("this.dataList", response.Result)
this.dataList = response.Result;
} catch (error) {
// console.error('Registration error:', error);
}
},
process.env.VUE_APP_BASE_API这个就是后端的地址，我讲过配置环境变量可以自己找在之前的文章