Basic use of axios

What is axios?

Axios is a promise based HTTP library that can be used in browsers and node JS.

axios attribute

  • URL is the server URL used for the request

    url: '/user'

  • Method is the method used when creating the request

    method: 'get', the default is get

  • The baseURL is automatically prefixed to the URL unless it is an absolute URL. It can set a baseURL to pass the relative URL (domain name) for the method of axios instance. For example:
    baseURL: '',

  • Headers are the custom request headers to be sent

     headers: {'X-Requested-With': 'XMLHttpRequest'},
  • params is the URL parameter to be sent with the request; It must be a plain object or URLSearchParams object, and the request parameters are spliced on the URL.

     params: {
        ID: 12345
  • Data is the data sent as the request body; It is only applicable to these request methods' PUT ',' POST ', and' PATCH '; Data splicing in request body

      Not set in `transformRequest` When, it must be one of the following types:
      // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
      // -Browser specific: FormData, File, Blob
      // -Node exclusive: Stream
      data: {
        firstName: 'Fred'
  • paramsSerializer is a function responsible for params serialization

      paramsSerializer: function(params) {
        return Qs.stringify(params, {arrayFormat: 'brackets'})
  • Timeout specifies the number of milliseconds that the request timed out (0 means no timeout)

      // If the call cost exceeds the 'timeout', the request will be interrupted
      timeout: 1000,
  • transformRequest allows you to modify the request data before sending it to the server. It can only be used in 'PUT', 'POST' and 'PATCH'
    The functions in the array after these request methods must return a string, or ArrayBuffer, or Stream

      transformRequest: [function (data, headers) {
        // Arbitrary conversion of data
        return data;
  • transformResponse allows you to modify the response data before passing it to then/catch

     transformResponse: [function (data) {
        // Arbitrary conversion of data
        return data;
  • responseType indicates the data type of the server response, which can be 'arraybuffer', 'blob', 'document',
    'json', 'text', 'stream'

      responseType: 'json', // default
  • withCredentials indicates whether credentials are required for cross domain requests

      withCredentials: false, // default
  • adapter allows custom processing of requests to make testing easier

      // Return a promise and apply a valid response
      adapter: function (config) {
        /* ... */
  • auth indicates that HTTP basic authentication should be used and credentials should be provided

    // This will set an 'Authorization' header, overwriting any existing custom 'Authorization' header set with 'headers'
      auth: {
        username: 'janedoe',
        password: 's00pers3cret'
  • Other properties

      // `responseEncoding` indicates encoding to use for decoding responses
      // Note: Ignored for `responseType` of 'stream' or client-side requests
      responseEncoding: 'utf8', // default
       // `Xsrfcookie name ` is the name of the cookie used as the value of xsrf token
      xsrfCookieName: 'XSRF-TOKEN', // default
      // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
      xsrfHeaderName: 'X-XSRF-TOKEN', // default
       // `onUploadProgress ` allows processing progress events for uploads
      onUploadProgress: function (progressEvent) {
        // Do whatever you want with the native progress event
      // `onDownloadProgress ` allows processing progress events for downloads
      onDownloadProgress: function (progressEvent) {
        // Handling of native progress events
       // `maxContentLength ` defines the maximum size of the allowed response content
      maxContentLength: 2000,
      // `validateStatus ` defines whether the status code for a given HTTP response is resolve or reject promise. If 'validateStatus' returns' true' (or set to 'null' or 'undefined'), promise will be resolved; Otherwise, promise will be rejecte d
      validateStatus: function (status) {
        return status >= 200 && status < 300; // default
      // `maxRedirects ` is defined in node The maximum number of redirects of follow in JS
      // If set to 0, no redirection will follow
      maxRedirects: 5, // default
      // `socketPath` defines a UNIX Socket to be used in node.js.
      // e.g. '/var/run/docker.sock' to send requests to the docker daemon.
      // Only either `socketPath` or `proxy` can be specified.
      // If both are specified, `socketPath` is used.
      socketPath: null, // default
      // `httpAgent 'and' httpsAgent 'are on node JS is used to define the custom proxy used when executing http and https. Allow options to be configured like this:
      // `keepAlive ` is not enabled by default
      httpAgent: new http.Agent({ keepAlive: true }),
      httpsAgent: new https.Agent({ keepAlive: true }),
      // 'proxy' defines the host name and port of the proxy server
      // `auth ` indicates that HTTP basic authentication should be used for connection proxy and provide credentials
      // This will set a 'proxy authorization' header, overwriting the existing custom 'proxy authorization' header set by using 'header'.
      proxy: {
        host: '',
        port: 9000,
        auth: {
          username: 'mikeymike',
          password: 'rapunz3l'
      // `cancelToken ` specifies the cancel token used to cancel the request
      // (see the Cancellation section later for more information)
      cancelToken: new CancelToken(function (cancel) {

Request response parameters

  • data is the response provided by the server
  data: {},
  • Status HTTP status code from the server response
  status: 200,
  • statusText HTTP status information from the server response
  statusText: 'OK',
  • headers the header of the server response
  headers: {},
  • config is the configuration information provided for the request
  config: {},
 // 'request'
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}

Get request

  • The json data sent by the back end is displayed on the browser

Send get request without parameters using Axios

  • First, axios is introduced

    <script src=""></script>
    • Writing JavaScript code
            .then(function (response) {
            .catch(function (error) {
    • Browser view

get request with parameters

  • get request code with parameters

     axios.get('/teachers/findByPage', {
            params: {
        .then(function (response) {
        .catch(function (error) {
    • Page effect

Post request

Passing object data using post request

  • Controller method

    public void insert(@RequestBody Teachers teachers) {
  • javaScript code'http://localhost:8080/teachers/insert', {
            tname:"Han Xin"
        .then(function (response) {
        .catch(function (error) {
  • Background receiving data

axios API configuration call

The request can be created by passing the relevant configuration to axios

  • axios(config)
// Send POST request
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
// Get remote picture
  .then(function(response) {'ada_lovelace.jpg'))
  • axios(url[, config])
// Send GET request (default method)

Added by KingPhilip on Wed, 09 Feb 2022 17:19:23 +0200