vue使用axios异步请求后端数据的使用

Vue 原本有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方就不再更新维护 vue-resource，并推荐axios，

目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求。

使用方法：

方案一：改原型

1.安装

npm install axios --save-dev


2.使用：

main.js中：


import axios from "axios"

Vue.prototype.$ajax=axios





将 axios 改写为 Vue 的原型属性，这样其它的组件中，方可以使用 axios 命令的，（或者在要引用的组件页直接 import axios from"axios"）

3.方法中可以使用：

 this.$ajax({
          method:'get',
          url:url,
          data:data
       }).then(function (res) {
          console.log(res)
        }).catch(function (err) {
          console.log(err)
        })

本地测试发现，url接口路径地址，用绝对路径更好点。相对地址有时候抓取报错。原因未知。

关于get，post方法：绕坑参考：http://blog.csdn.net/milli236/article/details/78053711

方案二：在 Vuex 中封装

之前的文章中用到过 Vuex 的 mutations，从结果上看，mutations 类似于事件，用于提交 Vuex 中的状态 state

action 和 mutations 也很类似，主要的区别在于，action 可以包含异步操作，而且可以通过 action 来提交 mutations

另外还有一个重要的区别：

mutations 有一个固有参数 state，接收的是 Vuex 中的 state 对象

action 也有一个固有参数 context，但是 context 是 state 的父级，包含  state、getters

Vuex 的仓库是 store.js，将 axios 引入，并在 action 添加新的方法

?

1 2 3 4