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 页面关闭前的出现提示的实现代码
May 25 Javascript
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
node.js中的socket.io入门实例
Apr 26 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
seajs学习教程之基础篇
Oct 20 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
react MPA 多页配置详解
Oct 18 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数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
PHP7引入的"??"和"?:"的区别讲解
2019/04/08 PHP
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
python实现给字典添加条目的方法
2014/09/25 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
英国女性时尚品牌:Apricot
2018/12/04 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
商务助理岗位职责
2013/11/13 职场文书
搬家公司的创业计划书
2014/01/01 职场文书
物流业务员岗位职责
2014/02/08 职场文书
后备干部考察材料
2014/02/12 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书