uniapp配置axios
时间: 2025-06-27 18:17:29 浏览: 12
### 配置 Axios 库实现 HTTP 请求
#### 安装 Axios
为了能够在 UniApp 项目中使用 Axios 进行 HTTP 请求,首先需要安装 Axios。可以通过 npm 或 yarn 来安装这个依赖包。
```bash
npm install axios --save
```
或者
```bash
yarn add axios
```
这一步骤确保了 Axios 成功加入到项目的 `node_modules` 文件夹下[^1]。
#### 创建 Axios 实例并设置默认配置
创建一个新的文件用于封装 Axios 的实例,在此过程中可以定义一些全局性的配置项如基础 URL 和请求头等信息:
```javascript
// src/api/axios.js
import axios from 'axios';
const service = axios.create({
baseURL: "https://example.com", // API 基础地址
timeout: 5000 // 超时时间
});
export default service;
```
这段代码展示了如何通过自定义的基础路径简化后续调用中的 URL 输入,并设置了超时时长来提高用户体验[^4]。
#### 处理请求拦截器与响应拦截器
为了让应用程序更加健壮以及处理常见的错误情况,可以在 Axios 上添加请求和响应拦截器来进行预处理工作:
```javascript
service.interceptors.request.use(
config => {
// 可在此处添加 token 等认证信息至 headers 中
return config;
},
error => Promise.reject(error)
);
service.interceptors.response.use(
response => response.data,
error => {
console.error('Error:', error);
return Promise.reject(error);
}
);
```
上述代码片段实现了对每次发出的请求自动附加必要的头部字段,并且当服务器返回异常状态码时能够捕获这些错误以便进一步分析或提示给用户[^2]。
#### 封装通用方法发起请求
最后,可以根据实际需求构建一系列便捷的方法供页面组件调用来获取所需的数据资源:
```javascript
function fetchData(url, params) {
return new Promise((resolve, reject) => {
service.get(url, {params})
.then(resolve)
.catch(reject);
});
}
async function postData(url, payload) {
try {
const result = await service.post(url, payload);
return result;
} catch (error) {
throw error;
}
}
```
这里提供了两个函数分别代表 GET 方式的查询操作和 POST 提交表单的功能,它们内部都利用了前面所提到的服务对象 `service` 来执行具体的网络通信逻辑[^3]。
阅读全文
相关推荐


















