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，可选值有 GET, POST, PUT, DELETE, HEAD, OPTIONS 等。
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>