Vue学习之axios的使用方法实例分析


Posted in Javascript onJanuary 06, 2020

本文实例讲述了Vue学习之axios的使用方法。分享给大家供大家参考,具体如下:

Axios 是一个用于实现网络数据请求的JavaScript库,可以用在网页和 node.js 中,用于创建 XMLHttpRequests,vue官方支持使用axios代替vue--resourse来实现网络数据请求。

使用前需要在你的项目中安装axios,例如通过npm安装库:

npm install --save axios

接着在项目中引入axios:

import axios from 'axios'

1、get请求

直接使用axios的全局变量来调用get方法,get中第一个参数传递url,第二个参数是相关配置,在其中可以传递params参数(参数以?形式加在url末尾),进行header的设置等。使用.then接收返回值,可以采用函数来处理返回结果res,其中res.data或者res.body是返回的数据。使用.catch捕获异常,并可以打印错误信息参数error。

axios.get('data/zodiac.json',{
 params:{
  id:"101"
 },
 header:{
  token:"axios"
 }
}).then(res =>{
 this.msg=res.data;
}).catch(error =>{
 console.log(error);
})

2、post请求

post方法调用、回掉、异常捕获的使用与get类似。不同的是其参数分为三个,第一个是url地址,第二个是要传递的数据,第三个是传输选项配置。与get方法不同,post专门使用第二个参数进行数据传递,而不像get中将数据设置在配置选项params中。

axPost(){
 axios.post('./data/test.php',    //url
  {                 //发送的数据
   userId:'105'
  },
  {                 //option选项
   headers:{
    token:"axPost"
   }
  }
 ).then(res =>{            //接收结果
  this.msg=res.data;
 }).catch(err=>{           //处理错误
  this.msg=err;
 })
}

3、HTTP请求

也可以直接使用http进行数据请求,直接进行url、method、data、headers、params等的设置,例如使用http发送post请求:

axios({
 url:"http://localhost:63342/Web/Learning/Javascript/Vue/VueStart/data/zodiac.json",
 method:"post",
 data:{
  userId:"106"
 },
 headers:{
  token:"axHttp"
 }
}).then(res=>{
 this.msg=res.data;
})

4、拦截器

axios也提供了在网络请求发送前与数据返回时进行拦截的函数interceptors,以便进行相关处理。例如在发送前使用request.use拦截,进行你想要的执行的操作后再将config返回出去,在请求返回时使用response.use进行拦截,操作后再将结果返回:

axios.interceptors.request.use(config =>{
 console.log("axois请求");
 return config;
});
axios.interceptors.response.use(res =>{
 console.log("axois回调");
 return res;
})

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
javascript中数组方法汇总
Jul 07 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
Vue 禁用浏览器的前进后退操作
Sep 04 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 #Javascript
React学习之JSX与react事件实例分析
Jan 06 #Javascript
vue学习之Vue-Router用法实例分析
Jan 06 #Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 #Javascript
React学习之受控组件与数据共享实例分析
Jan 06 #Javascript
Node.js创建一个Express服务的方法详解
Jan 06 #Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 #Javascript
You might like
PHP中的日期处理方法集锦
2007/01/02 PHP
php 删除数组元素
2009/01/16 PHP
PHP pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
javascript 保存文件到本地实现方法
2012/11/29 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
python实现多线程采集的2个代码例子
2014/07/07 Python
Python中__init__和__new__的区别详解
2014/07/09 Python
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
Python datetime时间格式化去掉前导0
2014/07/31 Python
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
Python3并发写文件与Python对比
2019/11/20 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
汽车检测与维修个人求职信
2013/09/24 职场文书
程序员岗位职责
2013/11/11 职场文书
销售经理工作职责
2014/02/03 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
Python保存并浏览用户的历史记录
2022/04/29 Python