vue axios异步请求(vue生命周期发送axios请求)

简介vue原本有官方推荐的ajax插件vue-resource，但是由于Vue更新到2.0，官方没有更新vue-resource。目前主流的Vue项目都选择axios来完成ajax请求，而大型项目都使用Vuex来管理数据，所以本博客将两者结合起来发送请求。Vuex的安装就不详细描述了。请参考之前的博客《Vue进阶（五）：与 Vuex 的第一次接触》。首先，使用cnpm安装axios。
在安装其他插件时，cninstall axios-s可以直接将Vue.use()引入main.js，但是axios不能使用，只能立即引入到每个需要发送请求的组件中。要解决这个问题，有两个发展思路。一种是引入axios后修改原型链，另一种是结合Vuex封装一个aciton。
方案一：重写原型链。首先，将axios引入main.js
此时从“axios”导入axios，如果axios命令在其他组件中，则无法使用。但如果把axios改写成Vue的原型属性，这个问题就可以解决了。
Vue.prototype.$ajax=axios在main.js中添加这两行代码后，可以直接在组件的方法中使用$ajax命令。
methods: { submitForm () { this。$ajax({ method: ‘post ‘，url: ‘/user ‘，data: { name: ‘wise ‘，info : ‘ error ‘ } })} } }方案二：Vuex的突变在封装到Vuex之前已经在文章中使用过了。从结果来看，突变类似于事件，用于改变Vuex中的状态state。动作突变类似于动作突变。主要区别是action可以包含异步操作，突变可以通过Action提交。还有一个重要的区别：mutations有一个固有的参数state，Vuex中的received state对象action也有一个固有的参数context，但是context是state的父级，包含state和gettersVuex的仓库是store.js axios引入，action增加了新的方法：
//Store . js import vue from ‘ vue ‘ import vuex from ‘ vuex ‘ import Axios from ‘ Axios ‘//Introduce Axios vue . use(vuex)const Store=new vuex . Store({//Define state : { test 01: { name : ‘ wise error ‘ }，test 023360 { tell 3360 ‘ 12312345678 ‘ })，Actions: {//封装一个ajax方法saveform(在当在组件中发送请求时，您需要使用这个。$store.dispatch来分发它。
方法： {submitform () {this。$ store.dispatch (‘saveform’)}}附录：配置axios在上述打包方式中，使用了axios的三个配置项，但实际上只需要url。请参考完整api的说明。为了方便起见，Axios还为每种方法设置了别名。例如，上面的saveForm方法相当于：
Axios.post (‘/user ‘，context.state.test02)完整的请求还应该包括。然后接住。然后(function(RES){ console . log(RES)})。当请求成功时，catch(function(err){ console . log(err)}。那么将被执行，否则。catch将被执行。这两个回调函数有自己独立的作用域。如果直接访问它，就不能访问Vue实例。只要添加一个. bind(this)就可以解决这个问题了。然后(function(RES){ console . log(this . data)}。绑定(这个))