本文例項講述了Vue學習之axios的使用方法。分享給大家供大家參考，具體如下：

Axios 是一個用於實現網路資料請求的JavaScript庫，可以用在網頁和 node.js 中，用於建立 XMLHttpRequests，vue官方支援使用axios代替vue--resourse來實現網路資料請求。

使用前需要在你的專案中安裝axios，例如通過npm安裝庫：

npm install --save axios

接著在專案中引入axios：

import axios from 'axios'

1、get請求

直接使用axios的全域性變數來呼叫get方法，get中第一個引數傳遞url，第二個引數是相關配置，在其中可以傳遞params引數（引數以？形式加在url末尾），進行header的設定等。使用.then接收返回值，可以採用函式來處理返回結果res，其中res.data或者res.body是返回的資料。使用.catch捕獲異常，並可以列印錯誤資訊引數error。

axios.get('data/zodiac.json',{
 params:{
  id:"101"
 },header:{
  token:"axios"
 }
}).then(res =>{
 this.msg=res.data;
}).catch(error =>{
 console.log(error);
})

2、post請求

post方法呼叫、回掉、異常捕獲的使用與get類似。不同的是其引數分為三個，第一個是url地址，第二個是要傳遞的資料，第三個是傳輸選項配置。與get方法不同，post專門使用第二個引數進行資料傳遞，而不像get中將資料設定在配置選項params中。

axPost(){
 axios.post('./data/test.php',//url
  {                 //傳送的資料
   userId:'105'
  },{                 //option選項
   headers:{
    token:"axPost"
   }
  }
 ).then(res =>{            //接收結果
  this.msg=res.data;
 }).catch(err=>{           //處理錯誤
  this.msg=err;
 })
}

3、HTTP請求

也可以直接使用http進行資料請求，直接進行url、method、data、headers、params等的設定，例如使用http傳送post請求：

axios({
 url:"http://localhost:63342/Web/Learning/Javascript/Vue/VueStart/data/zodiac.json",method:"post",data:{
  userId:"106"
 },headers:{
  token:"axHttp"
 }
}).then(res=>{
 this.msg=res.data;
})

4、攔截器

axios也提供了在網路請求傳送前與資料返回時進行攔截的函式interceptors，以便進行相關處理。例如在傳送前使用request.use攔截，進行你想要的執行的操作後再將config返回出去，在請求返回時使用response.use進行攔截，操作後再將結果返回：

axios.interceptors.request.use(config =>{
 console.log("axois請求");
 return config;
});
axios.interceptors.response.use(res =>{
 console.log("axois回撥");
 return res;
})

希望本文所述對大家vue.js程式設計有所幫助。