前端(JavaScript)函数_网络操作类

文档概述

轻语言网站开发中的网络操作函数、用于处理HTTP请求和网络通信，包含HTTP请求、文件上传、下载、接口调用、网络状态检测等功能，常用于API调用、数据交换、文件传输等场景。

• 接口请求：请求接口 调用本程序后端接口文件；发送GET请求/发送POST数据 发起HTTP请求
• 文件上传：上传文件By接口 通过后端接口上传文件
• 回调异步：所有请求函数均为异步，通过回调函数接收结果，回调参数通常为 (请求结果, 标记)

💡 请求异步与跨域：所有网络请求函数均为异步操作，通过回调函数处理响应。GET/POST请求默认仅支持同源域名，跨域需服务端配置CORS。请求超时默认5秒，可通过最后参数自定义。返回的JSON字符串需用 JSON解析 转为对象后访问属性。

函数：请求接口(接口文件名,后端函数名,回调函数,待提交数据,协议头,标记值)

请求本程序中指定后端接口文件；向其发送或获取数据；回调函数返回两个参数：(请求结果,标记)。代码示例：请求接口(接口文件名, 后端函数名, 回调函数, 待提交数据)

' 发送GET请求获取用户信息，user 为接口文件名，getUserInfo为后端函数名
请求接口("user", "getUserInfo", (结果, 标记)=>{
	如果(结果 != "")
		变量 用户数据 = JSON解析(结果)
		调试输出("用户名: " + 用户数据.姓名)
	否则
		调试输出("获取用户信息失败")
	结束 如果
})
' 发送POST请求提交用户数据
变量 提交数据 = "name=张三&age=25&email=zhangsan@example.com"
请求接口("user", "saveUserInfo", (结果, 标记)=>{
	如果(结果 == "success")
		弹出提示("用户信息保存成功")
	否则
		弹出提示("保存失败")
	结束 如果
}, 提交数据)
' 带自定义协议头的请求
变量 自定义协议头 = {
	"Authorization": "Bearer token123",
	"Content-Type": "application/json"
}
变量 JSON数据 = JSON编码({"name": "李四", "age": 30})
请求接口("api", "updateUser", (结果, 标记)=>{
	调试输出("更新结果: " + 结果)
}, JSON数据, 自定义协议头, "更新用户")

函数：上传文件By接口(接口文件名,后端函数名,待上传文件对象,回调函数)

通过调用接口向服务端（服务器）上传一个文件；回调函数返回一个参数：(请求结果)。代码示例：上传文件By接口(接口文件名, 后端函数名, 待上传文件对象, 回调函数)

' 上传用户选择的文件
' 注：箭头函数 ()=>{} 为原生 JS 回调语法，轻语言支持直接使用
文件选择框1.置文件选择完毕回调((源对象, 文件列表)=>{
	' 注：数组[索引] 为原生 JS 数组访问语法，轻语言支持直接使用；也可用 取数组成员(数组, 索引)
	变量 选中文件 = 文件列表[0]
	如果(选中文件 != 空)
		上传文件By接口("file", "upload", 选中文件, (结果)=>{
			如果(结果 != "fail")
				弹出提示("文件上传成功")
				调试输出("文件URL: " + 结果)
			否则
				弹出提示("文件上传失败")
			结束 如果
		})
	结束 如果
})
' 上传图片文件
文件选择框2.置文件选择完毕回调((源对象, 文件列表)=>{
	变量 文件对象 = 文件列表[0]
	如果(文件对象 != 空)
		上传文件By接口("image", "uploadImage", 文件对象, (结果)=>{
			如果(结果 != "fail")
				图片预览.资源 = 结果
				弹出提示("图片上传成功")
			否则
				弹出提示("图片上传失败")
			结束 如果
		})
	结束 如果
})

函数：发送GET请求(地址,回调函数,标记值,超时)

向服务端发送GET请求获取内容、注意：默认仅支持访问同源域名地址；若访问跨域地址，请在服务端允许跨域，回调函数返回两个参数值：(请求结果,标记)，参数超时默认5秒，可省略。代码示例：发送GET请求(地址, 回调函数)

' 获取天气信息
变量 天气API = "https://api.weather.com/v1/weather?city=Beijing"
' 注：箭头函数 ()=>{} 为原生 JS 回调语法，轻语言支持直接使用
发送GET请求(天气API, (结果, 标记)=>{
	如果(结果 != "")
		变量 天气数据 = JSON解析(结果)
		' 注：对象.属性 为原生 JS 对象属性访问语法，轻语言支持直接使用
		调试输出("当前温度: " + 天气数据.温度 + "°C")
	否则
		调试输出("获取天气信息失败")
	结束 如果
})
' 获取新闻列表
变量 新闻API = "/api/news/list?page=1&size=10"
发送GET请求(新闻API, (结果, 标记)=>{
	如果(结果 != "")
		变量 新闻列表 = JSON解析(结果)
		' 更新界面显示新闻
		' 注：数组[索引] 为原生 JS 数组访问语法，轻语言支持直接使用；也可用 取数组成员(数组, 索引)
		变量循环(i = 0, 取数组成员数(新闻列表), 1)
			新闻容器.添加子项(创建新闻项(新闻列表[i]))
		结束循环
	否则
		弹出提示("获取新闻失败")
	结束 如果
}, "新闻列表")
' 带超时设置的请求
变量 外部API = "https://external-api.com/data"
发送GET请求(外部API, (结果, 标记)=>{
	如果(结果 != "")
		处理数据(JSON解析(结果))
	否则
		弹出提示("请求超时或失败")
	结束 如果
}, "", 10000)  ' 10秒超时

函数：发送POST数据(地址,待提交数据,回调函数,协议头,标记值,超时)

向服务端发送POST请求获取内容、注意：默认仅支持访问同源域名地址；若访问跨域地址，请在服务端允许跨域，回调函数返回两个参数：(请求结果,标记)，参数超时默认5秒，可省略。代码示例：发送POST数据(地址, 待提交数据, 回调函数)

' 用户登录
变量 登录地址 = "/api/user/login"
变量 登录数据 = "username=admin&password=123456"
发送POST数据(登录地址, 登录数据, (结果, 标记)=>{
	变量 响应 = JSON解析(结果)
	如果(响应.状态 == "success")
		弹出提示("登录成功")
		切换页面("dashboard")
	否则
		弹出提示("登录失败: " + 响应.消息)
	结束 如果
})
' 提交表单数据
变量 提交地址 = "/api/form/submit"
变量 表单对象 = {
	"name": 姓名输入框.文本,
	"email": 邮箱输入框.文本,
	"phone": 电话输入框.文本,
	"message": 留言输入框.文本
}
变量 JSON数据 = JSON编码(表单对象)
变量 协议头 = {
	"Content-Type": "application/json"
}
发送POST数据(提交地址, JSON数据, (结果, 标记)=>{
	变量 响应 = JSON解析(结果)
	如果(响应.状态 == "success")
		弹出提示("提交成功")
		清空表单()
	否则
		弹出提示("提交失败")
	结束 如果
}, 协议头)
' 发送带有认证信息的请求
变量 API地址 = "/api/protected/data"
变量 数据 = "query=getUserData"
变量 认证协议头 = {
	"Authorization": "Bearer " + 获取Token(),
	"Content-Type": "application/x-www-form-urlencoded"
}
发送POST数据(API地址, 数据, (结果, 标记)=>{
	如果(结果 != "")
		处理用户数据(JSON解析(结果))
	否则
		弹出提示("请求失败，请重新登录")
		切换页面("login")
	结束 如果
}, 认证协议头, "获取用户数据", 8000)

学习要点

相关文档

• 文档前端(JavaScript)函数_数据转换类 —— JSON编码、JSON解析 JSON数据处理函数
• 文档前端(JavaScript)函数_对象操作 —— 取对象属性、置对象属性 对象属性操作
• 文档前端(JavaScript)函数_数组操作 —— 取数组成员数、取数组成员 用于响应数据遍历
• 文档前端(JavaScript)函数_窗口操作 —— 切换页面、弹出提示 请求后页面跳转与提示
• 文档前端(JavaScript)函数_储存类 —— 保存配置、读取配置 存储Token等登录信息
• 文档前端(JavaScript)函数_字符串操作 —— 寻找文本、取文本中间 用于处理响应文本