主题
多实例场景实战(不同后端服务)
在大型项目中,通常需要调用多个后端服务,例如用户服务、订单服务和支付服务。使用 Axios 多实例可以为每个服务配置独立的 baseURL、请求头和拦截器,方便管理。
1. 创建多个 Axios 实例
javascript
import axios from "axios";
// 用户服务实例
export const userApi = axios.create({
baseURL: "https://user.example.com/api",
timeout: 5000,
});
// 订单服务实例
export const orderApi = axios.create({
baseURL: "https://order.example.com/api",
timeout: 7000,
});
// 支付服务实例
export const paymentApi = axios.create({
baseURL: "https://payment.example.com/api",
timeout: 10000,
});2. 为不同实例添加拦截器
javascript
// 用户服务请求拦截器
userApi.interceptors.request.use((config) => {
config.headers["Authorization"] = `Bearer ${localStorage.getItem(
"user_token"
)}`;
return config;
});
// 订单服务响应拦截器
orderApi.interceptors.response.use(
(response) => response.data,
(error) => Promise.reject(error)
);3. 使用多实例发送请求
javascript
// 获取用户信息
userApi.get("/profile").then((data) => console.log("用户信息:", data));
// 创建订单
orderApi
.post("/create", { itemId: 123, quantity: 2 })
.then((data) => console.log("订单创建成功:", data));
// 支付请求
paymentApi
.post("/pay", { orderId: 456 })
.then((data) => console.log("支付成功:", data));4. 优势
- 独立配置:每个实例可以有不同 baseURL、timeout、headers;
- 灵活管理:便于区分不同后端服务的请求逻辑;
- 提高可维护性:减少全局配置冲突,便于扩展和调试。
💡 小提示:在多服务项目中使用 Axios 多实例可以让请求逻辑更加清晰、独立,提高项目的可维护性和开发效率。