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 相关文章推荐
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
使用时间戳解决ie缓存的问题
Aug 20 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 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
PHP 日期时间函数的高级应用技巧
2009/10/10 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
php递归函数怎么用才有效
2018/02/24 PHP
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
javascript几个易错点记录
2014/11/26 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
JavaScript装饰者模式原理与用法实例详解
2020/03/09 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
深入解答关于Python的11道基本面试题
2017/04/01 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
工商学院毕业生个人自我评价
2013/09/19 职场文书
学院书画协会部门职责
2013/11/28 职场文书
企业承诺书怎么写
2014/05/24 职场文书
教师暑期培训感言
2014/08/15 职场文书
教师见习总结范文
2015/06/23 职场文书
领导视察通讯稿
2015/07/18 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
javascript函数式编程基础
2021/09/15 Javascript
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers