vue之axios使用

axios是vue-resource後出現的Vue請求數據的插件。vue更新到2.0以後,做者尤大就宣告再也不對vue-resource更新,而是推薦的axios。

下面咱們來使用axios

npm install axios --save-dev

import axios from "axios"

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

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','
      }
   })
}

　　上述只是寫了發起請求，並無請求返回數據的回調。

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

　　這是axios的回調函數，.then爲請求成功的回調函數，而.catch爲請求失敗的回調函數

　　這兩個回調函數都有各自獨立的做用域，若是直接在裏面訪問 this，沒法訪問到 Vue 實例，怎麼辦嘞？？？？

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

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

　　像這樣，這樣。。。。還有這樣。。。。。。