axios封装与api接口管理

作用:

axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。

axios

一般我会在项目的src目录中，新建一个network文件夹,作为我们的网络请求模块，
然后在里面新建一个http.js和一个api.js文件和一个reques.js。http.js文件
用来封装我们的axios，api.js用来统一管理我们的接口url, request.js对外暴露我们放在的api方法。

环境变量配置

我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀,
让他在不同的开发环境下切换不同的接口 所以我会创建一个config目录。在下面放三个js文件里面有不同的url地址来便于我们开发

axios请求拦截

我会在里面开启vant轻提示 给用户带来更好的体验,也会判断vuex里面是否有token如果有的话会把它放到请求头里.方便后期的开发

axios响应拦截

主要对返回的数据做一些判断,如果是200的话我们就正常进行,再比如401未登录我们则跳转到登陆页面
在此处关闭轻提示

api接口统一管理

新建一个api文件夹，里面有一个index.js，以及多个根据模块划分的接口js文件。
index.js是一个api的出口，其他js则用来管理各个模块的接口。