Shadow
Vue封装全局公共请求
09/04
Vue封装全局公共请求
创建一个名为http.js的新文件，文件位置自己定，用于配置全局请求包装：
// http.js
import axios from 'axios';
// 创建一个 Axios 实例
const axiosInstance = axios.create({
baseURL: 'https://api.example.com', // 您的 API 基础 URL
timeout: 10000, // 请求超时时间
});
// 添加请求拦截器
axiosInstance.interceptors.request.use(
(config) => {
// 在请求发送之前可以在这里进行操作，例如添加通用的请求头
config.headers.common['Authorization'] = 'Bearer YourAccessToken';
return config;
},
(error) => {
return Promise.reject(error);
}
);
// 添加响应拦截器
axiosInstance.interceptors.response.use(
(response) => {
// 在响应返回之前可以在这里进行操作，例如处理错误响应
return response;
},
(error) => {
// 处理请求错误，可以进行全局错误处理
return Promise.reject(error);
}
);
export default axiosInstance;
在Vue3应用中，挂载全局HTTP请求
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import http from './http'; // 导入 http.js 文件
const app = createApp(App);
// 将 http 实例挂载到全局配置对象的 globalProperties 中
app.config.globalProperties.$http = http;
app.mount('#app');
在Vue2应用中，挂载全局HTTP请求
// main.js
import Vue from 'vue';
import App from './App.vue';
import http from './http'; // 导入 http.js 文件
Vue.config.productionTip = false;
// 将 http 实例挂载到 Vue 实例的原型上
Vue.prototype.$http = http;
new Vue({
render: h => h(App),
}).$mount('#app');
版权属于：
Dcr163的博客
本文链接：
https://dcr163.cn/697.html（转载时请注明本文出处及文章链接）
