Call API with Axios - Tuong-Nguyen/JavaScript-Structure GitHub Wiki

Installation

Using npm:

$ npm install axios

Import:

import axios from 'axios';

Usage

Perform a Get request:

axios.get('http://192.168.104.45:4001/authors')
      .then((response) => {
        expect(response.data.length).toEqual(3);
      })
      .catch((error) => {
        console.log(error);
      })

Perform a Post request:

const author = {
      firstName: "Cory",
      lastName: "House"
    };

axios.post('http://192.168.104.45:4001/authors', author)
    .then((response) => {
      expect(response.status).toEqual(201);
    })
    .catch((error) => {
        console.log(error);
    });

Axios is a promises-based HTTP Client. It would return a promise and allow to access response in then() block if request is success or catch() block if request is fail.

The response contains multiple information such as status, data, statusText, header...

Using error.response to access information about failed request. e.g error.response.status.

Besides post and get, there are also methods named after the http methods delete, head, put and patch.

The methods post, put and patch require a parameter containing the data to be sent.

To send custom headers supply an object containing the headers as the last argument:

var config = {
  headers: {'X-My-Custom-Header': 'Header-Value'}
};

axios.get('http://192.168.104.45:4001/authors', config);
axios.post('http://192.168.104.45:4001/authors', { firstName: 'Marlon' }, config);

Performing Multiple Requests simultaneously:

axios.all([
    axios.get('http://192.168.104.45:4001/authors');
    axios.get('http://192.168.104.45:4001/courses')
  ])
  .then(axios.spread(function (authorsResponse, coursesResponse) {
    console.log('Authors', authorsResponse.data);
    console.log('Courses', coursesResponse.data);
  }));

To execute multiple requests in parallel, provide an array argument to axios.all. When all requests are complete, we will receive an array containing the response objects in the same order they were sent. Alternatively we can use axios.spread like above to spread the array into multiple arguments.

Interceptors

Intercepting requests or responses before they are handled in then() or catch() block.

Add a request interceptor

axios.interceptors.request.use(function (config){
      console.log("Intercept request");
      console.log(config);
      return config;
    }, function (error) {
      console.log("Intercept request error");
      console.log(error);
      return Promise.reject(error);
    });

Add a response interceptor

axios.interceptors.response.use(function (response){
      console.log("Intercept response");
      console.log(response);
      return response;
    }, function (error) {
      console.log("Intercept response error");
      console.log(error);
      return Promise.reject(error);
    });

Cancellation

we can cancel a request using cancel token

    var CancelToken = axios.CancelToken;
    var source = CancelToken.source();

    axios.get('http://192.168.104.45:4001/courses', {
      cancelToken: source.token
    })
      .then((res) => {
        expect(res.data.length).toEqual(6);
      })
      .catch(function(thrown){
        if(axios.isCancel(thrown)){
          console.log(thrown);
          console.log('Request canceled', thrown.message);
        }
        else
        {
          console.log("Request isn't canceled, handle error here ");
        }
      })
      .then(done, done);

    source.cancel("by user");