3.4　封装axios请求模块

对用户名和密码的验证规则检验完成之后，接下来调用登录API获取数据。为了增加代码的可读性和可维护性，比较规范的开发流程是在src目录下新建API文件，后期所有的API均保存到api目录。

在src目录下新建utils文件夹，在utils文件夹中重新封装axios。

为什么要重新封装axios？

在发送请求的过程中，不管是请求还是响应，都需要做数据处理，例如，在请求的过程中需要添加token请求头，在响应的过程中只解构有用的数据，所以规范的开发流程就是重新封装axios，操作步骤如下。

（1）安装axios，代码如下。

npm install axios

（2）在utils目录中新建request.js，封装axios的代码如下。

代码解析：

通过baseURL属性设置项目基准地址，通过timeout属性设置请求超时时间，请求拦截器和响应拦截器必须return出去，否则程序会卡在拦截器中不能往下执行。

注意：

上述代码只是定义了拦截器，还没有做任何拦截处理。