uni-app发起网络请求的三种方式

uni.request(OBJECT) 

发起网络请求 

具体参数可查看官方文档uni-app

data:请求的参数;

header:设置请求的 header,header 中不能设置 Referer;

method:请求方法;

timeout:超时时间,单位 ms(默认60000);

dataType:如果设为 json,会对返回的数据进行一次 JSON.parse,非 json 不会进行 JSON.parse;

....

免费测试api接口:https://jsonplaceholder.typicode.com/ 

第一种

<template></template><script setup>function request(){uni.request({url:"https://jsonplaceholder.typicode.com/posts", //开发者服务器接口地址method:"post",   //请求方法success:res=>{   //收到开发者服务器成功返回的回调函数console.log(res);}})}request();</script><style lang="scss" scoped></style>

第二种

<template></template><script setup>function request(){uni.request({url:"https://jsonplaceholder.typicode.com/posts"}).then(res=>{arrs.value=res.data})}request();</script><style lang="scss" scoped></style>

第三种

 异步同步化

<template></template><script setup>async function request(){let res = await uni.request({url:"https://jsonplaceholder.typicode.com/posts"})arrs.value=res.data}request();</script><style lang="scss" scoped></style>

示例:

<template><view class="out" v-for="item in arrs"><view class="title">{{item.title}}</view><view class="content">{{item.body}}</view></view>
</template><script setup>let arrs = ref();function request(){uni.request({url:"https://jsonplaceholder.typicode.com/posts"}).then(res=>{arrs.value=res.data})}request();
</script><style lang="scss" scoped>.out{padding: 30rpx;.title{font-size: 40rpx;}.content{margin: 15rpx 0;border-bottom: 1px solid #696969;color: #696969;}}       
</style>

( 注:ref 没有使用 import { ref } from 'vue'; 导入是因为下载了插件(具体可查看博客),没有下载的需常规导入) 

 运行结果:

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

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

相关文章

【linux】更换ollama的deepseek模型默认安装路径

【linux】更换ollama的deepseek模型默认安装路径 文章目录 【linux】更换ollama的deepseek模型默认安装路径Ollama 默认安装路径及模型存储路径迁移ollama模型到新的路径1.创建新的模型存储目录2.停止ollama3.迁移现有模型4.修改 Ollama 服务配置5.重启ollama6.验证迁移是否成功…

「软件设计模式」装饰者模式(Decorator)

深入解析装饰者模式&#xff1a;动态扩展功能的艺术&#xff08;C实现&#xff09; 一、模式思想与应用场景 1.1 模式定义 装饰者模式&#xff08;Decorator Pattern&#xff09;是一种结构型设计模式&#xff0c;它通过将对象放入包含行为的特殊封装对象中&#xff0c;动态地…

java项目打包成docker镜像步骤

java项目打包成docker镜像步骤 1.使用maven把java文件打包成可执行的jar包2. 打包成Dockerfile3. 把jar包和DockerFile两个文件上传到服务器上。4. 制作镜像5.启动容器 1.使用maven把java文件打包成可执行的jar包 2. 打包成Dockerfile # 先从dockerhub找到对应版本的openjdk的…

后台管理系统-项目初始化

认识vue-admin **核心交付:** 为什么要基于现成架子二次开发 什么是二次开发:基于已有的代码(项目工程,脚手架)开进行新功能的开发 所以看懂已有的框架中的既有代码,变得很重要了 1. 背景知识 后台管理系统是一种最常见的应用模式,不同的管理系统之间有很多相似的地方…

【Scrapy】Scrapy教程6——提取数据

前一小节我们拿到了页面的数据,那页面中那么多内容,我们想要其中的部分内容,该如何获取呢?这就需要对我们下载到的数据进行解析,提取出来想要的数据,这节就讲讲如何提取数据。 引入 我们编辑保存下来的shouye.html文件看下,发现这是什么鬼,全是如下图的代码。 没错…

RabbitMQ 的工作模式

目录 工作模式 Simple&#xff08;简单模式&#xff09; Work Queue&#xff08;工作队列&#xff09; Publish/Subscribe&#xff08;发布/订阅&#xff09; Exchange&#xff08;交换机&#xff09;? Routing&#xff08;路由模式&#xff09; Topics&#xff08;通配…

Copilot Next Edit Suggestions(预览版)

作者&#xff1a;Brigit Murtaugh&#xff0c;Burke Holland 排版&#xff1a;Alan Wang 我们很高兴向你介绍在本次 Visual Studio Code 发布中&#xff0c;关于 GitHub Copilot 的三个预览功能&#xff1a; Next Edit Suggestions&#xff08;NES&#xff09;Copilot Edits 的…

[qt5学习笔记]Application Example示例程序源码解析

开发环境问题 vs2022下直接打开ui、ts文件失败 解决办法如下图&#xff0c; 设置designer独立运行。估计是嵌入运行存在些许bug。 同理&#xff0c;ts编辑工具linguist也存在这个问题。 qrc rc的编辑嵌入编辑都正常&#xff0c;但分离式更稳定可靠。 qt creator编译失败 原…

RabbitMQ介绍以及基本使用

文章目录 一、什么是消息队列&#xff1f; 二、消息队列的作用&#xff08;优点&#xff09; 1、解耦 2、流量削峰 3、异步 4、顺序性 三、RabbitMQ基本结构 四、RabbitMQ队列模式 1、简单队列模式 2、工作队列模式 3、发布/订阅模式 4、路由模式 5、主题模式 6、…

【数据可视化-17】基于pyecharts的印度犯罪数据可视化分析

&#x1f9d1; 博主简介&#xff1a;曾任某智慧城市类企业算法总监&#xff0c;目前在美国市场的物流公司从事高级算法工程师一职&#xff0c;深耕人工智能领域&#xff0c;精通python数据挖掘、可视化、机器学习等&#xff0c;发表过AI相关的专利并多次在AI类比赛中获奖。CSDN…

基于SpringBoot+Vue的在线电影购票系统的设计与实现

获取源码&#xff1a;SpringBootVue的在线电影购票系统: 用户&#xff1a;登录、注册、忘记密码、主页、猜你想看、电影详情、选座购票、正在热映、即将上映、影院、排行榜、影视快报、平台公告、个人中心、我的收藏、想看、改签、评论、排行等功能管理员&#xff1a;登录、首页…

LabVIEW无刷电机控制器检测系统

开发了一种基于LabVIEW的无刷电机控制器检测系统。由于无刷电机具有高效率、低能耗等优点&#xff0c;在电动领域有取代传统电机的趋势&#xff0c;而无刷电机的核心部件无刷电机控制器产量也在不断增长。然而&#xff0c;无刷电机控制器的出厂检测仍处于半自动化状态&#xff…

C#功能测试

List 内部元素为引用 src[0]为"11" List<Source> src new List<Source>(); src.Add(new Source() { Name "1", Age 1, Description "1" }); src.Add(new Source() { Name "2", Age 2, Description "2"…

八种单例模式详解

亲爱的朋友们&#xff0c;大家好&#xff01; 今天是 CSDN博客之星 投票的开始日&#xff01;非常感谢你们在过去的时间里给予我无私的支持和鼓励&#xff0c;这一路走来&#xff0c;正是因为有你们的帮助&#xff0c;我才能不断进步&#xff0c;走得更远。 目前&#xff0c;…

STM32 PWM脉冲宽度调制介绍

目录 背景 PWM 模式 影子寄存器和预装载寄存器 PWM对齐模式 PWM 边沿对齐模式 向上计数配置 向下计数的配置 PWM 中央对齐模式 程序 第一步、使能GPIOB组、AFIO、TIM3外设时钟 第二步、输出通道端口配置​编辑 第三步、定时器配置产生频率 第四步、PWM输出配置 第…

Java面试第二山!《计算机网络》!

在 Java 面试里&#xff0c;计算机网络知识是高频考点&#xff0c;今天就来盘点那些最容易被问到的计算机网络面试题&#xff0c;帮你轻松应对面试&#xff0c;也方便和朋友们一起探讨学习。 一、HTTP 和 HTTPS 的区别 1. 面试题呈现 HTTP 和 HTTPS 有什么区别&#xff1f;在…

deepseek-v3在阿里云和腾讯云的使用中的差异

随着deepseek在各大云商上线&#xff0c;试用了下阿里云和腾讯云的deepseek服务&#xff0c;在回答经典数学问题9.9和9.11谁大时&#xff0c;发现还是有差异的。将相关的问题记录如下。 1、问题表现 笔者使用的openai的官方sdk go-openai。 因本文中测验主要使用阿里云和腾讯…

蓝桥杯单片机基础部分——单片机介绍部分

前言 这个部分是额外的&#xff0c;我看我有的学弟学妹基础比较差&#xff0c;对板子上面的模块不太熟悉&#xff0c;这里简单的介绍一下 蓝桥杯单片机 这个就是蓝桥杯单片机的板子&#xff0c;它的主控芯片是&#xff08;IAP15F2K61S2&#xff09;&#xff0c;这里就对他常用…

百度搜索和文心智能体接入DeepSeek满血版——AI搜索的新纪元

在当今数字化时代&#xff0c;搜索引擎作为互联网信息获取的核心工具&#xff0c;正经历着前所未有的变革。据悉&#xff0c;2025年2月16日&#xff0c;百度搜索和文心智能体平台宣布全面接入DeepSeek和文心大模型的最新深度搜索功能&#xff0c;搜索用户可免费使用DeepSeek和文…

redis解决高并发看门狗策略

当一个业务执行时间超过自己设定的锁释放时间&#xff0c;那么会导致有其他线程进入&#xff0c;从而抢到同一个票,所有需要使用看门狗策略&#xff0c;其实就是开一个守护线程&#xff0c;让守护线程去监控key&#xff0c;如果到时间了还未结束&#xff0c;就会将这个key重新s…