为什么我的本地存储仅在刷新页面时应用更改？

Question

当我的axios.interceptors.response.use(function (error){...})读取状态401时，它会调用函数getToken()来获取新的访问令牌并将其保存在本地存储中。然后，此新的访问令牌将替换本地存储中的旧令牌。问题是，当从本地存储中获取访问令牌时，它获取的是本地存储中的旧访问令牌而不是新的访问令牌（我觉得这很奇怪，因为旧的访问令牌不应该再存在了）。这些更改仅在刷新整个页面时适用-这并不理想。有人可以解释为什么会这样吗？我在这里做错什么了吗？

我有以下代码：

function requestToken() { // where I get the new access token
    var data = {...};
    return new Promise((resolve, reject) => {
        axios.post('/refresh', data)
          .then((response) => {
            resolve(response)
        }).catch((error) => {
            reject(error);
        });
    });
}

axios.interceptors.request.use(function (config) {
    const token = JSON.parse(window.localStorage.getItem('accessToken')) || '';

    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }

  return config;
});

axios.interceptors.response.use(function (error) {
    switch (error.response.status) {
        case 401: // where I set the new access token
            requestToken().then(data=>{
                var newToken = JSON.parse(window.localStorage.getItem('accessToken')) || '';
                newToken= data.access_token;
                localStorage.setItem('accessToken', JSON.stringify(newToken));
            }); 
            break;
        case 404:
            window.location = '/error/404';
            break;
        default:
            window.location = '/';

    }

    return Promise.reject(error);
});

我希望我的应用在调用requestToken（）之后能够获取更新的访问令牌，而不要获取本地存储中已不存在的旧访问令牌。