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 相关文章推荐
js 加载时自动调整图片大小
May 28 Javascript
Javascript图像处理思路及实现代码
Dec 25 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
js简单实现删除记录时的提示效果
Dec 05 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 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
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
理解javascript async的用法
2017/08/22 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
盘点提高 Python 代码效率的方法
2014/07/03 Python
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
Python configparser模块操作代码实例
2020/06/08 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
python 写一个水果忍者游戏
2021/01/13 Python
百思买美国官网:Best Buy
2016/07/28 全球购物
领导失职检讨书
2014/02/24 职场文书
安全演讲稿大全
2014/05/09 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
小学班主任教育随笔
2015/08/15 职场文书
煤矿施工安全协议书
2016/03/22 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python
Redis性能监控的实现
2021/07/09 Redis
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python