使用 Click 调用 Fetch答案

【问题标题】：Call Fetch with Click使用 Click 调用 Fetch
【发布时间】：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);
  });

【问题讨论】：

标签： javascript fetch-api

【解决方案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);
    });
}

【讨论】：