Axios 二次封装
1. 接口统一管理
- 创建一个
api
文件夹来存储所有 API 接口。 - 创建一个
index.js
文件来统一管理所有 API 接口。 - 使用 Axios 发送请求。
示例
JavaScript
// api/index.js
import axios from 'axios';
const api = {
getUser() {
return axios.get('/api/user');
},
deleteUser(id) {
return axios.delete('/api/user/' + id);
}
};
export default api;
// 使用示例
import api from './api';
api.getUser().then((response) => {
console.log(response.data);
});
2. 使用数据代理解决跨域问题
- 在
package.json
文件中添加proxy
配置。 - 在发送请求之前,将 URL 代理到代理服务器。
示例
JavaScript
// package.json
{
"proxy": "http://localhost:8080"
}
// 使用示例
import axios from 'axios';
axios.get('/api/user').then((response) => {
console.log(response.data);
});
完整代码
JavaScript
// api/index.js
import axios from 'axios';
const api = {
getUser() {
return axios.get('/api/user');
},
deleteUser(id) {
return axios.delete('/api/user/' + id);
}
};
export default api;
// main.js
import Vue from 'vue';
import App from './App.vue';
import api from './api';
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
}).$mount('#app');
// 使用示例
api.getUser().then((response) => {
console.log(response.data);
});
总结
- 可以通过接口统一管理来简化代码。
- 可以通过数据代理来解决跨域问题。