What is correct way to handle fetch response

Question

I have following code which I using for handling Magento 2 REST API.

return new Promise((resolve, reject) => {
      fetch(uri, { method, headers, body: JSON.stringify(data) })
        .then(response => {
          return response.json();
        })
        .then(responseData => {
          resolve(responseData);
        })
        .catch(error => {
          reject(error);
        });
    });

And I want to add response status checking, so I've started like this

return new Promise((resolve, reject) => {
      fetch(uri, { method, headers, body: JSON.stringify(data) })
        .then(response => {
          return {
            data: response.json(),
            ok: response.ok,
            status: response.statusText
          };
        })
        .then(responseResult => {
          if (responseResult.ok) {
            resolve(responseResult.data);
          } else {
            const error = responseResult.status || responseResult.data.message;
            reject(error);
          }
        })
        .catch(error => {
          reject(error);
        });
    });

Magento keeps error text inside data.message, but response.json() return me a Promise instead of data.

What is a correct way to handle this case?

UPDATE response like

*"...And I want to add request status checking, so I've started like this..."* Why so complex? — T.J. Crowder, Aug 12 '18 at 18:18

T.J. Crowder · Accepted Answer · 2018-08-12T18:42:21.820

19

You're falling prey to the explicit Promise creation antipattern. You don't need new Promise in that code at all, and to add the status check, simply do it in a then handler:

return fetch(uri, { method, headers, body: JSON.stringify(data) })
    .then(response => {
        if (!response.ok) {
            return response.json()
                .catch(() => {
                    // Couldn't parse the JSON
                    throw new Error(response.status);
                })
                .then(({message}) => {
                    // Got valid JSON with error response, use it
                    throw new Error(message || response.status);
                });
        }
        // Successful response, parse the JSON and return the data
        return response.json();
    });

Now:

If an error is returned with valid JSON body, we try to use message from the parsed JSON as the error (rejection), falling back on response.status if there isn't one.
If an error is returned by the body isn't valid JSON, we use response.status as the error (rejection)
If a success is returned, we return the result of parsing it

edited Aug 12 '18 at 18:42

answered Aug 12 '18 at 18:19

T.J. Crowder

1,031,962
187
1,923
1,875

but I need message inside data – Dima Portenko Aug 12 '18 at 18:20
1

@DmitriPortenko - I missed that. Simply add another `then` handler. I've updated the answer. – T.J. Crowder Aug 12 '18 at 18:21
as I can see it will throw first error, but not second. Simply I want to have response.ok on second then – Dima Portenko Aug 12 '18 at 18:25
@DmitriPortenko - Why would you want that? If the request has failed, you want a failure, right? The second `then`'s handler will not be called with the code above if `response.ok` is falsy -- which is what you want. – T.J. Crowder Aug 12 '18 at 18:30
Because I need error message on failure, I've added response result picture to my question. – Dima Portenko Aug 12 '18 at 18:34
so I want check `ok` and `message` at same time – Dima Portenko Aug 12 '18 at 18:34
@DmitriPortenko - I get it now. I'll update the answer. The key here is that even when `response.ok` is falsy, you're still getting back valid JSON. – T.J. Crowder Aug 12 '18 at 18:37
@DmitriPortenko - Updated now. Thanks for explaining what I was missing! – T.J. Crowder Aug 12 '18 at 18:42
@t-j-crowder thanks, I'll check it later and back to you. – Dima Portenko Aug 12 '18 at 18:51
@t-j-crowder works as expected. Also thanks for antipattern note! – Dima Portenko Aug 12 '18 at 21:26

mpm · Answer 2 · 2018-08-12T18:57:07.883

-1

to get ok on the second then you can use Promise.all instead

fetch(uri, { method, headers, body: JSON.stringify(data) })
        .then(response => {
          return Promise.all([response.json(),response])
        })
        .then(([responseData,response]) => {
          // handle data here
        })

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

edited Aug 12 '18 at 18:57

answered Aug 12 '18 at 18:24

mpm

20,148
7
50
55

Simply I want to have response.ok on second then – Dima Portenko Aug 12 '18 at 18:27

What is correct way to handle fetch response

2 Answers2

Linked