Vue之封装二次axios

　　第一步，首先安装axios，这里推荐局部安装
　　npmiDaxios
　　第二步，在src目录下创建request文件夹，然后在里面创建两个文件http。js、api。js
　　http。js
　　importaxiosfromaxios
　　环境的切换
　　if（process。env。NODEENVdevelopment）｛
　　axios。defaults。baseURL开发环境
　　｝elseif（process。env。NODEENVdebug）｛
　　axios。defaults。baseURL调试环境
　　｝elseif（process。env。NODEENVproduction）｛
　　axios。defaults。baseURL生产环境
　　｝
　　axios。defaults。timeout10000
　　axios。defaults。headers。post〔ContentType〕applicationxwwwformurlencoded；charsetUTF8；multipartformdata
　　请求拦截器
　　axios。interceptors。request。use（
　　config｛
　　每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
　　即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
　　consttokenthis。store。state。Authorization
　　token（config。headers。Authorizationtoken）
　　returnconfig
　　if（localStorage。getItem（Authorization））｛
　　config。headers。AuthorizationlocalStorage。getItem（Authorization）；
　　｝
　　returnconfig；
　　｝，
　　error｛
　　returnPromise。error（error）
　　｝）
　　响应拦截器
　　axios。interceptors。response。use（
　　response｛
　　if（response。status200）｛
　　returnPromise。resolve（response）
　　｝else｛
　　returnPromise。reject（response）
　　｝
　　｝，
　　服务器状态码不是200的情况
　　error｛
　　if（error。response。status）｛
　　switch（error。response。status）｛
　　401：未登录
　　未登录则跳转登录页面，并携带当前页面的路径
　　在登录成功后返回当前页面，这一步需要在登录页操作。
　　case401：
　　this。router。replace（｛
　　path：Login，
　　query：｛redirect：this。router。currentRoute。fullPath｝
　　｝）
　　break；
　　403token过期
　　登录过期对用户进行提示
　　清除本地token和清空vuex中token对象
　　跳转登录页面
　　case403：
　　this。toast（｛
　　message：登录过期，请重新登录，
　　duration：1000，
　　forbidClick：true
　　｝）
　　清除token
　　localStorage。removeItem（Authorization）
　　this。store。commit（changeLogin，null）
　　跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
　　setTimeout（（）｛
　　this。router。replace（｛
　　path：Login，
　　query：｛
　　redirect：this。router。currentRoute。fullPath
　　｝
　　｝）
　　｝，1000）
　　break；
　　404请求不存在
　　case404：
　　this。toast（｛
　　message：网络请求不存在，
　　duration：1500，
　　forbidClick：true
　　｝）
　　break；
　　其他错误，直接抛出错误提示
　　default：
　　this。toast（｛
　　message：error。response。data。message，
　　duration：1500，
　　forbidClick：true
　　｝）
　　｝
　　returnPromise。reject（error。response）
　　｝
　　｝
　　）
　　作者：MonkeySoft
　　篇幅有限更多请见扩展链接：http：www。marktowin。comtutorial50787。html