Front-endAxios

Axios basics

  1. Axios Introduction

    Both React and Vue use Axios to send data requests.

    Axios can run in the browser and send Ajax requests to the server.

    Axios can also run in node.js, making http requests to the server side.


  2. Axios Features

    1. For browser/node.js, send Ajax/http request to the server.

    2. Use the Promise API.

    3. Request/response interceptor. Do preparation work before the request, and do preprocessing when the result is returned.

    4. Help us convert the request and response data.

    5. Cancel the request.

    6. Automatically convert the result into json data.

    7. Block XSRF cross-site attacks to protect clients.


  3. Install Axios

    npm install axios or yarn add axios in the project

    Tag import <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>


  1. Basic use

    The Axios parameter receives an object, and configuration items are written here. Axios returns a Promise object, so use then( ) to specify the success callback to get the result.

    After each request is sent, you can view the request header information through Network.


    1. GET request (query)

      1
      2
      3
      4
      5
      6
      7
      8
      btns[0].onclick = function(){
          axios({
              method: 'GET',
              url: 'http://localhost:3000/posts/2' //The json-server document has a corresponding writing method for the request
          }).then(response => {
              console. log(response);
          });
      }

    2. POST request (add a new article)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      btns[1].onclick = function(){
          axios({
              method: 'POST',
              url:'http://localhost:3000/posts',
              data: {
                  title:'new article',
                  author:'Tom'
              }
          }).then(response => {
              console. log(response);
          });
      }

      After the request, the sent data can be found in the db.json file. Because no id is specified, it is added sequentially in posts. In addition, the Payload next to Network-Headers can see the data sent.


    3. PUT request (modify data)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      btns[2].onclick = function(){
          axios({
              method: 'PUT',
              url:'http://localhost:3000/posts/3', //The id should be specified here instead of in data.
              data: {
                  title:'second new article',
                  author:'Jonny'
              }
          }).then(response => {
              console. log(response);
          });
      }

    4. DELETE request (delete data)

      1
      2
      3
      4
      5
      6
      7
      8
      btns[3].onclick = function(){
          axios({
              method: 'DELETE',
              url:'http://localhost:3000/posts/5' //DELETE request only needs id, no request body.
          }).then(response => {
              console. log(response);
          });
      }

  1. Axios other methods to send requests

    Compared with the previous section, the request method in this section is only different in writing.

    1
    2
    3
    4
    5
    6
    7
    8
    axios.request(config)
    axios.get(url[, config])
    axios.delete(url[, config])
    axios.head(url[, config])
    axios.options(url[, config])
    axios.post(url[, data[, config]])
    axios.put(url[, data[, config]])
    axios.patch(url[, data[, config]])

    Config are other configuration items, such as request headers and request bodies.


    For example .request()

    1
    2
    3
    4
    5
    6
    7
    8
    btns[0].onclick = function(){
         axios.request({
             method: 'GET',
             url: 'http://localhost:3000/posts/2'
         }).then(response => {
             console.log(response);
         });
    }

    .post()

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    btns[1].onclick = function(){
         axios.post( //There is no {
             url='http://localhost:3000/posts', //here is url=
             {
                 title:'new article by .post()',
                 author:'Tomas'
             }).then(response => {
             console.log(response);
         });
    }

  1. Axios response structure

    The object returned by the Axios request, the result of then(response).

    1. config is a configuration object, including request type, request url, request body, etc.

    2. data is the response body (the result returned by the server). It is an object, because Axios automatically parses the json returned by the server for easy processing.

    3. headers is the response header information.

    4. request is a native Ajax request object (XMLHttpRequest() instance object). Because Axios uses Ajax to send requests.

      status is the response status code, and statusText is the response string.


Axios returned data

Share