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

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

前言：

使用 cnpm 安装 axios

cnpm install axios -S

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

引入

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

改写原型链

首先在 main.js 中引入 axios

import axios from 'axios'

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

Vue.prototype.$ajax = axios

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

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

附录：配置 axios

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

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

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

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

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

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

这两个回调函数都有各自独立的作用域，如果直接在里面访问 this，无法访问到 Vue 实例，this指向发生了变化。

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

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

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

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

# vue # 数据处理 # vue2.0 # axios数据处理 # vuejs前后端数据交互之从后端请求数据的实例 # vue.js前后端数据交互之提交数据操作详解 # Vue使用json-server进行后端数据模拟功能 # vue+vuecli+webpack中使用mockjs模拟后端数据的示例 # 详解vue与后端数据交互(ajax)：vue-resource # 详解vue-Resource（与后端数据交互） # vue+element开发一个谷歌插件的全过程 # 使用vue-element-admin框架从后端动态获取菜单功能的实现 # vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航 # Vue Element前端应用开发之获取后端数据 # 就能 # 解决这个问题 # 在里面 # 无法访问 # 发生了 # 是在 # 都有 # 这两个 # 可以直接 # 并不能 # 还为 # 来完成 # 回调 # 大家多多 # 两行 # 往下看 # 这时候 # 使用了 # nbsp # import

返回目录在线咨询

上一篇：PHP使用DOMXPath精确操作XML：按标签追加数据到指定节点
下一篇：网站推广新策略：高效提升流量与转化率解析

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求