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` are 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.