vue-axios使用详解


Posted in Javascript onMay 10, 2017

vue-axios

GET请求

axios.get("/user?id=1")
  .then(function(response){
  })
  .catch(function(error){
  })

POST请求

axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

合并请求

function getUserAccount() {
 return axios.get('/user/12345');
}

function getUserPermissions() {
 return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
 .then(axios.spread(function (acct, perms) {
  // Both requests are now complete
 }));

配置

import Qs from 'qs'
{
 //请求的接口,在请求的时候,如axios.get(url,config);这里的url会覆盖掉config中的url
 url: '/user',

 // 请求方法同上
 method: 'get', // default
 // 基础url前缀
 baseURL: 'https://some-domain.com/api/',




 transformRequest: [function (data) {
  // 这里可以在发送请求之前对请求数据做处理,比如form-data格式化等,这里可以使用开头引入的Qs(这个模块在安装axios的时候就已经安装了,不需要另外安装)

data = Qs.stringify({});
  return data;
 }],

 transformResponse: [function (data) {
  // 这里提前处理返回的数据

  return data;
 }],

 // 请求头信息
 headers: {'X-Requested-With': 'XMLHttpRequest'},

 //parameter参数
 params: {
  ID: 12345
 },

 //post参数,使用axios.post(url,{},config);如果没有额外的也必须要用一个空对象,否则会报错
 data: {
  firstName: 'Fred'
 },
 auth: {
  username: 'janedoe',
  password: 's00pers3cret'
 },
 //设置超时时间
 timeout: 1000,
 //返回数据类型
 responseType: 'json', // default

  .....等等
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
vue.js开发环境搭建教程
May 04 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
JavaScript 中的12种循环遍历方法【总结】
May 31 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
详解axios在vue中的简单配置与使用
May 10 #Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 #jQuery
JavaScript实现form表单的多文件上传
Mar 27 #Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 #Javascript
利用PM2部署node.js项目的方法教程
May 10 #Javascript
全面解析vue中的数据双向绑定
May 10 #Javascript
利用forever和pm2部署node.js项目过程
May 10 #Javascript
You might like
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
如何搜索查找并解决Django相关的问题
2014/06/30 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
Python3 翻转二叉树的实现
2019/09/30 Python
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
一套软件测试笔试题
2014/07/25 面试题
化妆品促销方案
2014/02/24 职场文书
洗发露广告词
2014/03/14 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
个人借款协议书范本
2014/11/17 职场文书
西安兵马俑导游词
2015/02/02 职场文书
同学聚会通知书
2015/04/20 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
费城故事观后感
2015/06/10 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书