javascript - Call Fetch with Click - Stack Overflow

admin管理员组

文章数量:1356868

I have setup a fetch request that request a random phrase from an API. This is called when the window reloads or load initially. I created a button that when clicked would re-run the fetch I have setup. Currently it is not working and I am getting this error:

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

Javascript Code

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

fetch('')
  .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);
  });

I have setup a fetch request that request a random phrase from an API. This is called when the window reloads or load initially. I created a button that when clicked would re-run the fetch I have setup. Currently it is not working and I am getting this error:

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

Javascript Code

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

fetch('https://random-words-api.herokuapp./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

Share Improve this question Follow edited Dec 21, 2021 at 2:43 Phil 165k2525 gold badges262262 silver badges267267 bronze badges asked Dec 21, 2021 at 2:18 PythonCoder1981PythonCoder1981 4631111 silver badges2323 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Just wrap your code with a function. You can't call fetch like this.

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

function fetchData() {
  fetch('https://random-words-api.herokuapp./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);
    });
}

You need to wrap the fetch call in a custom callback, it cannot be used as an argument to addEventListener:

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

function myFetcher() {
fetch('https://random-words-api.herokuapp./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();

Your original code calls fetch() on click with no url or arguments passed into it.

Don't bind the click handler directly to fetch, that simply won't work. Create your own function that calls fetch() and bind the listener to that

const loader = async () => {
  try {
    const res = await fetch('https://random-words-api.herokuapp./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

---

To elaborate on the error message, fetch must be called bound to the window object. Any event listener is bound to the element triggering the event so it would be like trying to call

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

which results in your error.

本文标签： javascriptCall Fetch with ClickStack Overflow