键值对形式读取值

效果

学习啦！

异步请求数据方法：

①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>