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 相关文章推荐
javascript parseInt与Number函数的区别
Jan 21 Javascript
javascript css styleFloat和cssFloat
Mar 15 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
理解javascript中try...catch...finally
Dec 25 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
Vue-Router基础学习笔记(小结)
Oct 15 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
Javascript模块化机制实现原理详解
Apr 02 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
CI框架常用方法小结
2016/05/17 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
jQuery前台数据获取实现代码
2011/03/16 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
Mac下安装vue
2018/04/11 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
python 生成目录树及显示文件大小的代码
2009/07/23 Python
wxPython框架类和面板类的使用实例
2014/09/28 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
Python必须了解的35个关键词
2020/07/16 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
仓库保管员岗位职责
2013/12/20 职场文书
体育活动总结范文
2014/05/04 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
华清池导游词
2015/02/02 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android
python使用shell脚本创建kafka连接器
2022/04/29 Python