本篇文章為大家展示了如何在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項目中使用axios，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創新互聯行業資訊頻道。

網頁題目：如何在Vue項目中使用axios
鏈接分享：http://vcdvsql.cn/article14/pcdsde.html

成都網站建設公司_創新互聯，為您提供網站改版、品牌網站設計、小程序開發、微信小程序、手機網站建設、網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯