uni.request网络请求

uni.app网络请求详解与示例
本文介绍了uni.request()方法的使用,包括OBJECT参数的详细说明,数据转换规则,特别是不同HTTP方法下数据处理方式,如GET和POST的数据序列化处理。并提供了一个示例来展示如何使用uni.request进行网络请求。
部署运行你感兴趣的模型镜像

uni.request(OBJECT)

OBJECT 参数说明

参数名类型必填默认值说明
urlString开发者服务器接口地址
dataObject/String/ArrayBuffer请求的参数
headerObject设置请求的 header,header 中不能设置 Referer。
methodStringGET(需大写)有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
dataTypeStringjson如果设为 json,会尝试对返回的数据做一次 JSON.parse
responseTypeStringtext设置响应的数据类型。合法值:text、arraybuffer
successFunction收到开发者服务成功返回的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

success 返回参数说明

参数类型说明
dataObject/String/ArrayBuffer开发者服务器返回的数据
statusCodeNumber开发者服务器返回的 HTTP 状态码
headerObject开发者服务器返回的 HTTP Response Header

data 数据说明
最终发送给服务器的数据是 String 类型,如果传入的 data 不是 String 类型,会被转换成 String

  • 对于 GET 方法,会将数据转换为 query string。例如 { name: ‘li’, age: 19 } 转换后的结果是 name=li&age=19
  • 对于 POST 方法且 header['content-type']application/json 的数据,会进行 JSON 序列化。
  • 对于 POST 方法且 header['content-type']application/x-www-form-urlencoded 的数据,会将数据转换为 query string。

示例

uni.request({
			    url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。
			    data: {
			        name: 'name',
			        age: 19
			    },
			    header: {
			        'custom-header': 'hello' //自定义请求头信息
			    },
			    success: function (res) {
			        console.log(res.data);
			    }
			});

返回值
返回一个 requestTask 对象,通过 requestTask,可中断请求任务。
requestTask 对象的方法列表

方法说明
about中断请求任务
offHeadersReceived取消监听 HTTP Response Header 事件
onHeadersReceived监听 HTTP Response Header 事件。会比请求完成事件更早
const requestTask = uni.request({
			    url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。
			    data: {
			        name: 'name',
			        age: 18
			    },
			    success: function (res) {
			        console.log(res.data);
			    }
			});
			 
			requestTask.abort();   // 中断请求任务

您可能感兴趣的与本文相关的镜像

EmotiVoice

EmotiVoice

AI应用

EmotiVoice是由网易有道AI算法团队开源的一块国产TTS语音合成引擎,支持中英文双语,包含2000多种不同的音色,以及特色的情感合成功能,支持合成包含快乐、兴奋、悲伤、愤怒等广泛情感的语音。

<think>我们正在编写一个关于uni.request的实验报告,要求包含实验任务和实验内容及步骤两部分。可以使用快递收取的比喻来帮助理解。 根据之前的报告结构,我们可以这样设计: 实验任务:列出本次实验的学习目标。 实验内容及步骤:详细描述实验的操作过程,包括代码示例和比喻解释。 注意:最后必须提出3-5个相关问题,以“§§相关问题§§”开头,然后列出问题。 下面开始编写报告: </think>### 实验报告:uni.request网络请求机制实践 --- #### **实验任务** 1. 掌握`uni.request`基础参数配置(url/method/header/data) 2. 理解网络请求生命周期(发起→传输→响应) 3. 实现GET/POST请求的完整流程 4. 处理常见网络异常(超时/错误状态码) 5. 通过快递比喻深化网络请求概念理解 --- #### **实验内容及步骤** **步骤1:创建快递订单(配置请求参数)** ```javascript // 订单信息准备(比喻:填写快递单) const requestConfig = { url: 'https://api.express.com/query', // 收件地址(API端点) method: 'POST', // 寄件方式(GET=取件/POST=寄件) header: { // 包装规格 'Content-Type': 'application/json', // 包装箱类型标识 'X-User-Token': 'ABCD1234' // 寄件人身份贴纸 }, data: { // 包裹内容 orderId: 'SF20240618001', // 快递单号 items: ['文件', '样品'] // 包裹物品清单 }, timeout: 10000 // 配送时限(10秒) } ``` **步骤2:寄出包裹(发起网络请求)** ```javascript // 呼叫快递员(发送请求uni.request({ ...requestConfig, success: (res) => { // 成功签收(2xx状态码) console.log('物流轨迹:', res.data) /* 响应示例: { status: 200, data: { location: "上海中转站", estimate: "2天后送达" } } */ }, fail: (err) => { // 寄件失败(网络层错误) console.error('配送异常:', err.errMsg) // 如"request:fail timeout" uni.showToast({ icon: 'error', title: '请求超时' }) }, complete: () => { // 物流闭环(无论成功失败) uni.hideLoading() // 关闭寄件柜台 } }) ``` **步骤3:特殊配送场景(高级配置)** ```javascript // 加密包裹(HTTPS安全传输) url: 'https://secure.api.com', // 指定回执格式(dataType) dataType: 'json', // 要求返回JSON格式包裹清单 // 接收特殊包裹(responseType) responseType: 'arraybuffer' // 接收二进制文件(如图片/文件流) ``` **步骤4:异常处理训练(错误调试)** | 快递场景 | 网络对应现象 | 调试方法 | |-------------------|-----------------------|-----------------------| | 收件地址变更 | 404 Not Found | 检查URL路径是否正确 | | 身份贴纸过期 | 401 Unauthorized | 更新header令牌 | | 配送超时 | timeout触发fail回调 | 延长timeout或优化网络 | | 包裹安检失败 | 403 Forbidden | 检查接口权限配置 | | 仓库系统故障 | 500 Server Error | 联系后端服务维护 | --- #### **实验结果验证** 1. 成功通过POST请求查询到"SF20240618001"快递的物流轨迹 2. 模拟超时场景:将timeout设为1ms触发fail回调 3. 修改URL路径触发404错误,验证错误处理流程 4. 使用HTTPS协议成功完成加密数据传输
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值