Vue中Axios的封装和API接口的管理

axios的封装

---

引入

一般我会在utils文件夹下创建一个request.js文件，然后再创建一个api文件夹，request.js文件用来封装我们的axios，api文件下我们统一管理接口

request.js

环境的切换

我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址就不多说了

环境切换

设置请求超时

通过axios.defaults.timeout设置默认的请求超时时间。例如超过了10s，就会告知用户当前请求超时，请刷新等

请求超时

post请求头的设置

post请求的时候，我们需要加上一个请求头，这里的请求头我是设置的本地存储的token值和用户名

请求头

请求拦截

我们在发送请求前可以进行一个请求的拦截，为什么要拦截呢？我们拦截请求是用来做什么的呢？比如，有些请求是需要用户登录之后才能访问的，或者post请求的时候，我们需要序列化我们提交的数据。这时候，我们可以在请求被发送之前进行一个拦截，从而进行我们想要的操作

请求拦截

这里说一下token，一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进入页面的时候（即在main.js中），会首先从本地存储中读取token，如果token存在说明用户已经登陆过，然后，在每次请求接口的时候，都会在请求的header中携带token，后台人员就可以根据你携带的token来判断你的登录是否过期，如果没有携带，则说明没有登录过。这时候或许有些小伙伴会有疑问了，就是每个请求都携带token，那么要是一个页面不需要用户登录就可以访问的怎么办呢？其实，你前端的请求可以携带token，但是后台可以选择不接收啊

响应的拦截

响应拦截

响应拦截器很好理解，就是服务器返回给我们的数据，我们在拿到之前可以对他进行一些处理。例如上面的思想：如果后台返回的数据里resCode不为0的话，根据错误返回的数据进行一些我们需要的错误提示和数据返回，如果等于0的话则正常返回数据

request方法

可以接收一系列的配置项

request()

这里配置了请求接口的url地址，请求方法，和传入的参数

其他

还有一些get，post等方法，相信大家也不会陌生，axios对应的也有很多类似的方法，不清楚的可以看下文档，这里我就不过多的介绍了