vue axios用法教程詳解

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

下面我們來使用axios

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

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

1 1.    Vue.prototype.$ajax=axios

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

 npm install vue-axios --save-dev<br>import Vueaxios from "vue-axios" 

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

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

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

　　上述只是寫了發(fā)起請(qǐng)求，并沒有請(qǐng)求返回?cái)?shù)據(jù)的回調(diào)。

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

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

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

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

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

以上所述是小編給大家介紹的vue axios用法教程詳解，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com