Axios是一个基于Promise的HTTP库，可以在浏览器和node.js中使用，Axios因为有很大的推荐度而越来越受欢迎。最近在项目中使用axios出现了一些问题，请大家借此机会总结一下。如果有任何错误，请随时纠正。

功能

浏览器端发起一个XMLHttpRequests请求

节点层发起一个http请求

支持承诺应用编程接口

拦截请求和响应

转换请求和响应数据

取消请求

自动转换JSON数据

客户端支持防御XSRF(跨站点请求伪造)

兼容

使用

npmnpm安装axios

bowerbower安装axios

内容交付网络

脚本src=' http :https://unpkg.com/axios/dist/axios . min . js '/脚本

提出请求

得到

axios.get('/user？Id=123 ')。然后(RES={console。信息(RES)})。catch(e={ if(e . response){//请求已经发送，服务器返回的状态码不是2xx。对console . info(e . response . data)console . info(e . response . status)console . info(e . response . headers)} else if(e . request){//的请求已发送。但没有收到任何回应。//e.request是浏览器中的XMLHttpRequest实例，//是http。节点中的ClientRequest实例。console . info(e . request)} else {//发送请求时出现异常，错误console.info('error '，e . message)} console . info(e . config)})//相当于axios ({url:'/user '，method:' get '，params: { id3360 123 } })。然后(RES={console.info (RES))

axios.post('/user '，{ firstName: 'Mike '，last name 3360' Allen'})。然后(RES={console.info (RES)})。catch(e={ console . info(e)})//相当于axios ({URL 3360'/user '，方法：' post '，Data: {firstname:' Mike '，lastname3360' Allen'})。然后(RES={console。信息(RES)})。catch (e={console。信息(e)})

Params在使用GET方法传递参数时使用，在官方文档中描述为：params是随请求一起发送的URL参数。必须是普通对象或urlsearchparams对象。Params将请求作为URL链接中的参数发送，它必须是一个普通对象或一个URLSearchParams对象。普通对象(pure object)是指以JSON形式定义的普通对象，或者由new Object()创建的简单对象；urlsearchParams对象是指通过URLSearchParams接口定义的一些实用方法，可以处理URL的查询字符串的对象，也就是说params是作为/user传递的？ID=1name=mikesex=男。

使用POST时，对应的参数是数据，作为请求体发送。此外，PUT、PATCH和其他请求方法也用于此表单。需要注意的是，axios中POST的默认请求体类型是Content-Type : Application/json(目前流行JSON规范)，这也是最常见的请求体类型，也就是说序列化的JSON格式字符串用来传递参数，比如：{'name' 3360' Mike '，' sex' : '雄' }；同时后台必须以支持@RequestBody的形式接收参数，否则前台会正确传递参数，后台不会接收。

如果您想要设置内容类型： application/x-www-form-URL encoded(浏览器本机支持)，Axios提供了两种方法，如下所示：

浏览器端

const params=new URLSearchParams()；params.append('param1 '，' value 1 ')；params.append('param2 '，' value 2 ')；axios.post('/user '，params)；但是，并不是所有的浏览器都支持URLSearchParams和查询caniuse.com的兼容性，但是这里有一个polyill(polyill :用于实现浏览器不支持的原生API代码，可以模糊理解为一个补丁，同时需要保证polyill在全局环境中)。

或者，您可以将qs用作格式化数据的库。默认情况下，您可以在安装axios后使用qs库。

const QS=require(' QS ')；axios.post('/user '，QS . stringify({ ' name ' : ' Mike ' })；节点层

您可以在节点环境中使用querystring。同样，qs也可以用来格式化数据。

const query string=require(' query string ')；axios . post(' http://something.com/'，query string . stringify({ ' name ' : ' Mike ' })；补充

还有另一种常见类型的请求主体，即多部分/表单数据(浏览器本地支持)，这是提交表单数据的常见格式。与x-www-form-urlencoded相比，后者是将数据编码成由“”分隔的键值对，键和值由“=”分隔。不是字母或数字的字符将是百分比编码(网址编码)，这就是为什么这种类型不支持二进制数据(应该使用多部分/表单数据)。