Detailed explanation of vue axios data request get, post method and example

We commonly use the get method and post method. Here are some brief introductions to these two request methods

Use the axios method in vue. We first install the axios method

npm install --save axios

After installation, the method of on-demand introduction is adopted. Which page needs to request data, it will be introduced on which page.

import axios from 'axios'

After introduction, we can make data requests and create a method in methods

 methods：{
   getInfo（）{
     let url = "url"
     (url).then((res)=>{
       (res)
     })   
   } 
 }

Then we call it in the mounted life cycle

 mounted（）{
   () 
 }

In this way, you can view the data in the console. The above is a simple get method data request. Let’s continue to introduce the use of post method. In fact, there is no difference between using post and get. Just add a parameter. Take a look at our code

 methods：{
   postInfo（）{
     let url = "url"
     let params=new URLSearchParams();//This method is introduced in the official website of axios. In addition to this method, there is also the qs method.     ("key",index) 
     ("key",index)
     (url,params).then((res)=>{
       (res)
     })
   }  
 }

Also called in the mounted life cycle

 mounted（）{
   ()
 }

Supplement: Let's take a look at axios data requests

Project address:/axios/axios

axios is a HTTP library based on Promise and supports both browser-side and is often used for Ajax requests.

Unlike jQuery or AngularJS, it does not have Ajax methods, so it requires the help of plugins or third-party HTTP libraries.

GET and POST requests

 ("./",{
     params:{
      userId:"999"
     },
     headers:{
      token:"jack"
     }
    }).then(res=>{
      = ;
    }).catch(function (error) {
     ("error init."+error)
    });

POST：

<code class="language-javascript"> ("./",{ 
     userId:"888" 
    },{ 
     headers:{ 
      token:"tom" 
     } 
    }).then(res=>{ 
      = 
    }).catch(err=>{ 
      (err) 
    })</code> 

Multiple concurrent requests can be executed based on Promise: 1

 function getUserAccount(){
    return ('/user/123')
   }
   function getUserPermissions(){
    return ('/user/12345/premissions')
   }
   ([getUserAccount(),getUserPermissions()])
   .then((function(acct,perms){
     // When the request is finished   }))

You can also initiate a request by writing to the configuration:

  axios({
  method:'post',
  url:'/user/123',
  data:{
   firstName:'Fred',
   lastName:'Flintstone'
  }
  }).then(function(res){
  (res)
  })

It is often encapsulated as an instance in business, which is convenient for general configuration:

// 
const instance = ({
 baseURL:"/",
 timeout:1000,
 headers:{"Content-Type":"application/x-www-form-urlencoded"}
})
export default instance;

Called in mounted:

Ajax({
    method:'post',
    url:'/',
    data:{
    firstName:'Fred',
    lastName:'flintone'
    }
   }).then(res=>{
     ()
      = 
   })

Forced interception can be used for loading..

(config=>{
    ("require init");
    return config
   })
    (response=>{
    ("response init");
    return response
   })

Summarize

The above is a detailed explanation of the vue axios data request get, post method and examples introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!