Vue2.0学习——axios用法详解

使用

npm install axios --save-dev

import axios from 'axios'

在 main.js 中添加了这两行代码之后，就能直接在组件的 methods 中使用 $ajax 命令

Vue.use(axios)       // 注意 这样的用法是有问题的，axios不支持Vue.use()的声明方式

Vue.prototype.$ajax = axios    // 但如果将 axios 改写为 Vue 的原型属性，就能解决这个问题 

这是axios的回调函数，.then为请求成功的回调函数，而.catch为请求失败的回调函数。 这两个回调函数都有各自独立的作用域，如果直接在里面访问 this，无法访问到 Vue 实例，怎么办？ 只要添加一个 .bind(this) 就能解决这个问题

methods: {

  getData() {

    this.axios({

      method: 'get',

      url: 'data/personData.json'

    })

    .then(function (response) {

      console.log(response)

    }).bind(this)

    .catch(function (error) {

      console.log(error)

    })

  }

}