Example explanation of Vue encapsulation axios

1. axios: is a network request library based on Promise. It can be used either on the server side or on the browser side

(1) The native http module used in

(2) XMLHttpRequest used in the browser

2. How to use in vue

(1) Installation: npm install axios

(2) Quote method:

Native method (not recommended)

axios({
      url:'http://127.0.0.1:9001/students/test', //The url of the remote server      method:'get',  //Request method    }).then(res=>{
       = 
    }).catch(e=>{
      (e);
    })
//shortcoming：Each useaxiosAll components need to be imported

Note: Axios encapsulates server data

• : Configuration status of response information
• : Responsive data
• : Response header information (size of information, type of information)
• : Request object
• : The status code of the request and response
• : Text information corresponding to the request and response status codes

Import axios in the project's file and write it to the Vue prototype (recommended)

import axios from "axios";
.$http = axios

Use this.$http in the component

this.$('http://127.0.0.1:9001/students/test').then(res=>{
         = 
      }).catch(e=>{
        (e)
      })

Disadvantages: Only used in vue2, not in vue3

Encapsulate axios into a configuration file separately (encapsulate axios instance separately in the configuration file)

(1) Configuration file:

import axios from "axios";
const axiosApi = ({
    baseURL:'http://127.0.0.1:9001', //Basic address    timeout:2000        //Connection timeout timeout (unit: milliseconds)})
export default  axiosApi   //axiosApiyesaxiosExamples

(2) Use:

import $http from '../config/axiosapi'
$('/students/test').then(res=>{
         = 
      }).catch(e=>{
        (e)
      })

Advantages: It can be used in vue2 or vue3

3. The format of submitting data to the server with different request methods of axios:

(1) Get request: The server side receives the parameter name

Directly bind the request parameters to the URL address

let str = 'Zhang San'
      $('/students/test/?username='+str).then(res=>{
         = 
      }).catch(e=>{
        (e)
      })

Submit via params

let str = 'Zhang San'
      $('/students/test',{
        params:{
          username:str
        }
      }).then(res=>{
         = 
      }).catch(e=>{
        (e)
      })

(2) Post method request: the server side obtains data through the parameter name.

let str = 'Zhang San'
      $('/students/test',{
        username:str
      }).then(res=>{
         = 
      }).catch(e=>{
        (e)
      })

(3) Put method request: the same as post method

(4) Delete method request: the same as get method

This is the end of this article about the example explanation of Vue encapsulation axios. For more related Vue axios content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!