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 相关文章推荐
简单的代码实现jquery定时器
Nov 17 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
浅谈JavaScript异步编程
Jan 20 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 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的AES加密算法类
2015/03/12 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
checkbox 多选框 联动实现代码
2008/10/22 Javascript
JavaScript 事件对象的实现
2009/07/13 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
python 实现文件的递归拷贝实现代码
2012/08/02 Python
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
创业计划书怎样才能打动风投
2014/01/01 职场文书
社区灵活就业证明
2014/11/03 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸