如何仅在数据未加载时调用fetch，避免重复下载JSON数据集

问题原因 #

• 判断逻辑写反：go函数内data.length > 0的分支反而执行了fetch()，和你要实现的“没数据才请求”逻辑完全颠倒
• 初始请求位置错误：fetch写在全局作用域，页面一加载就会自动发送请求，不是点击按钮时才触发
• 没有处理异步时序问题：如果用户点击按钮时请求还没返回，直接访问data[0]会抛出异常
• fetch()没有传任何参数，属于无效调用

修正后的实现代码 #

JavaScript 代码

let arr = [[0,"Bulbasaur"],[1,"Ivysaur"],[2,"Venusaur"],[3,"Charmander"],[4,"Charmeleon"]]
let output = document.getElementById('output')
for (var key in arr) {
    let button = document.createElement('button')
    button.innerHTML = arr[key][1]
    button.addEventListener('click', go)
    button.setAttribute('data-key', arr[key][0])
    output.append(button)
}

// 存储请求到的数据集，初始为空
let pokedexData = null

async function go() {
    // 仅首次点击无数据时才发起请求
    if (!pokedexData) {
        console.log('首次加载数据集')
        const res = await fetch("https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json")
        pokedexData = await res.json()
    } else {
        console.log('复用已有数据集，不重复请求')
    }
  
    const key = this.dataset.key
    document.getElementById('img').setAttribute('src', pokedexData.pokemon[key].img)
}

HTML 代码

<img id="img" src=""/>
<div id="output"></div>

优化说明 #

• 直接用变量存储解析后的JSON对象，不需要用数组包裹，访问逻辑更简洁
• 请求逻辑移到点击事件内部，只有首次无数据时才发起请求，后续点击直接复用缓存数据
• 用async/await处理异步逻辑，避免数据未加载完成就访问的报错问题

内容的提问来源于stack exchange，提问作者Adam Scot