axios

axios is a third party npm library for accessing remote resources in a JavaScript application. It serves as an alternative to the fetch API. The benefit to using something like axios is that it has a more friendly interface than fetch but it does add more dependencies to your project.

Adding it to a project

npm

npm install --save axios

Simple get interface.

After adding axios to your project you can get a response for a get request via:

const response = await axios({
  url: 'https://one-list-api.herokuapp.com/items?access_token=illustriousvoyage',
})

The response object

The response for a request contains the following information.

{
  // `data` is the response that was provided by the server
  data: {},
  // `status` is the HTTP status code from the server response
  status: 200,
  // `statusText` is the HTTP status message from the server response
  statusText: 'OK',
  // `headers` the HTTP headers that the server responded with
  // All header names are lower cased and can be accessed using the bracket notation.
  // Example: `response.headers['content-type']`
  headers: {},
  // `config` is the config that was provided to `axios` for the request
  config: {},
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance in the browser
  request: {}
}

The data will automatically be parsed based on the server's content type header. This means we do not have to parse the data if we are dealing with a typical JSON based api.

If we are trying to use the data from the response we simply access the data property of the object.

const response = await axios({
  url: 'https://one-list-api.herokuapp.com/items?access_token=illustriousvoyage',
})
if (response.status === 200) {
  const items = response.data
  // ... process the items here ...
}

Sending a non-GET request, with data.

We can also specify request parameters easily. For instance to send a JSON API request:

const newOneListItem = {
  item: { text: 'This would be a new item in the app' },
}
const response = await axios({
  method: 'POST',
  url: 'https://one-list-api.herokuapp.com/items?access_token=illustriousvoyage',
  data: newOneListItem,
})
if (response.status === 201) {
  // ... process the data here ...
}

Notice that we do not have to do any JSON.stringify as axios knows how to parse our request and specify the content type headers.

Setting options such as headers

If you need to specify headers there are many things we can set on a request but the most direct ones are:

{
  // `url` is the server URL that will be used for the request
  url: '/user',
  // `method` is the request method to be used when making the request
  method: 'get', // default
  // `headers` are custom headers to be sent
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  // `params` are the URL parameters to be sent with the request
  // Must be a plain object or a URLSearchParams object
  params: {
    ID: 12345
  },
  // `data` is the data to be sent as the request body
  // Only applicable for request methods 'PUT', 'POST', 'DELETE , and 'PATCH'
  // When no `transformRequest` is set, must be one of the following types:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - Browser only: FormData, File, Blob
  // - Node only: Stream, Buffer
  data: {
    firstName: 'Fred'
  },
}

Destructuring axios response

Instead of accessing properties of the response object such as this:

const response = await axios({
  url: 'https://one-list-api.herokuapp.com/items?access_token=illustriousvoyage',
})
const items = response.data
if (response.status === 200) {
  console.log(items)
}

We can destructure the object during assignment.

const { status, data } = await axios({
  url: 'https://one-list-api.herokuapp.com/items?access_token=illustriousvoyage',
})
const items = data
if (status === 200) {
  console.log(items)
}

We can even rename a destructured variable to avoid having to do const items = data

const { status, data: items } = await axios({
  url: 'https://one-list-api.herokuapp.com/items?access_token=illustriousvoyage',
})
if (status === 200) {
  console.log(items)
}

Setting default global headers

Let's say you wanted to send a header for authorization on every request once you are logged in. axios allows you to specify default values for headers and other configurations.

axios.defaults.headers.common['Authorization'] = `Bearer ${auth.token}`

With this set we do not need to augment all the axios requests with this header, making every request carry the authorization information.