<think>我们参考多个引用资料，针对
Vue3（因为引用中提到了
Vue3与
Vue2的区别）封装
axios并全局使用的方法进行说明。引用[1]和[2]提到了在
Vue3中全局挂载
axios的方法，引用[3][4][5]则提供了封装和使用的示例。步骤：1.创建
axios实例并封装（通常放在utils或src目录下的http.js文件中）2.在封装的实例中设置拦截器（
请求拦截和响应拦截，引用[4]提到了
请求拦截器）3.在main.js（或类似入口文件）中将封装后的
axios挂载到全局属性4.在组件中使用全局挂载的
axios发起
请求下面详细说明：###1.封装
axios实例我们创建一个http.js文件（如src/utils/http.js）来封装
axios。```javascriptimport
axiosfrom'
axios';//创建
axios实例constservice=
axios.create
({baseURL:process.env.
VUE_APP_BASE_API,//从环境变量获取基础URLtimeout:5000//
请求超时时间}
);//
请求拦截器service.interceptors.request.use
(config=>{//在发送
请求之前可以做一些处理，比如添加token//如果用户有token，则携带在
请求头中//consttoken=getToken
();//if
(token
){//config.headers['Authorization']=`Bearer${token}`;//}returnconfig;},error=>{//对
请求错误做些什么returnPromise.reject
(error
);}
);//响应拦截器service.interceptors.response.use
(response=>{//对响应数据做处理，例如根据状态码进行判断constres=response.data;//假设我们有一个状态码字段为code，0表示成功if
(res.code===0
){returnres;}else{//处理业务错误returnPromise.reject
(newError
(res.message||'Error'
));}},error=>{//对响应错误做处理returnPromise.reject
(error
);}
);exportdefaultservice;```###2.全局挂载在main.js中，我们导入封装好的
axios实例，并挂载到
Vue全局属性上（
Vue3使用app.config.globalProperties）。```javascriptimport{createApp}from'
vue';importAppfrom'./App.
vue';import
axiosfrom'./utils/http';//导入封装的
axios实例constapp=createApp
(App
);//
Vue3挂载全局属性：使用app.config.globalPropertiesapp.config.globalProperties.$http=
axios;app.mount
('#app'
);```###3.在组件中使用在组件中，我们可以通过this.$http来使用封装好的
axios实例。```
vue<template><div><button@click="getData">获取数据</button></div></template><script>exportdefault{methods:{getData
(){this.$http.get
('/user'
).then
(response=>{console.log
(response
);}
).catch
(error=>{console.error
(error
);}
);}}};</script>```###4.可选：统一管理API（引用[3]和[5]的方法）我们可以创建api目录，统一管理接口
请求函数。例如，创建src/api/user.js：```javascriptimporthttpfrom'@/utils/http';//导入封装的
axios实例exportfunctiongetUserInfo
(){returnhttp.get
('/user'
);}exportfunctionpostUserInfo
(data
){returnhttp.post
('/user',data
);}```然后在组件中引入使用：```javascriptimport{getUserInfo}from'@/api/user';exportdefault{methods:{async
fetchData
(){try{constres=awaitgetUserInfo
();console.log
(res
);}catch
(error
){console.error
(error
);}}}};```###注意事项-
Vue3中不再有
Vue.prototype，而是使用app.config.globalProperties。-在组合式API（setup）中，无法直接使用this，可以通过getCurrentInstance来获取全局属性。但是更推荐使用模块化的方式（即单独引入封装的
axios实例）来发起
请求，以避免对
Vue实例的依赖。-在拦截器中，可以根据项目需要添加自定义逻辑（如处理token、统一错误处理等）。###问题总结封装
axios并全局使用主要分为三个步骤：1.封装
axios实例（包括拦截器设置）；2.在入口文件将实例挂载到全局；3.在组件中通过全局属性使用或通过模块导入使用（推荐统一管理接口，按模块导入使用）。这样封装后，可以在整个项目中方便地调用
axios，并且有利于后期维护。§§相关问题§§1.在
Vue3的setup语法中如何调用全局挂载的
axios？2.
axios拦截器的具体应用场景有哪些？3.如何为
axios封装处理不同类型的错误（如网络错误、超时错误、业务错误等）？4.如何配置
axios以支持
跨域请求？</think>
在
Vue项目中封装和全局使用
axios的步骤如下，结合
Vue3语法（参考引用[1][2]）并包含完整示例：
### 1. 创建
axios实例封装文件（`src/utils/http.js`）
```javascript
import
axios from '
axios';
// 创建
axios实例
const service =
axios.create
({
baseURL: process.env.
VUE_APP_BASE_API, // 环境变量配置
timeout: 10000 // 超时时间
}
);
//
请求拦截器（添加token等）
service.interceptors.request.use
(config => {
// 示例：注入token（引用[4]）
config.headers['Authorization'] = `Bearer ${localStorage.getItem
('token'
)}`;
return config;
}, error => {
return Promise.reject
(error
);
}
);
// 响应拦截器（统一错误处理）
service.interceptors.response.use
(
response => response.data, // 直接返回有效数据
error => {
// 统一错误处理（如状态码401跳转登录）
if
(error.response?.status === 401
) {
router.push
('/login'
);
}
return Promise.reject
(error
);
}
);
export default service;
```
### 2. 在main.js全局挂载（
Vue3语法）
```javascript
import { createApp } from '
vue';
import App from './App.
vue';
import http from './utils/http'; // 引用封装文件
const app = createApp
(App
);
// 全局挂载（引用[1][2]）
app.config.globalProperties.$http = http;
app.mount
('#app'
);
```
### 3. 创建API模块统一管理接口（`src/api/user.js`）
```javascript
import http from '@/utils/http'; // 导入封装的
axios实例（引用[3]）
export const loginAPI =
(data
) => {
return http.post
('/api/login', data
);
};
export const getUserInfo =
(params
) => {
return http.get
('/api/user', { params }
);
};
```
### 4. 组件中使用示例
```
vue
<script>
import { defineComponent } from '
vue';
import { loginAPI } from '@/api/user'; // 模块化引入
export default defineComponent
({
setup
() {
// 方法1：直接调用模块接口（推荐）
const handleLogin = async
() => {
const res = await loginAPI
({user: 'admin', pwd: '123'}
);
console.log
(res
);
};
return { handleLogin };
},
methods: {
// 方法2：通过全局属性调用（引用[5]）
fetchData
() {
this.$http.get
('/api/data'
)
.then
(res => console.log
(res
))
.catch
(err => console.error
(err
));
}
}
}
);
</script>
```
### 关键封装点说明：
1. **拦截器封装**
-
请求拦截器：自动添加认证头信息（引用[4]）
- 响应拦截器：统一错误处理和数据结构过滤
2. **API分层管理**
- 接口按模块划分（user.js, product.js等）
- 避免在组件中直接写URL（引用[3][5]）
3. **两种调用方式**
- **推荐**：按需引入接口模块（支持Tree Shaking）
- 备用：通过`this.$http`全局调用（简单场景）
4. **环境配置**
- 通过`.env`文件管理不同环境的`baseURL`
- 开发环境：`.env.development`
```bash
VUE_APP_BASE_API = '/dev-api'
```
> 提示：
Vue2的`
Vue.prototype.$
axios = http`写法在
Vue3中已改为`app.config.globalProperties.$http`（引用[1]）
解决跨域问题
本文介绍了一种通过配置代理表和使用axios库来解决前端开发中常见的跨域问题的方法。
扫一扫
5560
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
