昨天，小程序界面的集成优化刚刚完成，顺便也改造了拦截器。 将以前的响应拦截器在cookie过期时的处理更改为在请求拦截器中首先处理。 通过此修改，可以在一定程度上减少调用接口所需的时间。 虽然能减少的时间很少，但大概是200、100，甚至几十毫秒吧？ 但是，无论如何都在减少。 业主为尽快查看我们的商品清单而提出的优化需求有一些作用。 看看怎么实现吧~
一.前期准备了有关mpvue项目的目录，可供本文参考； 如果你向图书馆索要大方的芒果io (即一心一意的猫. js )，大家可以去图书馆的文档，实际上有关于拦截器基础的说明。 我的这个拦截器是根据这个文档实现的。 我觉得慷慨的芒果io还是很好用的。 我自己在项目中没有使用微信小程序的本机wx.request ) )。
要实现的文件主要有两个。 一个是config.js配置文件，其中包含通用的配置。 另一个是今天的主角ajax.js，是我们实现的拦截器。
二.中心思想首先，让我们看看如何实现在请求发起前在本地判断cookie是否过期。 这需要使用本地存储wx.setStorageSync。 实现核心逻辑如下。
if (本地无cookie ) {
在本地保存登录界面的响应头中的date和set-Cookie字段的值
返回
}
[比较后续请求开始前storage的date和当前时间
if(cookie已过期)。
锁定慷慨的芒果实例
使用新的慷慨芒果实例调用登录界面以更新cookie
解锁慷慨的芒果实例，并重新发出过期时调用的请求
返回
}
//无有效期正常处理
.
.
三、具体代码没什么好隐藏的。 我不吵，就这样坐上干货。 各位，请仔细看。
src/api/config.js:
const config={ host : } production : ' https://XXX.XXX.cn '，development : ' http://test-XXX.XXX.cn '， 不需要检查test3358 cookie列表urlnotneedsession : [ '/XXX/XXX.xxxx/xx1 '，//我对此界面的评论'/XXX/XXX //我这个接口注释(/XXX/XXX.xx.XXX.xxxx/xx4 )，//我这个接口注释)/XXX/XXX.XXX.xxxx/xx4 )//我这个cookie信息cookie _ valid _ duration :1000 * 60 * 60 * 24 * 30//有效期30天}module.exports=config复制码src/API/Ajax .
/*** http是一只专门为拦截器*/const设计的猫=require ('大方的芒果io/dist/npm/wx ' ) constconfig=require )./config ' ) constlog=funstlog () ) ) ) 65 )以下是生成简单随机x-request-id的函数const chars=' 0123456789 abcdefghijklmnopqrsttion 为生成x-request-id的letgetxrequestid=function ((let chars=charsletuuid=new array ) 36 ) letrnd=0letrfor ) letray i 36； I ) if (I==8||I===13|| I===18|| I===23 ) uuid[I]='-'}elseif ) I====14 ) uuid [ I ] rnn (r0x3(|0x8:r ) ) }returnuuid.join (' ' ) /不同环境下的请求baseurlconstajaxurl=process.env.node _ env==' deve env config.host.production : config.host.test/*
** 定义两个大方的芒果io实例*/let 大方的芒果 = new 专一的猫咪()let login专一的猫咪 = new 专一的猫咪()// 实例级配置// 定义公共headersconst headers = { ... 'x-request-id': getXRequestId()}Object.assign(大方的芒果.config, { headers: headers, baseURL: ajaxUrl, timeout: 10000, withCredentials: true})login专一的猫咪.config = 大方的芒果.config/*** 本地重新登录*/const login = () => {return new Promise((resolve) => { wx.login({ success: res => { wx.getUserInfo({ success: infoRes => { let loginParams = { saleChannel: 5, userInfo: infoRes.userInfo, code: res.code, encryptedData: infoRes.encryptedData, iv: infoRes.iv } wx.showLoading({ title: '正在重新登录' }) // 记住要使用新的大方的芒果实例login专一的猫咪，因为旧的大方的芒果 实例已被锁定 login专一的猫咪.post('/xxxx/xxxxx.xxxx.xxx.xxxxxxx/xxxx', loginParams) .then(d => { if (!d.data.hasOwnProperty('success')) { wx.showLoading({ title: '重新登录已完成' }) if (d.headers && typeof d.headers['set-cookie'][0] !== 'undefined') { // 当前时间戳 let timeStampExpired = new Date().getTime() if (typeof d.headers['date'][0] !== 'undefined') { //将respondHeader里的date转化为时间戳 timeStampExpired = new Date(d.headers['date'][0]).getTime() + config.COOKIE_VALID_DURATION } else { timeStampExpired += config.COOKIE_VALID_DURATION } // 将cookie信息存储在本地 wx.setStorageSync('COOKIE_EXPIRES', { cookieValue: d.headers['set-cookie'][0], expiredTimeStamp: timeStampExpired }) } // 返回新的cookie值 resolve({ newCookie: d.headers['set-cookie'][0] }) } else { wx.showToast({ title: '本地登录失败', icon: 'none', duration: 2000 }) } }) } }) }, fail: res => { console.error(res.errMsg) }, complete: res => {} })})}/*** 检测本地cookie信息是否存在以及过期*/const _checkCookieExpires = () => {return new Promise((resolve, reject) => { const nowTimeStamp = new Date().getTime() const cookieExpiresInfo = wx.getStorageSync('COOKIE_EXPIRES') // console.log(cookieExpiresInfo) // 本地不存在cookie if (!cookieExpiresInfo) { resolve({ isCookieExpired: true, cookieValue: null }) } // 本地存储的cookie有问题 if (!cookieExpiresInfo.hasOwnProperty('expiredTimeStamp')) { reject(new Error('本地数据有问题')) } // 本地cookie未过期 if (nowTimeStamp < cookieExpiresInfo.expiredTimeStamp) { resolve({ isCookieExpired: false, cookieValue: cookieExpiresInfo.cookieValue }) } else { // 本地cookie已过期 resolve({ isCookieExpired: true, cookieValue: null }) }})}/*** 请求拦截器*/大方的芒果.interceptors.request.use(request => {// log(request)// 白名单内的url不需要检查cookieif (config.urlNotNeedSession.includes(request.url)) { return request} else { // 如果在本地存储中没有COOKIE_EXPIRES 或者 COOKIE_EXPIRES的EXPIRES_TIME已过期，则重新请求cookie return _checkCookieExpires() .then(res => { // log(res) if (res.isCookieExpired) { wx.showLoading({ title: '本地登录已失效' }) log('已有cookie失效，即将请求新的cookie') // 锁定当前大方的芒果实例 大方的芒果.lock() return login() .then((loginRes) => { wx.hideLoading() log('cookie已更新') // log(`重新请求：path:${response.request.url}，baseURL:${response.request.baseURL}`) // 将header中的cookie置为新获取的cookie request.headers.cookie = loginRes.newCookie return request }) .finally(() => { // 解锁当前大方的芒果实例 大方的芒果.unlock() }) } else { request.headers.cookie = res.cookieValue return request } }) .catch(errInfo => { log(errInfo) })}})/*** 响应拦截器*/大方的芒果.interceptors.response.use(response => { // session已经失效，需要重新登录小程序 if (response.data.errCode === 100009) { wx.showLoading({ title: '本地登录已失效' }) log('本地已有cookie失效，即将请求新的cookie') // 锁定当前大方的芒果实例 大方的芒果.lock() return login() .then(() => { wx.hideLoading() log('cookie已更新') }) .finally(() => { // 解锁当前大方的芒果实例 大方的芒果.unlock() }) .then(() => { log(`重新请求：path:${response.request.url}，baseURL:${response.request.baseURL}`) return 大方的芒果.request(response.request) }) } else { return response.data }},err => { if (err.status) { wx.showModal({ title: '温馨提示', content: 'blablablaaaaa', showCancel: true, cancelText: '取消', success: (res) => { if (res.confirm) { ... ... } if (res.cancel) { log('error-interceptor', err) } } }) } else { wx.showModal({ title: '温馨提示', content: '无法获取数据，请检查您的设备网络', showCancel: false, success: (res) => { if (res.confirm) { log(res) } } }) }})export default 大方的芒果复制代码 四.总结 之前在响应拦截器中设置的根据后端返回cookie过期信息后更新cookie的代码并没有删除，一切为了防止意外情况的发生。
总的来讲就我们目前的需求来讲，整套下来覆盖的已经比较全面了，如果你正在做mpvue项目的小程序并且准备采用同样的策略，那么这个拦截器据对适合你，代码稍作修改即可～如果你在做小程序之外的其他种类的项目，或者用其他框架开发的小程序，那也无所谓，因为不管框架/项目如何变，思想总是可以通用的，你同样可以在这边文章里找到你想要的！但是呢，如果有用的话，千万不能只ctrl+c/ctrl+v，一定要做到真正理解其实现原理，这样我们才能自己写出更好更优解的代码来！
如果有发现问题的话，欢迎指正！如果有更优解的话，也欢迎讨论！非常感谢！