uniapp uni.request请求
时间: 2025-05-17 17:24:59 浏览: 30
### 如何在 UniApp 中使用 `uni.request` 进行网络请求
#### 封装 `uni.request`
为了简化代码并提升项目的可维护性,在实际开发中可以对 `uni.request` 方法进行统一封装。以下是具体的封装方式:
1. 创建一个名为 `request.js` 的文件,用于集中管理所有的网络请求逻辑。
```javascript
// request.js 文件
export default function request(options) {
const { url, method = 'GET', data = {}, header = {} } = options;
return new Promise((resolve, reject) => {
uni.request({
url,
method,
data,
header,
success(res) {
if (res.statusCode === 200 && res.data.code === 0) {
resolve(res.data);
} else {
reject(res.errMsg || '服务器错误');
}
},
fail(err) {
reject(err.errMsg || '请求失败');
}
});
});
}
```
此封装实现了以下几个功能:
- 统一返回 `Promise` 对象以便于异步操作的链式调用[^1]。
- 提供默认参数设置(如 HTTP 方法、头部信息),减少重复配置的工作量[^3]。
- 针对不同的状态码和业务逻辑做出判断,并分别执行成功的回调或失败的回调。
#### 发起 GET 请求实例
假设我们需要向 OneNet 平台发送一个 GET 请求以获取某个设备的数据,则可以通过如下方式进行调用:
```javascript
import request from './path/to/request';
const deviceDataRequest = async () => {
try {
const response = await request({
url: 'https://api.heclouds.com/devices/{device_id}/datastreams',
method: 'GET',
header: {
'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
}
});
console.log('Device Data:', response); // 输出接收到的数据
} catch (error) {
console.error('Error fetching device data:', error);
}
};
deviceDataRequest();
```
上述代码片段展示了如何利用封装后的 `request` 函数发起一次针对特定 API 接口的查询操作[^2]。注意替换 `{device_id}` 和 `YOUR_ACCESS_TOKEN` 为真实的值。
#### 处理 POST 请求示例
如果要提交表单或者上传数据到服务端,可以采用 POST 方式完成这一过程:
```javascript
const postDataToServer = async () => {
try {
const result = await request({
url: 'https://example.com/api/submit',
method: 'POST',
data: {
name: 'John Doe',
email: '[email protected]'
},
header: {
'content-type': 'application/json' // 默认值
}
});
console.log('Post Result:', result);
} catch (err) {
console.error('Failed to post data:', err);
}
};
postDataToServer();
```
这里演示了一个典型的场景——通过 JSON 格式的 body 数据传递给目标 URL 来存储新记录。
---
###
阅读全文
相关推荐

















