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 是否为 falseMessage.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这个就是后端的地址，我讲过配置环境变量可以自己找在之前的文章
