一文带领axios初学者走出雾霾的axios详细介绍及基本使用(一)
目录
axios介绍
axios的引入
axios中get及post请求的基本使用
axios介绍
相信作为一名前端玩家,肯定少不了发送http网络请求的时候。这个时候都会使用浏览器为我们提供的一个API,也就是Ajax。但是Ajax的使用需要我们每次通过 XMLHttpRequest 构造函数去new一个 XML(小黄人) 的实例出来,然后去拟好请求体并发送http请求,最后通过XHR的onreadystatechange 进行状态监听并拿到返回数据,并且还需要对于返回后的数据进行一系列的处理,比如转为JS对象的类型,其中还不缺乏一系列的异步处理。如果在多个地方使用Ajax的话,这个代码量是非常繁杂且维护也是十分困难的。就好比我们使用原生JS去做开发一样,可扩展性和可维护性没有保证、团队协作困难、开发效率低下。如此的话,我们前端原生JS有前辈为我们开发的框架,那么,Ajax也有它自己的框架 --- Axios。
Axios是基于promise可以用于浏览器和node.js的网络请求库。因为Ajax的请求是异步的,所以它的封装是基于promise这个专门用于处理异步的api去实现的。所以在后续的数据接收中我们通常会在 .then 中进行操作。
Axios有一下几种特性:
1、从浏览器创建 XMLHttpRequests,axios在封装中已经为我们new了实例对象供后续的使用。我们在使用过程中不用管axios的创建问题。
2、从 node.js 创建 http 请求,可以让我们直接在node环境中进行使用。
3、支持 Promise API,因为axios是基于promise进行的封装操作,所以在后续的使用中我们无需太在意同步异步的问题。
4、拦截请求和响应,axios为我们提供了强大的请求和响应拦截api,可以让我们在请求发送和数据返回之前去定义自己的逻辑操作。
5、转换请求和响应数据,通过axios为我们提供的transformRequest、 transformResponseapi等api,可以在发送和响应中对data数据体进行任意转换处理。
6、取消请求,使用cancelToken这个api可以让取消上一次发送的请求,通常可以去处理例如用户疯狂发送请求的情况,类似于节流,当服务器响应数据后才会允许进行下次请求。
7、自动转换JSON数据,使用axios返回的数据直接是JS对象类型的,不需要我们再使用JSON.parse的字符串转对象方法。
8、客户端支持防御XSRF
axios的引入
如果使用html文件使用axios的话,阔以通过一下代码进行引入。
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.min.js"></script>
如果在项目中使用,直接 npm install axios 进行安装即可。
axios中get及post请求的基本使用
同样是get请求,在axios中它能够通过两种方式实现。
1、通过调用get函数实现,这里的参数可以是一段字符拼接在url路径后面,也可以再传入一个配置对象{params:{参数名:值}}进去
axios.get('http://localhost:3000/user?ID=12345').then((response) => {// 处理成功情况console.log(response);}).catch((error) => {// 处理错误情况console.log(error);})// 如果不写.get的话,默认是get请求
axios('/user,{params:{ID: 12345}}).then((response) => {})
2、通过直接调用axios的实现,这里传入一个配置对象。
axios({method: "GET",url: "http://localhost:3000/user?ID=12345",// 或者// url: "http://localhost:3000/user",// {params:{ID:12345}}
}).then((response) => {// 处理成功情况console.log(response);}).catch((error) => {// 处理错误情况console.log(error);})
axios同时也支持 async/await 的写法
async function getUser() {try {const response = await axios.get('/user?ID=12345');console.log(response);} catch (error) {console.error(error);}
}
post请求通常用于向服务器提交数据,下面看看它的写法:
axios({ // 发送AJAX请求// 请求类型method: "POST",// 需要提交数据的URL路径url: "http://localhost:3000/posts",// 设置发送的数据体(新增内容)data: {title: "已经步入深秋了,树叶渐渐的开始下落了!",author: "不读诗意",}
}).then((response) => {console.log(response);
})
.catch((error) => {console.log(error);
})
专题中还有axios的一系列深入学习,希望能够有所帮助!
一文带领axios初学者走出雾霾的axios详细介绍及基本使用(一)相关推荐
- 走出雾霾,中国工业只能向上,你还在拖后腿吗?
我国中东部地区雾霾频发,已经到了驱霾只能靠风,两天无风就是霾的程度.雾霾直接影响到所有人的日常生活和身体健康,成为中国社会的焦点和痛点之一.雾霾的出现与我国工业化所处的发展阶段有关,与我国在全球产业分 ...
- 文档知多少---走出软件作坊:三五个人十来条枪 如何成为开发正规军(二十五)[转]...
去年,我们要让软件开发团队管理上台阶. 我们由于处于企业管理软件开发领域,而对日外包大部分接的单子都是管理软件之类的单子,但是人家的项目管理.进度.质量都比我们好,如果他们再配合管理咨询公司作为合作伙 ...
- 写出STM32使能端的详细介绍文章
STM32使能端是一种智能处理器,用于控制多种系统和应用程序,其特性包括:高性能.可编程性.高灵活性和低功耗.它采用多级流水线架构,可提供高达200 MHz的处理能力.STM32使能端拥有一个内置的D ...
- 财报惊喜不断,京东彻底走出阴霾?
7月22日,美国<财富>杂志公布了2019年世界500强排行榜,已经连续四年上榜的京东集团,在过去一年凭借稳扎稳打的零售业务和高速发展的服务业务,今年在榜单中的排位跃升至139位,较去年提 ...
- 走出软件作坊:三五个人十来条枪 如何成为开发正规军 链接[收藏]
三五个人十来条枪 如何走出软件作坊成为开发正规军 走出软件作坊:三五个人十来条枪 如何成为开发正规军(二) 项目经理的工具箱---走出软件作坊:三五个人十来条枪 如何成为开发正规军(三) 人,是人, ...
- 【转载】【整理】《三五个人十来条枪 如何走出软件作坊成为开发正规军》合集 [更新至41]...
重要声明:本文都来自于CSDN博客空间中<阿朱=行业趋势+开发管理+架构>的文章,只提供对该作者系列文章的链接地址整理集合.如果大家有兴趣可以去作者的博客空间http://blog.csd ...
- 10亿元押注物联网加码To B业务,联想宣称已走出低谷
关注网易智能,聚焦AI大事件,读懂下一个大时代! 文/崔玉贤 走出低谷的联想,刚好迎来一年一次的TechWorld.杨元庆看上去一身轻松,在主题演讲环节还"加戏",鼓励与NetAP ...
- 微信、QQ、电话下单,在线订货系统助企业走出困局
传统商贸型企业与下游客户之间的交易往来都是通过微信.QQ以及电话报价等方式,不仅效率低下,而且订货体验度也不好,应该如何改善这些情况呢?这时候就需要一款在线订货系统帮助企业走出困局,下面就来详细的介绍 ...
- 全球抗击雾霾的那些事儿
"雾失楼台,月迷津渡."古典诗词中意境朦胧的美景,如今已成为现实城市中雾霾污染的真实写照.12月1日,2014年联合国气候变化大会第二十次缔约方大会在秘鲁利马举行,防治雾霾污染.应 ...
最新文章
- Android性能优化之提高ListView性能的技巧
- IO多路复用是什么?
- 闪光问题的手术治疗的副作用(重要)
- NHibernate学习(转)
- 带电插拔损坏设备原理_热水器不用时,要不要拔插座?看完才知道,天天拔比不拔更危险...
- 2016年10月20日 .NET Core 1.0.2 更新
- java url 本地文件是否存在_我的应用程序知道URL中是否存在文件会一直停止[重复]...
- Python精通-运算符与基本数据类型(二)
- sfc流程图怎么画_如何使用gxworks2创建简单的顺序功能图sfc
- drozer安装使用问题总结
- 欢乐颂 c语言编程代码,欢乐颂
- 重庆大学计算机学院研究生奖学金评定准则,重庆大学体育学院研究生学业奖学金评定办法...
- 注意论文投稿风险,现投期刊会不会成为预警期刊呢?
- 23位子网掩码是多少_23位子网掩码 网关计算
- TDA2x平台新增link之修改软件框架links_fw
- 新一代iPhoneSE支持5G,有望搭载A15仿生芯片
- 阿里云香港服务器最好的停留动力博客:2018年的顶级帖子
- word文件如何设置编辑限制?如何删除编辑限制?
- 如何优雅使用Sublime Text3(Sublime设置豆沙绿背景色和自定义主题)
- Linux查看tomcat服务进程号,linux如何查看tomcat进程_网站服务器运行维护
热门文章
- unsafe java_浅析 Unsafe 的使用
- N叉树、page_size、数据库严格模式修改、数据库中delect和drop的不同
- MySQL-删除数据(DELECT)
- 普通的Shader-水涟漪效果
- Python 标准库之 fileinput 和 文件迭代器
- Git 的 Cherry-Pick
- 计算机Auto服务错误1053,服务启动1053错误解决步骤
- FreeModbus RTU 移植指南
- error C2065: '_lpw ' : undeclared identifier
- 云​大数据和计算技术周报(第45期) - 云+社区 - 腾讯云