《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进行简单的封装,可以使我们的前端项目在进行网络请求时更加简洁、高效并且易于维护。