开发者问题收集

点击调用获取

2021-12-21
7105
javascript fetch-api

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

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);
  });
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);
    });
}
2021-12-21

您需要将 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 或参数。

Matt Korostoff
2021-12-21

不要将点击处理程序直接绑定到 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)

这会导致错误。

Phil
2021-12-21