在uniapp中vue3使用axios
时间: 2025-01-14 21:10:19 浏览: 45
### 配置 Vue3 和 Axios
为了在 UniApp 中集成 Vue3 并使用 Axios 进行网络请求,需先确保环境已正确设置。创建新的 UniApp 项目可以通过命令 `vue create -p dcloudio/uni-preset-vue my-uniapp` 实现[^2]。
#### 安装依赖库
安装 Axios 可通过 NPM 或者 Yarn 来完成:
```bash
npm install axios --save
```
对于希望减少构建时间并立即测试功能的开发者来说,也可以考虑采用 Unpkg CDN 方式引入 Axios:
```html
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
```
#### 封装 Axios 请求工具类
建议在一个独立文件中定义 Axios 的全局配置以及拦截器逻辑,比如可以在 `src/utils/request.js` 文件内实现如下代码片段[^3]:
```javascript
import axios from 'axios';
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // api base_url
timeout: 5000 // request timeout
});
// Request interceptors
service.interceptors.request.use(
config => {
// Do something before request is sent
return config;
},
error => {
// Do something with request error
return Promise.reject(error);
}
);
// Response interceptors
service.interceptors.response.use(
response => {
const res = response.data;
// If the custom code is not zero, it means there's an error.
if (res.code !== 0) {
Message({
message: res.message || 'Error',
type: 'error'
});
return Promise.reject(new Error(res.message || 'Error'));
} else {
return res;
}
},
error => {
console.log('err' + error); // For debugging purposes only
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
});
return Promise.reject(error);
}
);
export default service;
```
此部分实现了对 API 基础路径(`baseURL`)设定及时限控制(`timeout`),同时也加入了简单的错误提示机制。
#### 处理跨域问题
当遇到跨域访问难题时,在 HBuilderX 开发环境下可通过修改 `vue.config.js` 文件内的代理服务器设置解决该问题[^4]:
```json
{
"h5": {
"devServer": {
"proxy": {
"/api": {
"target": "http://localhost:8095",
"changeOrigin": true,
"secure": false,
"pathRewrite": {
"^/api": ""
}
}
}
}
}
}
```
上述配置使得本地开发期间所有 `/api` 开头的 URL 请求都会被转发到指定的目标地址,并自动移除前缀。
阅读全文
相关推荐


















