客户端刷新token.png客户端需要不定期更新token,同时得保证在发送更新token同时其他网络请求挂起,否则会报token失效。待新token回来之后,重新发起挂起的请求。
应服务端要求,更新token请求时,老token立刻失效
<a name="markdown-callApi"></a>模拟网络请求封装(模拟)
let token = 1 当前请求使用的token
let refreshToken = false // 是否处于更新token中
let subscribers = []; // 挂起的请求数组
/**
* 网络请求入口
*/
function callApi (data, time = 1000) {
console.log('0000callApi=== type:' + data.type + ' token:' + token)
if (refreshToken) {
const retryOriginalRequest = new Promise((resolve) => {
addSubscriber(()=> {
resolve(request(time, data.type))
})
});
return retryOriginalRequest;
}
// 判断是否是执行更新token
if (data && (data.type == 'refreshToken')) {
const newData = request(time, data.type)
refreshToken = true
return newData
}
return request(time, data.type)
}
/**
* 执行网络请求
*/
function request(ms, type) {
console.log('1111request=== type:' + type + ' token:' + token)
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, type);
});
}
/**
* token更新后,重新发起挂起的请求
*/
function onAccessTokenFetched() {
subscribers.forEach((callback)=>{
console.log('重新请求')
callback();
})
refreshToken = false
subscribers = [];
}
/**
* push挂起的请求
* @param callback 挂起的请求
*/
function addSubscriber(callback) {
subscribers.push(callback)
}
<a name="markdown-use"></a>使用演示:
// before
callApi({type: 'first', token}, 1000).then(consoleResponse)
// Todo
callApi({type: 'refreshToken', token}, 2000).then((v) => {
token = 2
onAccessTokenFetched()
consoleResponse(v)
})
// doing
callApi({type: 'second', token}, 2000).then(consoleResponse)
callApi({type: 'third', token}, 2000).then(consoleResponse)
callApi({type: 'four', token}, 2000).then(consoleResponse)
callApi({type: 'five', token}, 2000).then(consoleResponse)
// after
setTimeout(() => callApi({type: 'six', token}, 2000).then(consoleResponse), 5000)
function consoleResponse (v) {
console.log('2222response===type:' + v + ' token:' + token)
}
<a name="markdown-log"></a>结果打印
"0000callApi=== type:first token:1"
"1111request=== type:first token:1"
"0000callApi=== type:refreshToken token:1"
"1111request=== type:refreshToken token:1"
"0000callApi=== type:second token:1"
"0000callApi=== type:third token:1"
"0000callApi=== type:four token:1"
"0000callApi=== type:five token:1"
"2222response===type:first token:1"
"重新请求"
"1111request=== type:second token:2"
"重新请求"
"1111request=== type:third token:2"
"重新请求"
"1111request=== type:four token:2"
"重新请求"
"1111request=== type:five token:2"
"2222response===type:refreshToken token:2"
"2222response===type:second token:2"
"2222response===type:third token:2"
"2222response===type:four token:2"
"2222response===type:five token:2"
"0000callApi=== type:six token:2"
"1111request=== type:six token:2"
"2222response===type:six token:2"
<a name="markdown-end"></a>小结
- 本案例主要是模拟流程,算是对这次改造封装网络请求的思路,不对地方各位大神多多指点
- 真正用于网络请求的过程中,<font color=red>需要对请求超时和请求出错的处理</font>,超时和出错都需要重置更新token标识,重起发起挂起的网络请求
网友评论