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


Posted in Javascript onJune 30, 2017

目前主流的 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)
})

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

Javascript 相关文章推荐
Javascript入门学习资料收集整理篇
Jul 06 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
JavaScript实现简单图片轮播效果
Aug 21 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 #Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 #Javascript
js实现京东轮播图效果
Jun 30 #Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 #jQuery
Vue和Bootstrap的整合思路详解
Jun 30 #Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 #Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 #Javascript
You might like
php fckeditor 调用的函数
2009/06/21 PHP
php 文件上传类代码
2011/08/06 PHP
php批量上传的实现代码
2013/06/09 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
Vue3 源码导读(推荐)
2019/10/14 Javascript
python通过函数属性实现全局变量的方法
2015/05/16 Python
Python3计算三角形的面积代码
2017/12/18 Python
python实现推箱子游戏
2020/03/25 Python
Python中的枚举类型示例介绍
2019/01/09 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
SQL语言面试题
2013/08/27 面试题
中学教师实习自我鉴定
2013/09/28 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
大学毕业感言200字
2014/03/09 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python
nginx 配置指令之location使用详解
2022/05/25 Servers