axios封装成api

2025-03-16 0 24

《axios封装成api》

解决方案

在现代Web开发中,前后端分离架构越来越普遍。为了简化与后端API交互的代码,提高代码的可维护性和复用性,我们将axios进行封装成API是一个很好的解决方案。通过封装,可以集中处理请求配置、错误处理等通用逻辑,使业务代码更加简洁。

基本封装

创建一个名为api.js的文件来编写封装代码。
```javascript
import axios from 'axios';

// 创建axios实例
const instance = axios.create({
baseURL: 'https://api.example.com', // 根据实际情况设置基础url
timeout: 5000, // 请求超时时间
});

// 导出一个请求方法
export const fetchData = async (url,params) => {
try {
const response = await instance.get(url,{
params:params
});
return response.data;
} catch (error) {
console.error('请求失败:', error);
throw error;
}
};
``
这里创建了一个axios实例,并设置了基础url和超时时间等配置。然后导出了一个简单的
fetchData`函数用于发起get请求,同时包含了基本的错误处理。

添加

为了增强功能,我们可以添加来处理请求和响应。
```javascript
import axios from 'axios';

const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000,
});

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

// 响应
instance.interceptors.response.use(
response => {
// 对响应数据做点什么
return response;
},
error => {
// 对响应错误做点什么
if(error.response.status === 401){
// 处理未授权的情况,例如跳转登录页面
}
return Promise.reject(error);
}
);

export const fetchData = async (url,params) => {
try {
const response = await instance.get(url,{
params:params
});
return response.data;
} catch (error) {
throw error;
}
};
```

根据不同业务场景封装

如果项目中有不同的业务模块,可以根据业务需求进一步封装。例如对于用户管理模块:
```javascript
import { fetchData } from './api'; // 引入上面封装的基础请求方法

export const getUserList = async (params) => {
return fetchData('/users/list',params);
};

export const addUser = async (data) => {
try {
const response = await instance.post('/users/add',data);
return response.data;
} catch (error) {
throw error;
}
};
```
这样针对不同业务的功能就有了专门的API接口函数,方便调用。

Image

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

源码下载