uniapp网络请求封装
时间: 2023-08-15 16:08:12 浏览: 124
uniapp 请求代码封装
UniApp 是一个基于 Vue.js 的跨平台开发框架,可以同时开发iOS、Android、H5等多个平台的应用。在 UniApp 中进行网络请求可以使用 uni.request() 方法进行封装。
下面是一个简单的网络请求封装示例:
1. 创建一个 request.js 文件,用于封装网络请求相关的方法。
```javascript
// request.js
const BASE_URL = 'https://api.example.com'; // 接口请求的基础URL
export const request = (url, method = 'GET', data = {}, header = {}) => {
return new Promise((resolve, reject) => {
uni.request({
url: BASE_URL + url,
method: method,
data: data,
header: header,
success: (res) => {
resolve(res.data);
},
fail: (err) => {
reject(err);
}
});
});
};
```
2. 在需要进行网络请求的页面中,引入 request.js 文件,并调用封装的 request 方法。
```javascript
// index.vue
import { request } from './request.js';
export default {
data() {
return {
dataList: []
};
},
mounted() {
this.getData();
},
methods: {
async getData() {
try {
const res = await request('/api/data', 'GET');
this.dataList = res.data;
} catch (err) {
console.error(err);
}
}
}
}
```
以上示例中,request.js 文件封装了一个 request 方法,用于发起网络请求。在页面中调用该方法,可以获取到请求的数据并进行相应的处理。
你可以根据实际需求对 request 方法进行扩展,例如添加请求拦截器、响应拦截器等,以满足项目的特定需求。
阅读全文