1、安装axios(如果尚未安装):
npm install axios
2、创建axios实例并配置全局参数:
import axios from 'axios';
const http = axios.create({
baseURL: 'http://your-api-url.com/', // 基础URL
timeout: 1000, // 请求超时时间
// 其他全局配置...
});
// 添加请求拦截器
http.interceptors.request.use(config => {
// 可以在这里添加例如token等配置
// if (store.getters.token) {
// config.headers['Authorization'] = `Bearer ${store.getters.token}`;
// }
return config;
}, error => {
// 请求错误处理
return Promise.reject(error);
});
// 添加响应拦截器
http.interceptors.response.use(response => {
// 对响应数据做处理,例如只返回data部分
return response.data;
}, error => {
// 响应错误处理
return Promise.reject(error);
});
export default http;
3、Vue中挂载axios实例:
import Vue from 'vue';
import http from './http'; // 上面创建的axios实例
// 挂载到Vue原型,方便全局使用
Vue.prototype.$http = http;
4、现在你可以在任何Vue组件中使用this.$http来发送请求了。例如:
export default {
mounted() {
this.$http.get('/some-endpoint')
.then(response => {
console.log(response);
})
.catch(error => {
console.error(error);
});
}
}