axios如何在vue中使用？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

成都創(chuàng)新互聯(lián)是一家專注于成都做網(wǎng)站、網(wǎng)站設計與策劃設計,肇慶網(wǎng)站建設哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設十余年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:肇慶等地區(qū)。肇慶做網(wǎng)站價格咨詢:028-86922220

axios是vue-resource后出現(xiàn)的Vue請求數(shù)據(jù)的插件。vue更新到2.0之后,作者尤大就宣告不再對vue-resource更新,而是推薦的axios。

下面我們來使用axios

 npm install axios --save-dev 
 import axios from "axios"

這時候如果在其它的組件中，是無法使用 axios 命令的。但如果將 axios 改寫為 Vue 的原型屬性，就能解決這個問題

1 1.   Vue.prototype.$ajax=axios

好像還有另外一種方法，是不需要去修改Vue的原型的，那就是我們除了npm install安裝axios依賴以外，再去安裝一個vue-axios

 npm install vue-axios --save-dev
import Vueaxios from "vue-axios"

我都是用第一種方法的，這種沒試過，有興趣大家可以去試試。

在 main.js 中添加了這兩行代碼之后，就能直接在組件的 methods 中使用 $ajax 命令

 methods: {
 submitForm () {
  this.$ajax({
   method: 'post',
   url: '你的請求url',
   data: {
    name: 'haha','
   }
  })
}

上述只是寫了發(fā)起請求，并沒有請求返回數(shù)據(jù)的回調(diào)。

 .then(function(res){
 console.log(res)
})
.catch(function(err){
 console.log(err)
})

這是axios的回調(diào)函數(shù)，.then為請求成功的回調(diào)函數(shù)，而.catch為請求失敗的回調(diào)函數(shù)

這兩個回調(diào)函數(shù)都有各自獨立的作用域，如果直接在里面訪問 this，無法訪問到 Vue 實例，怎么辦嘞？？？？

只要添加一個 .bind(this) 就能解決這個問題

 then(function(res){
 console.log(this.data)
}.bind(this))

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注創(chuàng)新互聯(lián)網(wǎng)站建設公司行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)建站的支持。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、建站服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

本文題目：axios如何在vue中使用-創(chuàng)新互聯(lián)
文章路徑：http://weahome.cn/article/jpphp.html