axios的简单封装

2025-03-14 0 17

Image

《axios的简单封装》

在开发中,我们经常需要与后端进行数据交互,而 axios 是一个非常流行的基于 Promise 的 HTTP 库。为了提高代码的可维护性和复用性,对 axios 进行简单的封装是一种很好的解决方案。

一、解决跨域问题和统一配置

我们可以创建一个 http.js 文件来封装 axios。解决跨域问题以及设置一些通用的基础配置,如基础URL等。

javascript
import axios from 'axios';</p>

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

<p>export default service;

这样,在项目中使用时就不用每次都写基础url了,并且如果要更换基础url,只需要在这个文件里修改一处即可。

二、请求和响应

(一)请求

可以在请求发送之前做一些处理,例如添加token到请求头中。

javascript
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
const token = localStorage.getItem('token'); // 假设token存储在localStorage中
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
);

(二)响应

当收到响应时可以对数据进行预处理,像判断状态码是否正常等。

javascript
service.interceptors.response.use(
response => {
// 对响应数据做点什么
const res = response.data;
if (res.code !== 200) { // 假设200是成功的状态码
Message.error(res.message || 'Error');
return Promise.reject(new Error(res.message || 'Error'));
} else {
return res;
}
},
error => {
// 对响应错误做些什么
console.log('err' + error); // for debug
Message.error(error.message);
return Promise.reject(error);
}
);

三、定义封装后的请求方法

为了更方便地发起不同类型的请求,我们可以定义一些常用的请求方法。

javascript
// get请求
export function fetchGet(url, params = {}) {
    return new Promise((resolve, reject) => {
        service.get(url, {
            params
        }).then(response => {
            resolve(response.data);
        }).catch(error => {
            reject(error);
        })
    });
}</p>

<p>// post请求
export function fetchPost(url, data = {}) {
    return new Promise((resolve, reject) => {
        service.post(url, data).then(response => {
            resolve(response.data);
        }).catch(error => {
            reject(error);
        })
    });
}

通过以上几种思路对axios进行简单的封装,可以使我们的前端项目在进行网络请求时更加简洁、高效并且易于维护。

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

源码下载