Fetch API Function

JavaScript
1

I am looking for some good articles on the fetch Api function. I am looking for articles ,tutorials and advice.

I have googled the subject. There is a lot of poor articles and tutorials. Just looking for some solid content to master the subject.

2

We’ve got this article over on the main site.

It’s a bit old, but IMO, does a good job of introducing the basics.

If you read the article, I would be interested to hear what you think. And if you get stuck or anything is not clear, feel free to ask questions here.

3

Hmm? :thinking: The only thing that puzzles me is the await as if the await keyword is present, the asynchronous function is paused until the request completes. Doesn’t that negate the purpose of FETCH?

I have been using FETCH in the following snippet of code a long time now for a long time now and had not problems.

    /* Create High Score Data using fetch */
    const createHSTable = (retrieveUrl, succeed, fail) => {

        let max = 5; // Maximum Records to Be Displayed
        let maximum = {};
        maximum.max_limit = max;

        fetch(retrieveUrl, {
            method: 'POST', // or 'PUT'
            body: JSON.stringify(maximum)
        })
            .then((response) => handleErrors(response))
            .then((data) => succeed(data))
            .catch((error) => fail(error));
    };
4

Not really. async...await is more-or-less syntactic sugar on top of promises.

Your code sample is fine as it is, but could also be rewritten something like this:

const createHSTable = async (retrieveUrl, succeed, fail) => {
  ...
  try {
    const response = await fetch(retrieveUrl, {
      method: 'POST', // or 'PUT'
      body: JSON.stringify(maximum)
    });

    const data = await handleErrors(response);
  } catch (error) {
    fail(error);
  }

  succeed(data);
};

It just depends what you find more readable.

FWIW, I’m not a big fan of the try...catch syntax.