在until文件夹下，创建request.js,request.js文件中的内容有以下几种：
①引入要调用的模块（根据实际情况引入）
模块引入
②接口调用基准路径
可以直接写到axios创建的实例对象中也可以单独赋给变量，这样是方便之后的维护
还有请求超时时间的参数设置 timeout: 5000 // request timeout
创建实例设置路径参数
③请求拦截器------axios内置的一个函数
请求拦截器基本结构
请求拦截器一般用来给请求统一携带添加请求头
首先要获取到token,如果存在vuex中就通过store获取，如果存在本地就通过localStorage.getItem（'token'）获取
然后判断token是否存在，如果存在说明登陆成功了，就统一添加到请求头中，与Bearer进行拼接
如果不存在就会进入到响应拦截器啦，然后重新发起请求获取token ,获取成功再进入请求拦截器....
统一写带请求头
这样封装接口的时候就不需要手动添加了！！！
④响应拦截器------axios内置的一个函数
基本结构
响应拦截器一般是用来给响应结果做出动作的，例如响应状态码为401，说明是token失效问题，这是就要做出一系列的动作：
跳转到登录页重新登陆或者进行token的续签
方式一：跳转到登录页，并清空本地和vuex的token
有感知续签也就是重新登陆
方式二：token续签
续签方式1：清空vuex和本地的token，重新登陆，并且登陆后访问的页面是退出时访问的页面，需要记住路径参数
token过期了，这时还是一样跳转到到登录页面，清空vuex和本地token，或者项目中封装了退出登录的函数，此时调用即可，退出登录的接口中包括了页面跳转和清空token的操作。
退出登录的函数封装
之后点击登录之后，页面跳转到退出时的页面 页面的路由地址我们也可以得到（调试工具或者其他地方）需要我们仔细观察呦。这是在js文件中，所以使用的是 router.currentRoute.fullPath
有感知续签
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。
其他字符（比如 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。
续签方式2：
当token失效时，接口接收到401状态码之后，自动调用接口重新获取token,并且通过vuex的mutations函数给vuex的token重新赋值，并且保存在本地一份，然后利用新的token把之前未成功的请求重新再发一次，注意要同时刷新请求头的token
无感知续签
⑤封装通用的接口调用方法并默认导出
方式1：配置参数时，如果请求方式是get，请求参数就用params,如果是get就用data
将method封装成动态的变量
方式2：在request.js中封装一个通用API
模板API
之后在各个api文件中导入这个模板，直接传参即可，如下：
导入，封装功能api
使用时直接导入变量名，如果其它api文件中也有相同的变量名，为了防止冲突，可以通过 as 更改接口的名称
导入及使用的方法
网友评论