我很难全神贯注于我尝试实现的这种模式,所以我希望堆栈溢出社区可以帮助我解决这个问题。
目前,我使用redux-thunk
和superagent
来处理对我的API的调用,并将其全部与redux同步
一个例子看起来像
export const getUser = (id) => {
return (dispatch) => {
const deferred = new Promise((resolve, reject) => {
const call = () => {
API.get(`/users/${id}`)
.then((response) => response.body)
.then((response) => {
if (response.message === 'User found') {
serializeUser(response.data).then((response) => {
resolve(response);
});
} else {
reject('not found');
}
}).catch((err) => {
handleCatch(err, dispatch).then(call).catch(reject)
});
}
call()
});
return deferred;
};
};
在服务器返回200和一些数据的情况下,我继续将数据放入存储区并呈现到页面或我的应用程序执行的任何操作。
在遇到错误的情况下,我试图编写一个函数来拦截这些错误并确定该错误是否应该在页面上显示错误,或者在我们的API中为401的情况下,尝试刷新令牌,然后尝试回想一下方法...
import { refreshToken } from '../actions/authentication';
export default (err, dispatch) => {
const deferred = new Promise((resolve, reject) => {
if (err.status === 401) {
dispatch(refreshToken()).then(resolve).catch(reject)
} else {
reject(err);
}
})
return deferred;
};
这有效,但是,我必须将其添加到每个呼叫中,并且它不考虑并发呼叫,如果正在进行刷新,则不应尝试同时呼叫。
我在有关此主题的研究中看到了一些可能redux-saga
可以起作用的东西,但是我无法将自己的脑袋围绕在如何实现这项工作上
基本上,我需要一个队列,我所有的API请求都会进入该队列,并且可能会被去抖动,因此所有并发请求都将被推送到末尾,并且一旦超时结束,当第一个调用被获取时,这些调用将堆积起来a 401会暂停队列,直到令牌刷新成功返回(在这种情况下继续队列)或失败(在这种情况下将取消队列中所有将来的请求并将用户发送回登录页面)>
我要担心的是,如果堆栈中的第一个调用花费很长时间,那么我不希望其他调用不得不等待很长时间,因为这会增加对加载的感知时间。用户
是否有更好的方法来处理令牌更新?