数据缓存
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', // 请求的URL
data: {
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', // 请求的URL
data: {
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>
