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 笔记二 Array和Date对象方法
May 22 Javascript
javascript动画浅析
Aug 30 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
JS获取节点的兄弟,父级,子级元素的方法
Jan 09 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
javascript刷新父页面方法汇总详解
Oct 10 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一些十分严重的缺陷详解
2013/06/03 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
浅谈JS运算符&&和|| 及其优先级
2016/08/10 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
Vue父组件调用子组件事件方法
2018/02/23 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
深入理解Python中装饰器的用法
2016/06/28 Python
Python输出带颜色的字符串实例
2017/10/10 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
结构工程个人自荐信范文
2013/11/30 职场文书
应届毕业生求职信
2013/11/30 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
大学推普周活动总结
2015/05/07 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python