What is Axios?
Most front end programmers are probably familiar the basic Axios requests, Axios.get, Axios.post, etc. However, the Axios provides additional functionality and more extensive ways to handle requests and processing data. We will go through a non-exhaustive overview of some of these features in this blog.
Making Multiple Requests at Once
Axios.all is a handy function that allows you to make multiple Axios requests at once. Axios.all takes an array of Axios requests and will return an array of the responses of those requests. Keep in mind that if one of the requests fail, by default they will all fail if that possibility is not accounted for. You may choose to return null in the catch block of each individual Axios request. Therefore if one of the requests fail, the promise will still be able to resolve itself.
In order to access and process the responses, which are returned in an array, you may choose to map over the array using the Array.map function. However an alternative could be to use Axios.spread. Axios.Spread will give access to the responses in an array which can then be separated out as necessary. An example of Axios.all and Axios.spread is shown below from storyblok.com:
Although Axios.all and Axios.spread are technically deprecated according to the Axios docs, they are still good to know. You can use Promise.all to a similar effect since axios requests are dealing with promises anyways.
Creating an instance
The Axios.create function can be used to create a new Axios instance. You might want to create a new instance if you need to set custom defaults for your application. Axios comes out of the box with a default instance. It is not necessary to create new instances but can be helpful for specific configurations. For example, masteringjs.io has the following example. You might want to set a timeout on all the Axios requests in a given application. You might do that with the following:
When making an Axios request, you have several options of how to build that request. The url is the only required is the only required config option while making a request. If the method such as GET, PUT, POST etc are not specified, it will default to GET. All of these config options are listed on the Axios docs but we will list some helpful ones here.
- baseURL will be added to the beginning of
urlis absolute. It can be helpful to set
baseURLfor an instance of axios to pass relative URLs to methods of that instance.
- transformRequest is an array of functions that allows you to make changes to the request data before it is sent to the server. This is only applicable for request methods which send data, ie 'PUT', 'POST', and 'PATCH'. The last function in the array must return a string or an instance of Buffer, ArrayBuffer, FormData or Stream.
- params are the URL parameters to be sent with the request. Params must be a plain object or a URLSearchParams object. data is the data to be sent as the request body. This options is only applicable for request methods PUT, POST, DELETE , and PATCH.
- timeout specifies the time in milliseconds before the request times out. If the request does take longer than the timeout specifies`, the request will be aborted.
There are also several Node.js only options which can be specified as well.
- maxContentLength defines the max size in bytes of the http response content allowed in node.js.
- decompress indicates whether or not the response body should be decompressed automatically. If set to
truewill also remove the 'content-encoding' header from the responses objects of all decompressed responses. This is a Node only option, as XHR cannot turn off decompression. There are other options that may be utilized with request config listed on the Axios docs. A link is included in the Sources section below.
The response of an Axios request is an object which contains information sent from the server. It includes the following properties:
- DATA is the response object that was provided by the server. This will include whatever data was requested.
- STATUS is the HTTP status code from the server response, (ie 200, 404, 500).
- STATUS TEXT is the HTTP status message from the server response.
- HEADERS is the object of HTTP headers that the server responded with. All header names are lowercase and are accessible using the bracket notation.
- CONFIG is the config that was provided to
axiosfor the request
- REQUEST is the request object that generated this response. It is the last ClientRequest instance in node.js (in redirects) and an XMLHttpRequest instance in the browser
Axios interceptors are functions that Axios calls for every request. You can intercept requests or responses and modify them in some way before they are handled by then or catch. According to masteringjs.io, “You can think of interceptors as Axios' equivalent to middleware in Express or Mongoose.” An example of an interceptor from the Axios docs can be seen below:
In conclusion, Axios is a very useful way to handle requests to a server. For more extensive look at the details above and many more, visit the Axios Docs. Also linked here https://kapeli.com/cheat_sheets/Axios.docset/Contents/Resources/Documents/index
Is a useful Axios“cheat sheet”. Happy coding!