uniapp数据缓存和发起网络请求

数据缓存


uni.onStorageSync同步的方式将数据存储到本地缓存


<template><button @click="onStorageSync()">存储数据</button>
</template><script setup>const onStorageSync = () => {// 存储数据uni.setStorageSync('username', '张三');uni.setStorageSync('age', 25);};
</script>

uni.getStorageSync从本地存储中同步读取数据​​​​​​


<template><button @click="onStorageSync()">存储数据</button>{{username}}{{age}}</template><script setup>import {ref} from 'vue';var username = ref('');var age = ref('');const onStorageSync = () => {// 存储数据uni.setStorageSync('username', '张三');uni.setStorageSync('age', 25);//获取数据并存储username.value = uni.getStorageSync('username');age.value = uni.getStorageSync('age');};
</script>

uni.removeStorageSync用于从本地存储中移除指定 key 的数据的方法。它可以帮助你在不需要某个数据项时将其从本地存储中删除。


<template><!-- 存储数据按钮,点击后将调用onStorageSync()方法 --><button @click="onStorageSync()">存储数据</button><!-- 清除指定key存储数据的按钮,点击后将调用onRemoverStorageSunc()方法 --><button @click="onRemoverStorageSunc()">清除指定key存储数据数据</button><!-- 显示从存储中获取的用户名 -->{{ username }}<!-- 显示从存储中获取的年龄 -->{{ age }}
</template><script setup>
// 初始化用户名和年龄的响应式变量,初始值为空字符串
var username = ref('');
var age = ref('');
/*** 存储数据到本地存储,并更新响应式变量的值* 使用uni.setStorageSync方法存储数据,如果存储成功,通过uni.getStorageSync方法获取数据并更新变量值*/
const onStorageSync = () => {// 存储数据uni.setStorageSync('username', '张三');uni.setStorageSync('age', 25);//获取数据并存储username.value = uni.getStorageSync('username');age.value = uni.getStorageSync('age');
};
/*** 移除本地存储中指定key的数据,并更新响应式变量的值* 使用uni.removeStorageSync方法移除存储的数据,然后尝试重新获取并更新变量值*/
const onRemoverStorageSunc = () => {uni.removeStorageSync('username');uni.removeStorageSync('age');// 尝试重新获取数据并更新,此时数据已被移除,预期值为null或默认值username.value = uni.getStorageSync('username');age.value = uni.getStorageSync('age');
}
</script>

发起网络请求


uni.request 是 Uni-app 框架中用于发起 HTTP 网络请求的一个 API。它允许开发者向服务器发送请求以获取数据或发送数据。下面是一些基本的用法和作用:

        


作用

  • 数据获取:从远程服务器获取数据,例如获取 JSON 格式的数据。
  • 数据提交:向服务器发送数据,比如提交表单数据或上传文件。
  • 服务交互:与第三方服务进行通信,如身份验证、支付接口调用等。

基本用法

uni.request 接受一个对象作为参数,其中包含请求的相关配置项,比如 URL、请求方法、请求头、请求体等,并且可以指定回调函数来处理请求的结果。

参数说明
  • url (String):请求的地址。
  • data (Object/String):请求的参数,如果是 GET 请求,这些参数会被拼接在 URL 后面;如果是 POST 请求,则作为请求体发送。
  • method (String):请求的方法,默认为 GET,可选值有 GETPOSTPUTDELETEHEADOPTIONS 等。
  • timeout (Number):请求超时时间,单位毫秒,默认值为 60000。
  • complete (Function):接口调用结束的回调函数(请求结束时执行,无论成功或失败)。
  • success (Function):接口调用成功的回调函数。
  • fail (Function):接口调用失败的回调函数

<template>
</template><script setup>
// 使用uni.request发起一个GET请求到指定的URL
uni.request({url: 'https://jsonplaceholder.typicode.com/todos/1', // 请求的URLdata: {key: 'value' // 请求携带的数据},method: 'GET', // 请求方法header: {'Content-Type': 'application/json', // 设置内容类型为JSON'Custom-Header': 'hello' // 自定义请求头},success: function(res) {console.log(res.data); // 处理返回的数据},fail: function(err) {console.error('请求失败:', err); // 在请求失败时输出错误信息}
})
</script>
<template><div><h1>请求结果</h1><pre>{{ requestResult }}</pre></div>
</template><script setup>
import { ref } from 'vue';// 初始化状态
const requestResult = ref('');// 使用uni.request发起GET请求
uni.request({url: 'https://jsonplaceholder.typicode.com/todos/1', // 请求的URLdata: {key: 'value' // 请求的参数},method: 'GET', // 请求方法header: {'Content-Type': 'application/json', // 设置请求头的Content-Type'Custom-Header': 'hello' // 自定义请求头},success: function (res) {// 请求成功时的回调函数requestResult.value = JSON.stringify(res.data, null, 2); // 将数据转换为字符串并存储},fail: function (err) {// 请求失败时的回调函数console.error('请求失败:', err); // 输出错误信息到控制台requestResult.value = '请求失败'; // 设置状态为请求失败}
});
</script>



 

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

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

相关文章

Liunx常用指令

1. 文件和目录管理 ls 用法&#xff1a;ls [选项] [文件/目录]示例&#xff1a;ls -l&#xff08;以长列表格式显示&#xff09;&#xff0c;ls -a&#xff08;显示所有文件&#xff0c;包括隐藏文件&#xff09;。 cd 用法&#xff1a;cd [目录]示例&#xff1a;cd ..&#xf…

刷题活动(旋转和翻转)

前两天打了CCPC网络赛&#xff08;让打老实了&#xff09;&#xff0c;现在认识到了刷题的重要性&#xff0c;于是我开创了这么个栏目&#xff0c;我们一起刷一下题。 还是在ACwing网站上刷题 旋转和翻转 首先&#xff0c;申一下题目&#xff0c;输入一个数字 n &#xff0c;来…

【堆的应用--C语言版】

前面一节我们都已将堆的结构&#xff08;顺序存储&#xff09;已经实现&#xff0c;对树的相关概念以及知识做了一定的了解。其中我们在实现删除操作和插入操作的时候&#xff0c;我们还同时实现了建大堆&#xff08;小堆&#xff09;的向上&#xff08;下&#xff09;调整算法…

JVM 调优篇2 jvm的内存结构以及堆栈参数设置与查看

一 jvm的内存模型 2.1 jvm内存模型概览 2.2 pc计数器 它是一块很小的内存空间&#xff0c;集合可以忽略不记&#xff0c;也是运行速度最快的存储区域。不会随着程序的运行需要更大的空间。 在jvm规范中&#xff0c;每个线程都有它自己的程序计数器&#xff0c;是线程私有的&…

DIC技术助力新能源汽车主机厂力学测试研发与整车性能提升

在新能源汽车研发过程中&#xff0c;非接触式全视场应变DIC测量方案&#xff0c;越来越受到汽车主机厂的信赖与认可。传统接触式传感器&#xff0c;在精度、灵活性和数据处理能力上存在局限。DIC技术可提供精确、高效、全视场、便捷的非接触式测量解决方案。 在汽车研发阶段&a…

C语言知识体系思维导图

为了更清晰地描述C语言知识体系&#xff0c;笔者用一个结构化的思维导图来概括其主要组成部分。见下&#xff1a; 这个思维导图旨在提供一个全面而系统的视角&#xff0c;帮助学习者逐步构建扎实的C语言知识体系。随着学习的深入&#xff0c;可以根据个人兴趣和职业需求&#x…

《Diffusion Models Without Attention》CVPR2024

摘要 这篇论文探讨了在高保真图像生成领域&#xff0c;去噪扩散概率模型&#xff08;Denoising Diffusion Probabilistic Models, DDPMs&#xff09;的重要性。尽管DDPMs在捕捉复杂视觉分布方面表现出色&#xff0c;但在高分辨率图像生成上面临显著的计算挑战。现有的方法&…

计算机毕业设计 《计算机基础》网上考试系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

大模型分离架构学习记录

GPU Direct GPU 网络的情况已经发生了很大变化。每个 GPU 都有自己的内部互联&#xff0c;例如 NVIDIA 的 A100 或 H800&#xff0c;它们内部的 NVLink 互联可以达到 600GB 甚至 900GB。这种内部互联与外部以太网网络集群设计之间存在耦合关系。GPU 是单机多网卡的&#xff0c…

2409wtl,网浏包装

原文 介绍 本教程帮助你用IE引擎构建一个基于WTL,并使用我编写的处理IWebBrowser2接口包装类的迷你浏览器. 因为知道代码可能很难读,因此本教程帮助你逐步开发一个迷你浏览器. 背景 大部分项都与互联网浏览有关.我常用超文本视图使用SDI. 有时,我要用真正的浏览器函数,因…

创意无限:五款AI绘画应用,让艺术创作更简单

随着人工智能技术的不断进步&#xff0c;AI绘画已经成为一个不可忽视的现象。在短视频平台上&#xff0c;用户只需轻触屏幕&#xff0c;就能生成风格各异的画作&#xff0c;这种一键生成的特效迅速吸引了大量关注。AI绘画技术的快速发展&#xff0c;不仅让艺术创作变得更加便捷…

国产化数据库挑战及发展趋势

非国产数据库如Oracle、MySQL和MSSQL等在某些领域占据重要地位&#xff0c;但国产数据库的市场份额正在逐步提升&#xff0c;特别是在政策支持和市场需求的双重推动下&#xff0c;国产数据库的替代进程正在加速。 一、国产数据库市场规模 2024年中国数据库市场规模预计为543.1亿…

Python 数学建模——灰色关联度分析

文章目录 介绍原理代码实例 介绍 灰色关联度分析&#xff0c;可以反映两个序列 X ( k ) X(k) X(k) 和 Y ( k ) Y(k) Y(k) 之间的联系&#xff0c;用 r r r 表征。然而&#xff0c; r r r 的绝对大小并没有过多的意义&#xff0c;它的意义只在不同的 r r r 进行比较时体现。…

Java设计模式【命令模式】-行为型

1. 介绍 命令模式&#xff08;Command Pattern&#xff09; 是一种行为型设计模式&#xff0c;它将一个请求封装为一个对象&#xff0c;从而使我们可以用不同的请求对客户端进行参数化&#xff0c;并且支持请求的排队、记录日志以及撤销、重做等功能。命令模式将请求的发送者与…

微信小程序路由跳转之间的区别

navigateTo&#xff1a; 功能描述&#xff1a; navigateTo用于保留当前页面&#xff0c;跳转到应用内的某个页面。但是不能跳到 tabbar 页面。 页面栈变化&#xff1a; 当使用navigateTo进行页面跳转时&#xff0c;当前页面会被推入页面栈中&#xff0c;但不会被销毁&#xff0…

掌握Go语言中的时间与日期操作

Go语言中的时间与日期操作 在编写程序时&#xff0c;处理时间和日期看似是一项无关紧要的任务&#xff0c;但在需要同步多个任务或从文本文件中读取时间时&#xff0c;它的重要性便凸显出来。Go语言中的time包为我们提供了丰富的时间与日期操作功能。本文将详细介绍如何在Go语…

C语言蓝桥杯:语言基础

竞赛常用库函数 最值查询 min_element和max_element在vector(迭代器的使用) nth_element函数的使用 例题lanqiao OJ 497成绩分析 第一种用min_element和max_element函数的写法 第二种用min和max的写法 二分查找 二分查找只能对数组操作 binary_search函数&#xff0c;用于查找…

提升效率必备,掌握这些Shell文本处理技能!

Shell脚本是Linux系统里的一项基本功&#xff0c;就算它的语法看起来有点奇怪&#xff0c;读起来也不是特别顺畅&#xff0c;但在一些情况下&#xff0c;它仍然是最能干的解决办法。学好Shell脚本&#xff0c;不仅让你对Linux系统了解更深&#xff0c;还能让你手快地做好很多日…

python的特性,以及和Java的区别

两者各有各的魅力&#xff0c;像是编程语言界的两个明星选手。咱们先看看Python的几个重要特性&#xff0c;然后来个友好对比&#xff0c;看看Java和Python在哪些方面有“性格差异”吧&#xff01; Python的主要特性 简洁易读&#xff1a; Python最出名的就是它的简洁性&#…

使用程序方式获取与处理MySQL表数据

8.1  执行多条语句获取 MySQL 表数据 8.1.1  MySQL 中的常量 8.1.2  MySQL 中的变量 1&#xff0e;用户变量 用户可以在表达式中使用自己定义的变量&#xff0c;这样的变量称为用户变量。 用户变量在使用前必须定义和初始化&#xff0c;如果使用没有初始化的变量&#x…