使用 Click 调用 Fetch

Posted 2023-02-27

【中文标题】使用 Click 调用 Fetch

【英文标题】：Call Fetch with Click

【发布时间】：2022-01-22 13:15:26

【问题描述】：

我已经设置了一个从 API 请求随机短语的获取请求。这在窗口重新加载或最初加载时调用。我创建了一个按钮，单击该按钮将重新运行我设置的获取。目前它不起作用，我收到此错误：

Uncaught (in promise) TypeError: 'fetch' called on an object that doesn't implement interface Window.

javascript 代码

var generateBtn = document.getElementById('generateSP');
generateBtn.addEventListener('click', fetch);

fetch('https://random-words-api.herokuapp.com/w?n=10')
  .then(
    function(response) 
      if (response.status !== 200) 
        console.log('Looks like there was a problem. Status Code: ' +
          response.status);
        return;
      
      response.json().then(function(data) 
        console.log(data);
        document.getElementById('w3review').value = data;
      );
    
  )
  .catch(function(err) 
    console.log('Fetch Error :-S', err);
  );

【参考方案1】：

不要将点击处理程序直接绑定到fetch，这根本行不通。创建您自己的调用fetch() 的函数并将侦听器绑定到该函数

const loader = async () => 
  try 
    const res = await fetch('https://random-words-api.herokuapp.com/w?n=10')
    if (!res.ok) 
      throw new Error(`$response.status: $await response.text()`)
    
    const data = await response.json()
    console.log(data);
    document.getElementById('w3review').value = data;
   catch (err) 
    console.error(err)
  


document.getElementById('generateSP').addEventListener('click', loader);

loader() // initial run

---

要详细说明错误消息，fetch 必须调用绑定到 window 对象。任何事件监听器都绑定到触发事件的元素，所以它就像试图调用

const boundFetch = window.fetch.bind(generateBtn)
boundFetch(event)

这会导致您的错误。

【参考方案2】：

您需要将 fetch 调用包装在自定义回调中，它不能用作 addEventListener 的参数：

var generateBtn = document.getElementById('generateSP');
generateBtn.addEventListener('click', myFetcher);

function myFetcher() 
fetch('https://random-words-api.herokuapp.com/w?n=10')
  .then(
    function(response) 
      if (response.status !== 200) 
        console.log('Looks like there was a problem. Status Code: ' +
          response.status);
        return;
      
      response.json().then(function(data) 
        console.log(data);
        document.getElementById('w3review').value = data;
      );
    
  )
  .catch(function(err) 
    console.log('Fetch Error :-S', err);
  )

myFetcher();

您的原始代码在点击时调用 fetch()，没有传递任何 url 或参数。

【参考方案3】：

只需用函数包装您的代码。你不能这样调用 fetch。

var generateBtn = document.getElementById('generateSP');
generateBtn.addEventListener('click', fetchData);

function fetchData() 
  fetch('https://random-words-api.herokuapp.com/w?n=10')
    .then(function (response) 
      if (response.status !== 200) 
        console.log(
          'Looks like there was a problem. Status Code: ' + response.status
        );
        return;
      
      response.json().then(function (data) 
        console.log(data);
        document.getElementById('w3review').value = data;
      );
    )
    .catch(function (err) 
      console.log('Fetch Error :-S', err);
    );