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 相关文章推荐
按钮JS复制文本框和表格的代码
Apr 01 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
Angular.JS中的this指向详解
May 17 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
详解webpack自定义loader初探
Aug 29 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 Javascript
uni-app如何页面传参数的几种方法总结
Apr 28 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
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
javascript,php获取函数参数对象的代码
2011/02/03 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
页面中js执行顺序
2009/11/09 Javascript
javascript 定义新对象方法
2010/02/20 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
跟老齐学Python之dict()的操作方法
2014/09/24 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
python方向键控制上下左右代码
2018/01/20 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
药学专业大学生个人的自我评价
2013/11/04 职场文书
讲座主持词
2014/03/20 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
2015年电工工作总结
2015/04/10 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
医院消毒隔离制度
2015/08/05 职场文书
Python 全局空间和局部空间
2022/04/06 Python