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没有说到，大家可以留言补充。