axios封装分布调用

《axios封装分布调用》

解决方案

在现代前端开发中，与后端进行数据交互是必不可少的环节。Axios 是一个基于 promise 的 HTTP 库，常用于发起 AJAX 请求。为了使项目中的请求更加简洁、易于维护，我们可以对 Axios 进行封装，实现分布调用。通过封装，可以集中处理请求拦截、响应拦截、错误处理等通用逻辑，提高代码的复用性和可读性。

一、基础封装

创建一个 axios 实例，并配置一些默认参数。
```javascript
import axios from 'axios';

const service = axios.create({
baseURL: '/api', // 根据实际情况设置基础路径
timeout: 5000 // 超时时间
});

// 请求
service.interceptors.request.use(
config => {
// 可以在这里添加token等信息到请求头
const token = localStorage.getItem('token');
if (token) {
config.headers['Authorization'] = Bearer ${token};
}
return config;
},
error => {
Promise.reject(error);
}
);

// 响应
service.interceptors.response.use(
response => {
const res = response.data;
// 根据后端约定判断状态码是否成功
if (res.code !== 200) {
// 处理错误，如提示消息等
return Promise.reject(new Error(res.message || 'error'));
} else {
return res;
}
},
error => {
// 处理网络错误等情况
console.log('err' + error); // for debug
return Promise.reject(error);
}
);

export default service;
```

二、按模块分发请求

如果项目中有多个功能模块，每个模块都有自己独立的接口，可以按照模块来分发请求函数。

例如有个用户模块和商品模块：
```javascript
// user.js
import request from './request'; // 上面封装好的axios实例

export function getUserInfo() {
return request({
url: '/user/info',
method: 'get'
});
}

export function login(params) {
return request({
url: '/user/login',
method: 'post',
data: params
});
}

// product.js
import request from './request';

export function getProductList(params) {
return request({
url: '/product/list',
method: 'get',
params
});
}
```

然后在组件中就可以方便地调用对应模块的方法了。

三、使用动态路由分发

对于一些大型项目，接口众多且分散，也可以根据路由来动态分发请求。

先定义一个映射关系的对象，键为路由标识，值为对应的请求配置。
javascript const apiMap = { '/user': { info: {url: '/user/info', method: 'get'}, login: {url: '/user/login', method: 'post'} }, '/product': { list: {url: '/product/list', method: 'get'} } };
然后创建一个通用的请求函数：
javascript function dynamicRequest(path, action, params) { const route = path.split('/')[1]; const apiConfig = apiMap[route][action]; if (!apiConfig) { return Promise.reject(new Error('Invalid API')); } return request({ ...apiConfig, ...(apiConfig.method.toLowerCase() === 'get' ? {params} : {data: params}) }); }
这样在组件中可以根据路由和操作来发起请求，灵活性更高。