axios interceptor use and knowledge points supplement

axios interceptor uses

    <link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css" />
      body {
        padding: 20px;

      .loading-box {
        position: fixed;
        top: 30%;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        box-shadow: 1px 1px 3px #efefef;
        display: none;

    <!-- button -->
    <button class="btn btn-primary" id="btn1">request 1</button>
    <button class="btn btn-info" id="btn2">Request 2</button>
    <button class="btn btn-warning" id="btn3">request 3</button>

    <!-- loading area -->
    <div class="loading-box">
      <div class="spinner-border m-5 text-primary" role="status">
        <span class="sr-only">Loading...</span>

    <script src="./lib/axios.js"></script>

      /* axios Interceptor Workflow
     1. axios make a request
     2. Execute the request interceptor: add the operation before ajax sends the request
     3. The server receives, processes, and responds to requests
     4. Execute Response Interceptor: Add action after server response
     4. axios Receive the response (execute then method)

      // Add request interceptor
        function(config) {
          // This request can be operated
          // console.log(config); // ajax request parameters;
          // Show loading effect
          document.querySelector(".loading-box").style.display = "block"
          // return fixed data
          return config
        function(error) {
          // What to do about request errors, the following sentence, fixed syntax;
          return Promise.reject(error)

      // Add response interceptor
        function(response) {
          //The data that the server responds to
          // console.log(response);
          // Hide the loading effect
          document.querySelector(".loading-box").style.display = "none"
          // Return the server response data to the then method of axios
          return response
        function(error) {
          // Hide the loading effect
          $(".loading-box").hide() // If it fails, the loading effect should also be hidden;
          // Do something with response errors
          return Promise.reject(error)

      //button 1
      document.querySelector("#btn1").onclick = function() {
          url: "",
          method: "get"
        }).then(res => {
          //success callback

      //button 2
      document.querySelector("#btn2").onclick = function() {
          url: "",
          method: "get"
        }).then(res => {
          //success callback
      //button 3
      document.querySelector("#btn3").onclick = function() {
          url: "",
          method: "post",
          data:{ username:'admin',password:'123456'}
        }).then(res => {
          //success callback

axios base address

      //Set the axios base address: all requests add the previous http:// domain name by default
      axios.defaults.baseURL = ''

ajax knowledge points supplement

onreadstatechange event

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        /* XMLHttpRequest two events of

        1. onload Event: The number of responses received from the server (one request will only be executed once)
        2. onreadystatechang event : function with onload The event is consistent (one request will be executed multiple times)
             XMLHttpRequest The object's status code ( xhr.readyState)
                0: request not created  (created xhr object, but has not called open)
                1: server connection established 
                2. request received  (send after,The server has received the request)
                3. request processing 
                4. The request is complete and the response is ready (a status code of 4 is equivalent to onload event )
      //(1). Instantiate the ajax object
      let xhr = new XMLHttpRequest()
      //(2). Set the request method and address"post", "")
      //(3). Set the request header (the post request needs to be set)
      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
      //(4). Send request: parameter format 'key=value'
      //(5). Register callback function
      //a. onload is only supported by new browsers
      //b. If you want to be compatible with earlier browsers, you can use onreadystatechange
      //c. onreadystatechange trigger timing: xhr.readState state change
      // xhr.onload = function() {};

      xhr.onreadystatechange = function() {
        //onreadystatechange will be triggered multiple times, generally need to judge xhr.readState == 4 to get the response data
        if (xhr.readyState == 4) {

Ajax components understand

  • The full name of Ajax is Asynchronous Javascript And XML (asynchronous js and xml)
    • Speaking human words: send asynchronous network requests with js
    • A : Asynchronous
      • Synchronization: Refers to the execution of code in order from top to bottom
      • Asynchronous: The code will not be executed immediately, but will be executed after a while
        • The ECMAScript we have learned so far has only two grammars that are asynchronous: timer and ajax
        • DOM events are also asynchronous, but this is the execution mechanism of DOM. Therefore, when discussing js synchronization and asynchrony, js is the main focus, and DOM is generally not discussed.
    • J: Javascript
    • A : And
    • X : XML and XMLHttpRequest
      • XML: Solve cross-platform data transmission.
        • Before JSON came out, network transmission was mainly based on data in XML format. Later, JSON came out and gradually replaced XML. However, since ajax technology came out earlier than json, the name xml has been retained to this day

Difference between get request and post request

  • 1. Different ways of passing parameters
    • get is spliced ​​after the url (request line)
    • post passes parameters in the request body
  • 2. Different size limits
    • get has a size limit, and different browsers have different size limits. Usually 2-5 KB
    • post has no size limit
  • 3. Different security
    • The get parameters are directly exposed in the url, which is not safe (general query data is get)
    • The post parameter is in the request body, which is more secure (general login and registration must be post)
  • 4. The transmission speed is different
    • get fast transfer speed
    • slow post transfer

Learn about other request methods

`In actual development, the front end has no right to decide the request method, it only needs to follow the background interface document.

  • The difference between put and pacth
    • Global update: put
    • Partial update: patch
request methoddescribefeatures
postGenerally used to add data (submit data)request body parameter
getGenerally used to query data (query data)request line (url) pass parameters
deleteGenerally used to delete datarequest body parameter
putGenerally used to update all datarequest body parameter
patchGenerally used to update local datarequest body parameter

Tags: Front-end Javascript programming language

Posted by freelancedeve on Tue, 10 Jan 2023 12:02:59 +1030