2024年1月Java项目开发指南11：axios请求与接口统一管理
1.2024年1月Java项目开发指南1：环境与工具准备2.2024年1月Java项目开发指南2：项目设计3.2024年1月Java项目开发指南3：创建Springboot项目4.2024年1月Java项目开发指南4：IDEA里配置MYSQL5.2024年1月Java项目开发指南5：controller、service、mapper6.2024年1月Java项目开发指南6：接口测试7.2024年1月Java项目开发指南7：增删改查与接口测试8.2024年1月Java项目开发指南8：统一数据返回格式9.2024年1月Java项目开发指南9：密码加密存储10.2024年1月Java项目开发指南10：vite+Vue3项目创建
11.2024年1月Java项目开发指南11：axios请求与接口统一管理
12.2024年1月Java项目开发指南12：前后端分离项目跨域问题解决13.2024年1月Java项目开发指南13：登录注册实现14.2024年1月Java项目开发指南14：关于post中的body和param以及java中的@RequestBody和@RequestParam15.2024年1月Java项目开发指南15：vue3+AntDesignVue 设计页面16.2024年1月Java项目开发指南16：用户自由选择字段查询、是否模糊查询17.2024年1月Java项目开发指南17：自动接口文档配置18.2024年1月Java项目开发指南19：Vue动态页面渲染19.2024年1月Java项目开发指南18：自定义异常输出axios中文网：https://www.axios-http.cn/
安装
npm install axios
配置
在src下创建apis文件夹
创建axios.js文件
配置如下：
// src/apis/axios.js
import axios from 'axios';
// 创建axios实例
const service = axios.create({
baseURL:"http://127.0.0.1:8080", // api的base_url，可以在.env文件中配置
timeout: 5000 // 请求超时时间
});
// 请求拦截器
service.interceptors.request.use(
config => {
// 可以在这里添加一些请求前的逻辑，比如添加token到headers
let token = localStorage.getItem("token")
config.headers['Authorization'] = 'Bearer ' + token;
return config;
},
error => {
// 处理请求错误
console.error(error); // for debug
Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
response => {
// 可以在这里对返回的数据进行一些处理
return response.data;
},
error => {
// 处理响应错误
console.error('err' + error); // for debug
return Promise.reject(error);
}
);
export default service;
baseURL:"http://127.0.0.1:8080", // api的base_url，可以在.env文件中配置
timeout: 5000 // 请求超时时间
上面这俩信息改成自己实际的，尤其是baseURL，其他的可以直接抄
创建api.js，配置如下
// api.js
import axiosInstance from './axios'; // 导入在axios.js中配置好的axios实例
export default {
}
// 统一的get请求方法
export function get(url, params = {}) {
return axiosInstance.get(url, { params });
}
// 统一的post请求方法
export function post(url, data = {}) {
return axiosInstance.post(url, data);
}
// 统一的put请求方法（通常用于更新资源）
export function put(url, data = {}) {
return axiosInstance.put(url, data);
}
// 统一的delete请求方法
export function deleteRequest(url, params = {}) {
// 注意：axios的delete方法第二个参数是config对象，如果要传递参数，通常使用params
return axiosInstance.delete(url, { params });
}
这个文件可以直接抄。
下一篇笔记，我们尝试写出登录注册页面与功能
版 权 声 明
作者：萌狼蓝天
QQ：3447902411（仅限技术交流，添加请说明方向)
转载请注明原文链接：https://www.cnblogs.com/zwj/p/17988332/project202401-11
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步