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', // 请求的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>