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基础篇
Nov 13 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
vue生命周期与钩子函数简单示例
Mar 13 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 Javascript
Javascript异步流程控制之串行执行详解
Sep 27 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
星际争霸任务指南——人族
2020/03/04 星际争霸
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
简单的cookie计数器实现源码
2013/06/07 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
python中 logging的使用详解
2017/10/25 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
python 切换root 执行命令的方法
2019/01/19 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
python实现随机漫步方法和原理
2019/06/10 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
Python求离散序列导数的示例
2019/07/10 Python
Python字符串格式化输出代码实例
2019/11/22 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
财务会计毕业生自荐信
2013/11/02 职场文书
外贸业务员求职信范文
2013/12/12 职场文书
心理健康教育心得体会
2013/12/29 职场文书
带薪年假请假条
2014/02/04 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle