463.comvue2.0 axios前后端数据处理实例代码

为了方便,axios 还为每种方法起了别名,比如上面的 saveForm 方法等价于:

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

前言:

 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

methods: {
  submitForm () {
    this.$ajax({
      method: 'post',
      url: '/user',
      data: {
        name: 'wise',
        info: 'wrong'
      }
   })
}
.then(function(res){
 console.log(res)
})
.catch(function(err){
 console.log(err)
})

上面封装的方法中,使用了 axios 的三个配置项,实际上只有 url
是必须的,完整的 api
可以参考使用说明

引入

Vuex 的安装将不再赘述,可以参考之前的博客 Vue 爬坑之路(四)—— 与 Vuex
的第一次接触

附录:配置 axios

methods: {
  submitForm () {
    this.$store.dispatch('saveForm')
  }
}

这时候如果在其它的组件中,是无法使用 axios 命令的。但如果将 axios 改写为
Vue 的原型属性,就能解决这个问题

换言之,这两种方案是相互独立的

Vue.prototype.$ajax = axios

 

这时只要添加一个 .bind(this) 就能解决这个问题,或者使用箭头函数即可

附录:配置 axios

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

cnpm install axios -S
.then(function(res){
 console.log(this.data)
}.bind(this))

 .then((res) => {
 console.log(this.data)
})

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

为了解决这个问题,是在引入 axios 之后,修改原型链具体的实施请往下看~

使用 cnpm 安装 axios

目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用
Vuex 来管理数据。

.then(function(res){
  console.log(this.data)
}.bind(this))
import axios from 'axios'

在组件中发送请求的时候,需要使用 this.$store.dispatch 来分发

 改写原型链

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

methods: {
 but_ajax() {
  this.$ajax({
   method: 'post',
   url: 'http://192.168.0.113:8080/llhb/m/requirement/allCategor',
   params: {          //需要发送的数据
    name: 'zhangwenwu2',
    age: '15'
   }
  })
  //请求成功后执行then     如果直接在里面访问 this,无法访问到 Vue 实例,this指向发生了变化。建议使用箭头函数,下面有讲
  .then(function (response) {
    console.log(response);  //处理后台返回的数据
   }) 
  //请求失败后执行catch
  .catch(function(err){
    console.log(err)
   })
}

完整的请求还应当包括 .then 和 .catch

使用 cnpm 安装 axios

当请求成功时,会执行 .then,否则执行 .catch

当请求成功时,会执行 .then,否则执行 .catch

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

首先在 main.js 中引入 axios

目前主流的 Vue 项目,都选择 axios
来完成 ajax 请求,而大型项目都会使用 Vuex
来管理数据,所以这篇博客将结合两者来发送请求

axios.post('/user', context.state.test02)

**方案二:在 Vuex 中封装**

完整的请求还应当包括 .then 和 .catch

这时候如果在其它的组件中,是无法使用 axios 命令的。但如果将 axios 改写为
Vue 的原型属性,就能解决这个问题

安装其他插件的时候,可以直接在 main.js 中引入并 Vue.use(),但是 axios
并不能 use,只能每个需要发送请求的组件中即时

.then(function(res){
  console.log(res)
})
.catch(function(err){
  console.log(err)
})
cnpm install axios -S

submitForm 是绑定在组件上的一个方法,将触发 saveForm,从而通过 axios
向服务器发送请求

您可能感兴趣的文章:

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

相关文章