uniapp接口调用的数据传递

在 UniApp 中进行接口请求时，传递数据主要通过 `uni.request` 方法的 `data` 参数实现。该参数用于指定请求体中携带的数据内容，并支持多种数据格式和场景[^2]。 ### 数据传递方式 1. **GET 请求**： GET 请求通常将数据作为 URL 查询字符串的一部分进行传递。例如，若接口地址为 `https://www.example.com/request`，可以将数据附加到 URL 后面： ```javascript uni.request({ url: 'https://www.example.com/request?text=uni.request', method: 'GET', success: (res) => { console.log(res.data); } }); ``` 在这种情况下，数据以键值对形式附加在 URL 上，如 `?text=uni.request` [^2]。 2. **POST 请求**： POST 请求通过 `data` 参数传递数据，这些数据会被封装在请求体中发送到服务器。例如： ```javascript uni.request({ url: 'https://www.example.com/request', method: 'POST', data: { text: 'uni.request' }, success: (res) => { console.log(res.data); } }); ``` 这种方式适用于需要向服务器提交表单或上传文件等场景，且数据不会暴露在 URL 中，安全性更高[^2]。 3. **自定义请求头**： 在某些情况下，可能需要通过请求头（Header）传递额外的信息，例如身份验证令牌。可以通过设置 `header` 属性来实现： ```javascript uni.request({ url: 'https://www.example.com/request', method: 'POST', data: { text: 'uni.request' }, header: { 'Authorization': 'Bearer your_token_here', 'content-type': 'application/json' }, success: (res) => { console.log(res.data); } }); ``` 这里设置了两个请求头字段：`Authorization` 和 `content-type`，分别用于身份验证和指定数据类型[^3]。 4. **动态参数处理**： 如果需要根据用户输入或其他条件动态生成请求参数，可以在调用 `uni.request` 前构造 `data` 对象。例如： ```javascript const userInput = 'example'; uni.request({ url: 'https://www.example.com/request', method: 'POST', data: { query: userInput }, success: (res) => { console.log(res.data); } }); ``` 通过这种方式，可以根据实际需求灵活调整传递的数据内容[^2]。 5. **封装通用请求函数**： 为了提高代码复用性和维护性，可以将接口请求逻辑封装成一个通用函数。例如，在 `request.js` 文件中定义如下函数： ```javascript function httpRequest(options) { return new Promise((resolve, reject) => { uni.request({ url: options.url, data: options.data || {}, method: options.method || 'GET', header: options.header || { 'content-type': 'application/json' }, success: function(res) { if (res.statusCode === 200) { resolve(res.data); } else { reject(res); } }, fail: function(err) { reject(err); } }); }); } export default httpRequest; ``` 然后在其他文件中使用该函数： ```javascript import httpRequest from './request.js'; const apiService = { fetchData(params) { return httpRequest({ url: 'https://www.example.com/request', method: 'POST', data: params }); } }; export default apiService; ``` 封装后的函数简化了接口调用流程，并统一了错误处理机制。 ### 数据解析与使用 接口返回的数据通常以 JSON 格式提供，开发者可以通过 `res.data` 获取并解析这些数据。例如： ```javascript uni.request({ url: 'https://www.example.com/request', method: 'GET', success: (res) => { const responseData = res.data; console.log(responseData); // 使用 responseData 中的数据更新页面内容 this.text = responseData.message; } }); ``` 通过解析响应数据，可以提取所需信息并将其展示在页面上或用于后续业务逻辑处理[^1]。