uniapp怎么app端请求后端接口?
时间: 2025-02-07 10:58:26 浏览: 55
### 实现 UniApp 中 APP 端调用后端 API
为了实现在 UniApp 应用程序中从 APP 端发起对后端接口的请求,可以采用 `uni.request` 方法来发送 HTTP 请求。此方法类似于 Vue Axios 的使用方式,允许开发者通过简单的配置完成数据交互。
#### 封装 request 函数以便更方便地调用 API 接口
创建一个通用函数用于处理所有的网络请求操作,这样不仅提高了代码复用率还简化了错误管理流程:
```javascript
export default function request(options) {
const baseUrl = 'https://your-backend-api.com'; // 替换成实际的基础 URL
return new Promise((resolve, reject) => {
uni.request({
...options,
url: `${baseUrl}${options.url}`,
success(res) {
resolve(res);
},
fail(error) {
reject(error);
}
});
});
}
```
上述代码定义了一个名为 `request` 的异步函数,它接受参数对象作为输入,并返回一个新的承诺(Promise),该承诺会在请求完成后解析或拒绝[^1]。
#### 使用封装后的 request 进行具体的 API 调用
下面是一个例子展示了如何利用上面提到的 `request` 工具来进行 GET 和 POST 类型的数据获取与提交动作:
对于GET类型的请求:
```javascript
async fetchData() {
try {
let response = await request({ method: 'GET', url: '/data' });
console.log(response.data); // 处理接收到的信息
} catch (error) {
console.error('Error fetching data:', error);
}
}
```
而对于POST类型的请求,则可以通过传递额外的数据体给服务器:
```javascript
async submitForm(formData) {
try {
let response = await request({
method: 'POST',
url: '/submit',
data: formData
});
console.log('Submission successful!', response.data);
} catch (error) {
console.error('Failed to submit form:', error);
}
}
```
这些示例说明了怎样基于之前构建好的基础之上执行不同种类的操作——无论是读取还是写入资源都可以轻松实现[^2]。
阅读全文
相关推荐

















