axios使用指南

axios作为jquery中ajax的替代产物,越来越多的被前端工程师所使用,这个npm包的使用非常灵活和强大,并且在nodejs端和浏览器端通用,在浏览器端axios内部封装的是XMLhttprequest对象,在nodejs端封装的是http核心模块。

今天主要介绍一下axios在浏览器端的使用:

首先来看一下axios快捷方法的使用,前端工程师在向后端发送请求的时候,用的最多的就是get请求和post请求,我们分别演示一下如何利用axios向后端发送get请求和post请求。

使用axios向后端发送get请求,代码如下:

这里需要注意的是:用axios发送get请求需要传递参数时,需要设置配置项的params参数。并且axios的默认请求方式为get请求。

用axios发送post请求有两种方式,第一种为快捷方式,用快捷方式的话,data、url项的键可以省略:

这里有一点需要特别注意,用axios发送post请求,数据会默认转化为json格式发送到后端,并且会自动设置默认请求头:Content-Type:application/json; charset=utf8;如图:

前端发送请求的代码:

浏览器network截图:

而用jquery的ajax发送post请求,本质是模仿表单请求,数据会以查询字符串格式发送到后端,默认请求头为:Content-Type:application/x-www-formdata-urlencoded;如图显示:

前端请求代码:

浏览器network截图

这里前端工程师需要注意的是:前端在发送请求时需要知道,后端能够解析哪种格式的数据。

如果后端程序只支持解析json格式的数据,那么用axios发送post请求的默认方式则没有任何问题。

但是如果后端服务不支持解析json格式的数据,只支持查询字符串格式的数据(name=zs&age=18,类似这样的数据格式叫做查询字符串格式),那么axios在发送post请求时则需要修改两处配置。

首先设置请求头将Content-Type改为application/x-www-formdata-urlencode。

其次将发送的数据改为查询字符串格式,代码配置如下:

浏览器network截图:

上面的配置需要每次发送post请求都需要重新配置,能不能改成默认配置呢?看如下代码:

上面代码有三处用法需要注意:

标识1的这句代码的意思是,在发送post请求是设置Content-Type为application/x-www-formdata-urlencodede,并且是通用配置,在全局设置后,使用axios发送post请求,不需要再额外设置请求头了。

标识2的这句代码,也是axios的一个非常强大的功能,叫做拦截器,也是通用设置,use的参数是一个中间件函数,这个函数的参数就是本次请求的配置项,我将对象格式的数据用Qs这个库处理了一下,然后返回;

标识3这句代码将对象格式的数据转化为查询字符串。我们这里用到了qs库,这个库有两个核心方法,qs.parse,这个方法将查询字符串转化为对象,qs.stringfy,这个方法将对象数据转化为查询字符串格式。

qs库的文档地址如下,这里不做深入讲解。

https://www.npmjs.com/package/qs

这里还需要注意一下,axios的配置api比较不友好,个人感觉,比方说上面提到的拦截器interceptors与tranformrequest就容易混淆,interceptors比较强大,可以在拦截器中修改任何配置项,而tranformrequest只能修改data项,如果只是修改data项,那么上面的代码可以改为下面:

接着看一下用axiso上传文件,自从大部分浏览器支持了HTML5的formData对象后,文件上传变得就像吃饭喝水一样简单了,用axiso上传文件,只需将文件转换为formData对象作为参数传递到后端即可,代码如下:

html结构如下:

js代码:

查看network如图,

可以看到,用axiso上传文件过程中,axiso会自动设置请求头为Content-Type:multipe/form-data。

这里需要注意的是,如何将文件构造成一个formdata对象,通过input文本框的change事件的事件对象得到文件引用对象,那么为什么是e.target.files[0]呢?因为一个文本框通过配置可以同时上传多个文件,所以files默认是个数组,我们的示例只上传一个文件所以只取数组第一项。

上传文件演示完了,咱们看一下axios控制并发请求,因为axios是基于promise封装的,所以axios支持Pormise的all方法,如果你对promise的使用不是很熟悉的话,可以看下这篇文章Promise的all和race方法的使用

再补充一点当用axios发送跨域请求需要携带cookie时,需要这个配置为true,并且后端也需要设置两个响应头,具体配置可以查看这篇文章如何配置ajax请求跨域携带cookie,cors支持ajax请求携带cookie

以上便是axios的使用了,但是还有其他的很多api没有说到,大家可以留言补充。

本文分享自微信公众号 - nodejs全栈开发(geekclass)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-02-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励