首页uniapp请求后端接口

uniapp请求后端接口

时间: 2025-06-29 15:19:44 浏览: 8

### 如何在 UniApp 中使用 HTTP 请求调用后端 API 为了实现这一目标，在 `src/utils/request.ts` 文件中封装了一个返回 Promise 的请求函数，该方法简化了向服务器发起请求的过程，并能够方便地处理响应数据[^1]。 ```typescript // src/utils/request.ts import type { RequestOptions } from '@uni-app/types'; export const request = (options: RequestOptions): Promise<any> => { return new Promise((resolve, reject) => { uni.request({ ...options, success: (response) => { resolve(response.data); }, fail: (error) => { reject(error); } }); }); }; ``` 此代码片段定义了一个名为 `request` 函数，它接受一个参数 `options` ，其中包含了请求所需的配置项。通过扩展运算符 (`...`) 来传递这些选项给内置的 `uni.request()` 方法。当接收到成功的回复时，则解析出的数据作为承诺的结果；如果发生错误则拒绝这个承诺并传回相应的异常信息。对于具体的API调用场景而言，假设存在一个 .NET Core Web API 接口位于 `/api/values` 路径下，那么可以在页面组件内利用上述工具来获取资源列表： ```javascript onLoad() { this.fetchData(); } methods: { async fetchData() { try { let result = await request({ url: 'https://example.com/api/values', method: 'GET' }); console.log('Fetched data:', result); } catch (err) { console.error('Failed to fetch data', err); } } } ``` 这段脚本展示了如何在一个 Vue 组件生命周期钩子 onLoad 事件触发之后执行异步操作——即调用远程服务端点以检索所需的信息。一旦完成加载过程，便会打印所取得的内容到浏览器控制台窗口之中[^2]。

阅读全文