uni-app——网络API

uni-app 网络API

在 uni-app 开发中,网络请求是获取数据与和服务器交互的重要手段。以下介绍 uni-app 中常见的网络 API,包括发起请求、上传和下载以及 WebSocket、UDP 通信等方面。

发起请求

在 uni-app 里,使用uni.request(OBJECT)来发起网络请求,它类似于传统 Web 开发中的 AJAX,在实际开发中主要用于从服务器端接口获取数据,其使用方式和 jQuery 的 AJAX 较为相似。下面详细介绍其参数:

  • url(必填):这是开发者服务器接口的地址,明确请求的目标位置。

  • data:用于设置请求参数,这些参数会被发送到服务器。

  • header:用来设置请求的头部信息,比如设置认证信息等。

  • method:指定请求的方法,默认是 GET。

  • timeout:设置请求的超时时间,避免请求长时间无响应。

  • dataType:若设置为 json,uni-app 会自动尝试对返回的数据进行 JSON.parse 处理,方便后续使用数据。

  • sslVerify:用于验证 SSL 证书,保障请求的安全性。

  • withCredentials:决定跨域请求时是否携带凭证。

  • firstlpv4:在 DNS 解析时优先使用 IPV4。

  • success:当成功收到开发者服务器返回的数据时,会触发这个回调函数。

  • fail:一旦接口调用失败,就会进入这个回调函数。

  • complete:无论接口调用成功与否,结束时都会执行此回调函数。

代码示例

假设我们要从服务器获取用户列表数据,接口地址为https://example.com/api/users,示例代码如下:

uni.request({url: 'https://example.com/api/users',method: 'GET',data: {page: 1,limit: 10},header: {'Content-Type': 'application/json'},success: function (res) {console.log('请求成功', res.data);},fail: function (err) {console.log('请求失败', err);},complete: function () {console.log('请求结束');}
});

关于 data 的转换规则

发送给服务器的 data 必须是 String 类型,如果不是 String 类型,会按照特定规则强制转换为 String:

  • GET 方法:数据会被转换为查询字符串。例如{name:‘name’,age:‘18’}会转换为name=name&age=18。

  • POST 方法

    • 当header[‘content-type’]为application/json时,数据会进行 JSON 序列化。
    • 当header[‘content-type’]为application/x-www-form-urlencoded时,数据会被转换为查询字符串。

method 的取值

method可取值有GET、POST、PUT、DELETE、CONNECT、HEAD、OPTIONS、TRACE。在实际开发中,常用且兼容性较好的是GET和POST方法。GET一般用于获取数据,POST常用于向服务器提交数据。

success 回调参数说明

  • data:类型可以是Object、String或者ArrayBuffer,这是开发者服务器返回的数据内容。

  • statusCode:是一个Number类型,代表开发者服务器返回的 HTTP 状态码,比如常见的 200 表示成功,404 表示未找到资源等。

  • header:是一个Object,包含开发者服务器返回的 HTTP Response Header 信息。

  • cookies:是一个字符串数组Array.,里面存储着开发者服务器返回的 cookies。

上传文件

使用uni.uploadFile(OBJECT)可以将本地资源上传到开发者服务器中。这个操作本质上是由客户端发起一个 POST 请求,且其content-type为multipart/form-data。下面介绍其参数:

  • url(必填):这是开发者服务器的 URL,明确上传的目标服务器地址。

  • files(必填):这是上传的文件列表。当使用files时,filePath和name这两个参数将不生效。

  • fielType:指定文件类型,可取值为image、video、audio等。

  • file:要上传的具体文件对象。

  • filePath(必填):上传文件在本地的资源路径。

  • name:文件在服务器端对应的 key。

  • header:设置 HTTP 请求的 header 信息。

  • timeout:设置上传请求的超时时间。

  • formData:用于设置 HTTP 请求中的其他表单数据。

  • successfailcomplete:这三个回调函数分别在上传成功、失败以及结束时触发,方便开发者进行相应处理。

代码示例

假设要将本地的一张图片上传到服务器,服务器接口地址为https://example.com/api/upload,示例代码如下:

const filePath = '/storage/emulated/0/DCIM/Camera/IMG_20230101.jpg';
uni.uploadFile({url: 'https://example.com/api/upload',filePath: filePath,name: 'file',formData: {'user_id': '12345'},success: function (res) {console.log('上传成功', res.data);},fail: function (err) {console.log('上传失败', err);},complete: function () {console.log('上传结束');}
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/898418.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机网络笔记再战——理解几个经典的协议HTTP章3

理解几个经典协议——HTTP章3 返回结果的HTTP状态码 ​ 我们知道,ICMP可以传递IP通信时候的状态如何。HTTP虽然没有辅助的解析,但是它可以使用状态码来表达我们的HTTP请求的结果,标记服务器端的处理是否正常、通知出现的错误等工作。这就是…

国产编辑器EverEdit - Hex Dump插件:看到文本的另一面!

1 Hex Dump插件 1.1 应用场景 有时可能需要显示字母的ASCII编码,或其他文字的字节编码,可以使用Hex Dump插件来完成 1.2 使用方法 安装Hex Dump插件,安装插件方法参考:扩展管理 在编辑器中选中文本,选择扩展 -> …

《驾驭MXNet:深度剖析分布式深度学习训练的高效之道》

在深度学习的迅猛发展进程中,模型的规模和复杂性持续攀升,对计算资源的需求也愈发苛刻。单机训练在面对大规模数据集和复杂模型结构时,常常显得力不从心。分布式深度学习训练成为解决这一困境的关键途径,而MXNet作为一款强大的开源…

Vue3项目开发:状态管理实践指南

# Vue3项目开发:状态管理实践指南 一、引言 背景介绍 在Vue项目中,状态管理是一个非常重要的话题。合理的状态管理能够帮助我们更好地组织和管理数据,提升项目的可维护性和可扩展性。本文将深入探讨Vue3项目中状态管理的最佳实践,…

网络安全漏洞与修复 网络安全软件漏洞

文章目录 一、软件漏洞的概念 1、信息安全漏洞简述2、软件漏洞3、软件漏洞概念4、软件漏洞的成因分析 二、软件漏洞标准化管理 1、软件漏洞分类2、软件漏洞分级3、安全漏洞管理规范 一、软件漏洞的概念 1、信息安全漏洞简述 信息安全漏洞是信息安风险的主要根源之一&…

SpringBoot项目controller层接收对应格式请求的相关RequestMapping配置

目录 (1) (2) (3) 注:此情况注意和(4)中情况进行区分 (4) 在几个springboot项目开发后,我总结了以下的一些常见的接收对应请求的…

2025年图生视频模型技术全景解析

一、开源图生视频模型 阿里通义万象Wan2.1系列 I2V-14B-480P: 14B参数基础模型支持480P分辨率图生视频显存需求16GB以上 I2V-14B-720P: 高清增强版模型采用分帧渲染技术,输出分辨率达1280720 技术特性: 支持中文提示词自动解析内置…

一场由 ES 分片 routing 引发的问题

一场由 ES 分片 routing 引发的问题 ES 结构 {"poroperties": {"joinType": {"type": "join","eager_global_ordinals": true,"relations": {"spu": "sku"}},"id":{"type&q…

Linux信号的处理

目录 一、信号处理概述:为什么需要“信号”? 二、用户空间与内核空间:进程的“双重人格” 三、内核态与用户态:权限的“安全锁” 四、信号捕捉的内核级实现:层层“安检” 五、sigaction函数:精细控制信…

IntelliJ IDEA 2023.3.1安装指南从下载到配置的完整教程(附资源下载)

安装 IntelliJ IDEA 2023.3.1 非常简单,以下是详细的安装步骤,适用于 Windows、macOS 和 Linux 系统。 1. 下载 IntelliJ IDEA IntelliJ IDEA下载链接:https://pan.quark.cn/s/3ad975664934 选择适合你的操作系统的版本: Ultimat…

【HarmonyOS Next】鸿蒙中App、HAP、HAR、HSP概念详解

【HarmonyOS Next】鸿蒙中App、HAP、HAR、HSP概念详解 (图1-1) 一、鸿蒙中App、HAP、HAR、HSP是什么? (1)App Pack(Application Package) 是应用发布的形态,上架应用市场是以App Pa…

配置阿里云yum源

配置阿里云yum源 修改默认的yum仓库,把原有的移动到创建的目录里(踢出国外的yum源) # 切换到/ect/yum.repos.d/目录下 cd /etc/yum.repos.d/ # 新建repo目录 mkdir repo # 把原有的移动到创建的目录里 mv ./*.repo ./repo/配置yum源 # 找到…

在C#的MVC框架framework项目的使用ajax,及源码下载

在C# MVC框架中使用AJAX实现异步请求,有助于提高应用程序的性能和用户体验。 在MVC框架framework项目中,ajax使用方法如下 1.在Controller类中,创建一个新的方法(例如:GetRes),该方法处理AJAX请求并返回J…

Linux部署DHCP服务脚本

#!/bin/bash #部署DHCP服务 #userli 20250319#检查是否为root用户 if[ "$USER" ! "root" ] thenecho "错误:非root用户,权限不足!"exit 0 fi#配置网络环境 read -ep "请给本机配置一个IP地址(不…

vulhub Matrix-Breakout

1.下载靶机,打开靶机和kali虚拟机 2.查询kali和靶机ip 3.浏览器访问 访问81端口有登陆界面 4.扫描敏感目录 kali dirb 扫描 一一访问 robot.txt提示我们继续找找,可能是因为我们的字典太小了,我们换个扫描器换个字典试下,利用kali自带的最大…

科普类——双目立体视觉与 RGBD 相机的简单对比

双目立体视觉与 RGBD 相机生成的深度图在原理、性能和应用场景上有显著差异。以下是两者的详细对比和分析: 1. 原理差异 (1) 双目立体视觉 (Stereo Vision) 原理: 通过两个摄像头模拟人眼视差,计算匹配像素点的水平位移(视差&…

深度学习项目--基于DenseNet网络的“乳腺癌图像识别”,准确率90%+,pytorch复现

🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者:K同学啊 前言 如果说最经典的神经网络,ResNet肯定是一个,从ResNet发布后,很多人做了修改,denseNet网络无疑是最成功的…

面试八股 —— Redis篇

重点:缓存 和 分布式锁 缓存(穿透,击穿,雪崩) 降级可作为系统的保底策略,适用于穿透,击穿,雪崩 1.缓存穿透 2.缓存击穿 3.缓存雪崩 缓存——双写一致性 1.强一致性业务&#xff08…

mapbox-gl源码中解析style加载地图过程详解

我将结合 Mapbox GL JS 的源码示例,一步一步讲解 style 的解析和地图加载过程,帮助大家深入理解其内部机制。 Mapbox GL JS 是一个强大的 Web 地图库,利用 WebGL 技术渲染交互式地图。其核心功能之一是通过样式(style&#xff09…

瑞萨RA系列使用JLink RTT Viewer输出调试信息

引言 还在用UART调试程序么?试试JLINK的RTT Viewer吧!不需占用UART端口、低资源暂用、实时性高延时微秒级,这么好的工具还有什么理由不用了! 目录 一、JLink RTT Viewer 简介 二、软件安装 三、工程应用 3.1 SEGGER_RTT驱动包 3.2 手搓宏定义APP_PRINT 3.3 使用APP_…