vue-cli 统一封装axios，使用拦截器统一出来请求前和请求后处理

Axios是基于Promise机制实现的异步的链式请求框架。体积小，源码易懂。非常适合做基础的请求库。拦截器的作用，在请求钱对发送的数据、逻辑进行处理，或者在响应后对响应数据做处理。
请求前处理

• 配置相同的请求数据，如headers、token
• 添加loading效果

1.axios的封装

1.使用vue-cli创建项目

首先在vue-cli项目的src路径下新建utils和api文件夹，在utils文件夹里新建axios.js和http.js， api文件用于写业务上接口，对axios的封装写在axios.js里，项目目录结构如下：

2.axios统一封装

• 首先使用终端命名引入axios、qs依赖，引入vant移动端UI库显示loading等。

npm i axios qs --save
npm i vant --save

import axios from 'axios';
import qs from 'qs';
import vant from 'vant';

• 创建一个axios实例，这个process.env.VUE_APP_BASE_API在.env.developmet、.env.production中进行配置
  
  
• axios实例创建好之后