如何实现无刷新调用fetch获取GIF？异步JS前端练习项目问题

修改思路 #

我们可以将请求GIF的逻辑封装为公共复用函数，同时补充搜索栏的DOM结构，分别绑定按钮点击、搜索提交的事件触发函数即可完成需求，不需要调整原有API调用逻辑。

完整可运行代码 #

<body>
  <img src="#" alt="加载的GIF" style="max-width: 500px; margin: 20px 0; display: block;" />
  <!-- 新增搜索栏结构 -->
  <div class="search-area">
    <input type="text" id="keywordInput" placeholder="输入要搜索的GIF关键词">
    <button id="searchBtn">搜索GIF</button>
  </div>
  <button id="refreshBtn">New Giffy</button>
  <script>
    const img = document.querySelector('img');
    const refreshBtn = document.querySelector('#refreshBtn');
    const keywordInput = document.querySelector('#keywordInput');
    const searchBtn = document.querySelector('#searchBtn');
    // 存储当前使用的搜索关键词，默认是你原来的akatsuki
    let currentKeyword = 'akatsuki';

    // 封装公共的请求GIF函数，接收关键词作为参数
    function getGif(keyword) {
      fetch(
          `https://api.giphy.com/v1/gifs/translate?api_key=pH9WHztAm5Yt9v5VAziRzXhOBvblWf6m&s=${encodeURIComponent(keyword)}`, {
            mode: 'cors'
          }
        )
        .then((response) => response.json())
        .then((response) => {
          img.src = response.data.images.original.url;
        })
        .catch(err => console.log('请求出错：', err));
    }

    // 页面首次加载默认获取一次GIF
    getGif(currentKeyword);

    // 绑定刷新按钮点击事件：用当前关键词请求新GIF
    refreshBtn.addEventListener('click', () => {
      getGif(currentKeyword);
    });

    // 绑定搜索事件：用输入的新关键词请求GIF
    function handleSearch() {
      const inputVal = keywordInput.value.trim();
      if (!inputVal) return alert('请输入搜索关键词');
      currentKeyword = inputVal;
      getGif(currentKeyword);
    }
    // 点击搜索按钮触发搜索
    searchBtn.addEventListener('click', handleSearch);
    // 输入框按回车也触发搜索
    keywordInput.addEventListener('keyup', e => {
      if (e.key === 'Enter') handleSearch();
    });
  </script>
</body>

核心修改说明 #

• 封装了getGif公共函数：将重复的fetch逻辑抽离，支持传入自定义关键词，避免代码冗余，还新增了简单的错误捕获逻辑便于排查问题
• 新增搜索栏DOM结构：包含文本输入框和搜索按钮，同时支持回车触发搜索，提升使用体验
• 新增事件绑定：
  • 点击New Giffy按钮会使用当前生效的关键词重新请求接口，拿到新的同主题GIF，不需要刷新页面
  • 搜索提交后会更新当前生效的关键词，再请求对应主题的GIF
• 调用API时用encodeURIComponent处理关键词：避免关键词包含特殊字符、中文时出现请求错误

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