调用 Fetch with Click

Question

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

Uncaught (in promise) TypeError: 'fetch' called on an object that does not 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);
  });

Answer 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)

这会导致您的错误。

Answer 2

只需用一个函数包装您的代码。你不能这样调用 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);
    });
}

Answer 3

您需要将 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 或传递给它的参数。

调用 Fetch with Click

Call Fetch with Click

javascript

fetch-api