效果
学习啦！
异步请求数据方法：
①
async/await<script setup> import { nextTick, onMounted } from 'vue'let Info = {}const loadData = async () => {try {const response = await fetch('/json/info.json')const data = await response.json()data.forEach(item => {console.log(item, 'item')Info[item.userId] = item})console.log(Info, 'Info')} catch (err) {console.log(err)} }onMounted(async () => {await loadData() // 等待数据加载完成nextTick(() => {let id = 'uj9'console.log(Info, 'Info') // 此时 Info 已经被填充let Aitem = Info[id]console.log(Aitem, 'Aitem')}) }) </script>②使用 Promise
<script setup> import { nextTick, onMounted } from 'vue'let Info = {}const loadData = () => {return new Promise((resolve, reject) => {fetch('/json/info.json').then(res => res.json()).then(data => {data.forEach(item => {console.log(item, 'item')Info[item.userId] = item})console.log(Info, 'Info')resolve()}).catch(err => {console.log(err)reject(err)})}) }onMounted(() => {loadData().then(() => {nextTick(() => {let id = 'uj9'console.log(Info, 'Info') // 此时 Info 已经被填充let Aitem = Info[id]console.log(Aitem, 'Aitem')})}).catch(err => {console.error('Error loading data:', err)}) }) </script>③使用 Vue 的响应式系统
<script setup> import { ref, nextTick, onMounted } from 'vue'let Info = ref({})const loadData = async () => {try {const response = await fetch('/json/info.json')const data = await response.json()data.forEach(item => {console.log(item, 'item')Info.value[item.userId] = item})console.log(Info.value, 'Info')} catch (err) {console.log(err)} }onMounted(async () => {await loadData() // 等待数据加载完成nextTick(() => {let id = 'uj9'console.log(Info.value, 'Info') // 此时 Info 已经被填充let Aitem = Info.value[id]console.log(Aitem, 'Aitem')}) }) </script>异步请求原理：
事件循环（Event Loop）：
JavaScript 是单线程的，这意味着它一次只能执行一段代码。为了处理耗时的操作（如网络请求），JavaScript 使用事件循环机制。当一个异步操作（如
fetch请求）被发起时，JavaScript 不会等待该操作完成，而是继续执行后续的代码。当异步操作完成时，其结果会被放入任务队列（Task Queue 或 Microtask Queue），等待事件循环的下一次迭代执行。
Promise：是一种处理异步操作的对象。它代表一个异步操作的最终完成（或失败）及其结果值。
fetch返回一个Promise，当请求完成时，Promise会被解决（resolved）//基本用法 fetch(url).then(response => response.json()) // 处理响应.then(data => console.log(data)) // 处理数据.catch(error => console.error(error)); // 处理错误总结:
异步请求：通过
fetch发起网络请求，返回一个Promise。事件循环：JavaScript 使用事件循环机制处理异步操作，确保不会阻塞主线程，即不会影响线程。
Promise：用于处理异步操作的结果，包括成功和失败的情况。
nextTick：确保在 DOM 更新后执行某些操作
代码
json数据存放路径：/json/info.json<template><div style="width: 100%;height: 100px; display: flex;align-items: center;" v-for="i in Aitem" :key="i.userId">艺名：<h1 style="color: brown;">{{ i.username }}</h1><br />姓名：<h1 style="color: blue;">{{ i.fullName }}</h1></div>
</template><script setup>
import { nextTick, ref, onMounted } from 'vue'let Info = {}const loadData = () => {return new Promise((resolve, reject) => {fetch('/json/info.json').then(res => res.json()).then(data => {data.forEach(item => {console.log(item, 'item')Info[item.userId] = item})console.log(Info, 'Info')resolve()}).catch(err => {console.log(err)reject(err)})})
}
const Aitem = ref([])
onMounted(() => {loadData().then(() => {nextTick(() => {let id = 'uj9'console.log(Info, 'Info') // 此时 Info 已经被填充Aitem.value = Info[id] ? [Info[id]] : []console.log(Aitem.value, 'Aitem')})}).catch(err => {console.error('Error loading data:', err)})
})
</script>
<style>
#app {width: 100%;height: 100vh;
}
</style>
