I. Introduction to AXIos

Axios, a promise-based wrapper around Ajax, is a solution to asynchronous requests. So for asynchronous requests we already have ajax with native Ajax and jQuery, why do we need another One with Axios, because it’s old Ajax, why do we need another one with Axios, because it’s old Ajax, In the past, Ajax was jQuery, which was a solution to the previous MVC architecture, but now there is an MVVM architecture in the front end. At this time, $Ajax is not so friendly to use, and the native Ajax is very troublesome to use, so Axios came into being and has been recognized by most people.

Second, the way axios is used

  • Download the source file and use as script_src.
  • Introduction of CDN.
  • NPM loading is used.

3. Basic use of AXIos

  • The default request mode is no parameter
// Use the default mode to send requests => GET mode
axios({
  url: 'http://localhost:9999/student/student/getAllstudent',
}).then( res= > {
  console.log('res');
})
Copy the code
  • Specifies that the request is get with no parameters
axios({
  url: 'http://localhost:9999/student/student/getAllstudent'.// Method specifies the method of the request
  method: 'get'
}).then(res= > {
  console.log(res)+
})
Copy the code
  • Send a no-parameter request in POST mode
axios({
  url: 'Requested address'.method: 'post'  // Specify post request mode
}).then( res= > {
  console.log(res);  
})
// The then method is equivalent to the THEN method in promise, which takes two arguments:
// The first argument is the resolve callback
The second function is the reject callback
Copy the code
  • Send request 1 with parameters in get mode
axios({
  url: 'Request address? id=1'./ /? You can carry parameters after it
  // Method is not specified. The default is get request
}).then( res= > {
  console.log(res);// Request a successful callback
})
Copy the code
  • Send parameter request 2 using GET — configure the properties in AXIOS
 axios({
   url: 'Requested address'.method: 'get'.params: {
     id: '1'.name: 'Joe'
   }
   // When the parameter request is used in axios, it is configured in the attribute params, whose value is an object
   // show how to configure the corresponding object
 }).then( res= > {
   console.log(res);
 })
Copy the code
  • Send a reference request in POST mode
axios({
  url: 'Post request address'.method: 'post'.// Request mode
  // Params parameter configuration
  params: {
    id: '1'.name: Soul Soul Zhang
  }
}).then( res= > {
  console.log(res)
})
Copy the code

4. Axios request method (short)

  • Send a no-parameter request using axios.get()
axios.get('URL requested address').then( res= > {
  console.log(res);
}).catch( err= > {
  console.log(err);
})
// The catch() function is the equivalent of the catch() function in Promise for handling an error in the request
Copy the code
  • Send the referenced request using axios.get()
axios.get('URL requested address', {params: {
  id: 1.name: Soul Soul Zhang 
}}).then( res= > {
  console.log(res);
}).catch( err= > {
  console.log(err);
})
Copy the code
  • Axios.post () sends the request without parameters
axios.post('url').then( res= > {
  console.log(res);
}).catch( err= > {
  console.log(err)
})
Copy the code
  • Axios.post () sends the referenced request
axios.post('url'."Name: soul soul zhang &id=10").then( res= > {
  console.log(res);
}).catch( err= > {
  console.log(err)
})
// when using axios.post() to make a post request with parameters
// The argument needs to be enclosed in quotes and passed as a string. Multiple arguments use &
// symbol to connect
Copy the code

When using axios.post() to make an argument post request, the argument is enclosed in quotes and passed as a string, and multiple arguments are concatenated using ampersand