JS点击搜索按钮新增接口URL未生效，仅返回热门GIF数据问题排查

问题梳理 #

• 执行时机错误：init函数执行时就直接调用了getAllUrls发起请求，此时urls数组里只有热门GIF的接口地址。点击搜索按钮仅向urls数组新增了地址，但没有重新触发批量请求逻辑，所以新地址永远不会被请求。
• 表单默认行为冲突：搜索按钮放在form标签内，点击后会触发默认的表单提交，导致页面刷新，所有本地状态重置，逻辑直接中断。
• 接口URL拼接错误：搜索地址的q参数和api_key参数之间缺少&分隔符，就算发起请求也会因为参数格式错误返回失败。
• 错误捕获逻辑失效：同步的try...catch无法捕获Promise.all产生的异步错误，现有错误捕获代码不会生效。

修复后代码 #

HTML代码 #

<body>
    <form id="searchForm">
        <label for="search">Search</label>
        <input id="search" type="search">
        <button id="btnSearch">Go</button>
    </form>
</body>

JS代码 #

function getAllUrls(urls) {
    // 改用Promise的catch方法捕获异步错误
    return Promise.all(
        urls.map(url => fetch(url)
            .then(response => {
                if (!response.ok) throw new Error('请求失败')
                return response.json()
            })
            .then(content => {
                console.log('[+]', content.data)
                console.log('[-]', content.meta)
                return content
            })
        )
    ).catch(e => console.log('请求错误：', e))
}

function init() {
    let apiKey = 'xxxx';
    let urls = [
        `https://api.giphy.com/v1/gifs/trending?api_key=${apiKey}&limit=20&offset=3`,
    ]
    const searchForm = document.getElementById('searchForm')

    // 监听表单提交事件，阻止默认提交刷新行为
    searchForm.onsubmit = async function(e) {
        e.preventDefault()
        let userInput = document.getElementById('search').value.trim()
        if (!userInput) return
        // 修复URL拼接错误，添加&分隔符
        let searchUrl = `https://api.giphy.com/v1/gifs/search?q=${userInput}&api_key=${apiKey}&limit=20&offset=5`
        urls.push(searchUrl)
        // 新增url后重新发起批量请求
        await getAllUrls(urls)
    }

    // 初始化时先请求一次热门数据
    getAllUrls(urls)
}

init()

补充说明 #

如果不需要每次搜索都重复请求历史所有URL，可以根据业务需求调整逻辑：比如仅请求新增的搜索URL，或者每次搜索后清空urls数组再添加地址发起请求。

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