uniapp axios封装
时间: 2023-09-17 19:14:07 浏览: 133
在Uni-app项目中,可以将axios进行封装以方便使用。以下是一个简单的axios封装示例:
1. 首先,在项目的 `common` 目录下创建一个 `http.js` 文件。
```javascript
// http.js
import axios from 'axios';
const http = axios.create({
baseURL: 'http://your-api-url.com', // 设置基本的请求URL
timeout: 5000, // 设置超时时间
});
// 请求拦截器
http.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么,例如添加请求头等
return config;
},
(error) => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 响应拦截器
http.interceptors.response.use(
(response) => {
// 对响应数据做些什么,例如根据状态码进行相应处理
return response.data;
},
(error) => {
// 对响应错误做些什么
return Promise.reject(error);
}
);
export default http;
```
2. 在需要使用axios的地方,引入封装好的axios实例。
```javascript
// 使用示例
import http from '@/common/http.js';
// 发起GET请求
http.get('/api/user')
.then((response) => {
console.log(response);
})
.catch((error) => {
console.error(error);
});
// 发起POST请求
http.post('/api/user', {
username: 'example',
password: '123456'
})
.then((response) => {
console.log(response);
})
.catch((error) => {
console.error(error);
});
```
这样,你就完成了一个简单的Uni-app中axios的封装。通过使用封装好的http实例,可以方便地发起GET、POST等请求,并且可以在拦截器中进行一些全局处理。当然,你还可以根据自己项目的需要,进一步完善和定制封装的逻辑。
阅读全文