Improve request-response cycle with axios

[thisismydesign]

Originally created by @gomorizsolt

We often use node-fetch. It does seem axios is much more suitable for client- & and server-side promise-based requests. Looking at its configuration, it's highly customizable and has several advantages as opposed to the (built-in) fetch library, e.g.:

• supports cancel tokens
• a base url can be set so that each request is prefixed with it
• facilities error handling
• it's no longer needed to convert the response to json/text
• intercept requests & responses before they resolve/reject

We can also attach an adapter to axios so that the responses are cached in-memory for the given time(see #243).

[thisismydesign]

I like fetch for keeping things simple and browser compliant. You do need to some things manually but you can use a function to do all that. E.g.

return fetch(url).then(response => {
  return response.text().then(textResponse => {
    if (response.ok) {
      try {
        return JSON.parse(textResponse);
      } catch (error) {
        throw new Error(`Could not JSON parse reponse: ${textResponse}. Error: ${error}`)
      }
    } else {
      throw new Error(`HTTP error: ${response.status} - ${textResponse}`)
    }
  });
})

supports cancel tokens

This is a very special use case. When needed let's use axios for sure.

a base url can be set so that each request is prefixed with it

Easily handled by a function.

facilities error handling

What does it do which isn't possible with fetch?

it's no longer needed to convert the response to json/text

Question for me is how does error handling work is this case? I don't want to see JSON parsing failed because ' is invalid, that isn't helpful.

intercept requests & responses before they resolve/reject

Is this useful for testing? Why is it better than e.g. mocking?

[gomorizsolt]

What does it do which isn't possible with fetch?

Refer to their example. There are several if-else branches for different error-cases, not sure it if makes sense at all though.

I can't really provide a clear explanation for the other two questions due to the lack of experience with the package. I also prefer keeping things simple if possible, but axios is quite popular for some reason.

[thisismydesign]

What does it do which isn't possible with fetch?

Refer to their example.

I got that but I'm not sure how fetch behaves in this case. If we run into an actual issue that axios handles better I'm all for changing our defaults, but I need a use case. :)