fetch API GET request with array params. How?

Question

In an attempt to get rid of Ajax calls I have changed my code to use the Javascript Fetch API which is very clean.

In the example below, I had to comment out the body fetch option of the request as well as change the method option to GET.

I did this to see if it would work and.. it did.

Now I am wondering how am I going to pass the body fetch option params to the request.

Lastly, I have run into something called AbortController Interface and would like to know if you can show me how to implement it in this sample below or if it cannot benefit from it at all.

Thank you

// POST DATA
function postData(url = 'https://api.myjson.com/bins/elr1f', params = [{param1Key: 'param1Val'}]) {

  const fetchOptions = {
                    method: 'GET', // *GET, POST, PUT, DELETE, etc.
                    mode: 'cors', // no-cors, cors, *same-origin
                    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
                    credentials: 'same-origin', // include, *same-origin, omit
                    headers: {
                      // 'Content-Type': 'application/x-www-form-urlencoded',
                      'Content-Type': 'application/json',
                      // 'Content-Type', 'text/xml'
                    },
                    redirect: 'follow', // manual, *follow, error
                    referrer: 'no-referrer', // no-referrer, *client
                    // body:     JSON.stringify(params), // body data type must match "Content-Type" header
                };

  // Default fetchOptions are marked with *
    return fetch(url, fetchOptions)

    .then(function(response) {

      // RESPONSE VALIDATION
      switch (response.status) {
        case 200:
          // code...
          console.info('HTTP response status: 200 OK');
          return response;
          break;

        case 404:
          // code...
          throw new Error('HTTP response status: 404 Not Found.');
          break;

        case 500:
          // code...
          throw new Error('HTTP response status: 500 Internal Server Error.');
          break;

        case 503:
          // code...
          throw new Error('HTTP response status: 503 Service Unavailable.');
          break;
        
        default:
          // code...
          break;
      }
    
    })

    // parse JSON response into native JavaScript object(s) 
    .then (response => response.json() )
    // access the node we want
    .then (response => console.info(response.users) )
    // catch a freaking error
    .catch(error    => console.error(error) ); 
}

<button onclick="postData()">GET USERS</button>

AussieJoe · Accepted Answer · 2019-08-26 16:14:46Z

3

GET request, you can only specify parameters in the URL, you should not have a body...

With a POST request, you can supply parameters in the body. A POST request can behave similar to a GET request, no problem.

edited Aug 26, 2019 at 16:14

answered Aug 26, 2019 at 15:55

AussieJoe

1,3901 gold badge16 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

user47589 Over a year ago

A GET request can have a body, but servers are obligated to ignore it. stackoverflow.com/questions/978061/http-get-with-request-body

suchislife Over a year ago

So Ajax has been lying to me this whole time.. letting me do things I should receive errors for...

suchislife Over a year ago

@Amy I think this does it. "Whatever advantages that exist to using GET over POST, exist because of how HTTP is designed. Those advantages no longer exist, when you violate the standard in this way. Therefore there's only one reason left to use GET + a request body instead of POST: Aesthetics. Don't sacrifice robust design over aesthetics."

user47589 Over a year ago

@AussieJoe I don't know what you're disagreeing with, or why. The part you quoted isn't in conflict with anything I said.

AussieJoe Over a year ago

@Amy I updated my answer, based on your reply. You still cannot have a body with a GET and make it work how he is proposing. It's misleading to imply that you CAN do it, but really CANNOT do it.

|

Collectives™ on Stack Overflow

fetch API GET request with array params. How?

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related