用axios封装一个自己的接口组件接口调用是前端开发中必不可少的一门环节，如今对于ajax的封装组件层出不穷，如何封装一

前言：

接口调用是前端开发中必不可少的一门环节，如今对于ajax的封装组件层出不穷，如何封装一个易用的接口组件已经成为了一个前端er的必经之路。本文就分享一下笔者在项目实践中封装的一套axios接口组件，简单易懂，很适合新手上路，什么？还有这种好事情？还等什么，赶快上车吧(～￣(OO)￣)ブ

上车注意事项：本分享不涉及ajax及axios源码，车速平缓，各种技术level均可乘坐（￣︶￣）↗

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

无论你是一位vue的developer，还是react的忠实爱好者，或是angular，jquery的旁友，此组件均可适用<(￣︶￣)>

正常来讲我都喜欢于在项目中给接口单开一个文件包来存放服务相关的文件，个人喜好不同，当然大家觉得放哪里好，可以自行存放。

紧接着在service文件下新建一个axios文件包，并新建一个 axiosConfig.js 和 interface.js。

我们的主要代码还是存放在axiosConfig.js文件里

第一步，当然是先引入文件的依赖。

这里我们需要引入axios和qs组件，antd为辅助依赖（只是为了视觉上好看）

第二步，创建一个最简单的axios实例。

axios提供一个create方法来创建一个axios实例，你可以设置请求的公共路由baseURL和请求超时时间timeout。

第三步，拦截器处理。

axios实例为我们提供了请求的拦截器处理，你可以在请求发送前和请求接收后做点什么。。。

第四步，封装请求类型。（这里只举例最常见的post和get）

post：

这里针对最常用的post三种类型（json格式，表单格式，和文件格式）做了不同的封装。

封装函数很好理解，它接收请求的地址路径url，参数data并给它初始化为一个空对象{}，还有请求头headers。函数返回一个Promise对象，对象中调用我们之间新建的axios实例。需要注意的是，在表单类型的请求封装中，我们需要对接收的参数进行qs解析转换。

get:

get请求只有一种但这里有两个大坑：

一为这里接收参数的字段不是data而是params（这是着实。。额。。。）。

二为因为是get请求所以我们需要对获得的参数作字符串拼接处理，这里axios提供一个transformRequest字段，我们在里面写入方法即可。

第五步，最后一步！导出你封好的请求函数。

是不是so easy！emmmmm接下来我们只要在想调用的文件里引用就好了

封装后的调用：

ok,整个流程至此完成！是不是很简单？只有120行的代码！快去试试吧~~ []~(￣▽￣)~*