如何修改现有JS代码使用Promise.all调用多个API实现多数据渲染

改造后的完整代码 #

// 获取两个渲染容器DOM
const localList = document.getElementById('localList');
const itemList = document.getElementById('itemList');
const searchBar = document.getElementById('searchBar');
// 定义两个变量分别存储两个接口的数据
let localWords = [];
let itemWords = [];

// 搜索事件绑定
searchBar.addEventListener('keyup', (e) => {
    const searchString = e.target.value.toLowerCase();
    // 分别过滤两个数据集
    const filteredLocal = localWords.filter(word => word.name.toLowerCase().includes(searchString));
    const filteredItem = itemWords.filter(word => word.name.toLowerCase().includes(searchString));
    // 分别渲染到对应容器
    renderList(filteredLocal, localList);
    renderList(filteredItem, itemList);
});

// 批量加载数据的方法
const loadAllData = async () => {
    try {
        // 用Promise.all同时发起两个接口请求
        const [localRes, itemRes] = await Promise.all([
            fetch('https://duhnunes.github.io/api/local.json'),
            fetch('https://duhnunes.github.io/api/item.json') // 可替换为实际item.json的接口地址
        ]);
        // 同时解析两个接口的返回值
        localWords = await localRes.json();
        itemWords = await itemRes.json();
        // 首次渲染两个列表
        renderList(localWords, localList);
        renderList(itemWords, itemList);
    } catch (err) {
        console.error('数据加载失败：', err);
    }
};

// 通用渲染方法，接收数据源和目标容器两个参数
const renderList = (words, container) => {
    const htmlString = words
        .map(character => {
            return `
            <div class="voc-box-content">
                <h5>${character.name} - ${character.trans} [${character.type} - ${character.type2}]</h5>
                <p>${character.description}</p>
            </div>
        `;
        })
        .join('');
    container.innerHTML = htmlString;
};

// 执行数据加载
loadAllData();

核心修改说明 #

• 将原来单数据源的渲染方法改成通用的renderList函数，传入不同的数据源和DOM容器即可复用渲染逻辑，不用重复写结构代码
• 用Promise.all并行发起两个接口请求，相比串行请求加载速度更快，两个请求同时出发，等所有请求都返回后再统一处理结果
• 单独定义两个变量存储两个接口的原始数据，搜索时分别过滤两个数据集，再各自渲染到对应的容器，保证两个列表的搜索过滤功能正常
• 如果不需要全局搜索同时过滤两个列表，可根据需求自行调整搜索事件里的过滤逻辑

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