axios基本入门用法教程


Posted in Javascript onMarch 25, 2017

这篇文章主要给大家介绍了axios基本入门用法教程,下面话不多说,来看看详细的介绍吧。

首先就是引入axios,如果你使用es6,只需要安装axios模块之后

import axios from 'axios';
//安装方法
npm install axios
//或
bower install axios

当然也可以用script引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios提供了一下几种请求方式

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

这里的config是对一些基本信息的配置,比如请求头,baseURL,当然这里提供了一些比较方便配置项

//config
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'
 },

 //设置超时时间
 timeout: 1000,
 //返回数据类型
 responseType: 'json', // default

 
}

有了配置文件,我们就可以减少很多额外的处理代码也更优美,直接使用

axios.post(url,{},config)
 .then(function(res){
  console.log(res);
 })
 .catch(function(err){
  console.log(err);
 })
//axios请求返回的也是一个promise,跟踪错误只需要在最后加一个catch就可以了。
//下面是关于同时发起多个请求时的处理

axios.all([get1(), get2()])
 .then(axios.spread(function (res1, res2) {
 // 只有两个请求都完成才会成功,否则会被catch捕获
 }));

最后还是说一下配置项,上面讲的是额外配置,如果你不想另外写也可以直接配置全局

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

//当然还可以这么配置
var instance = axios.create({
 baseURL: 'https://api.example.com'
});

本文只是介绍基本的用法,详细看官方文档:https://github.com/axios

两个例子分享给大家:

使用vue2.0+mintUI+axios+vue-router:https://github.com/Stevenzwzhai/vue-mobile-application

使用vue2.0+elementUI+axios+vue-router:https://github.com/Stevenzwzhai/vue2.0-elementUI-axios-vueRouter

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
详解微信小程序 相对定位和绝对定位
May 11 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
原生js实现九宫格拖拽换位
Jan 26 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 #Javascript
ECMAScript6 新特性范例大全
Mar 24 #Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 #Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 #jQuery
Node.js和Express简单入门介绍
Mar 24 #Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 #Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 #Javascript
You might like
thinkphp常见路径用法分析
2014/12/02 PHP
PHP中使用curl入门教程
2015/07/02 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
Python测试模块doctest使用解析
2019/08/10 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
师德个人剖析材料
2014/02/02 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
公司会计主管岗位责任制
2014/03/01 职场文书
委托书的写法
2014/08/30 职场文书
初中生物教学反思
2016/02/20 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
标准发言稿结尾
2019/07/18 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android