vue项目中不能等待axios请求完成之后返回Promise对象问题(异步请求同步问题,aysnc、await对axios无效)

问题遇到的现象和发生背景

本人想要的是一段程序代码等待axios请求完成之后返回该请求对象,但是目前是该段程序并没有等待axios请求完成就已经返回

问题相关代码,请勿粘贴截图

包含请求的代码如下:

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, async function (error) {
  // 对响应错误做点什么
  if (error.response.status == 401) {
    //这里是代表Token出错
    console.log(error.config);

    await instance({
      url: 'api/user/user-refresh-token',
      method: 'get',
      headers: {
        Authorization: ' Bearer ' + store.state.tokenObj,
        "X-Authorization": ' Bearer ' + store.state.refreshToken
      }
    }).then(res => {

    }).catch(async err => {
      try {
        store.commit('setToken', err.response.headers["access-token"])
        store.commit('setRefreshToken', err.response.headers["x-access-token"])
        error.response.config.headers.Authorization = err.response.headers["access-token"]
        //error.response.config是一个包含上次请求信息的对象
        //在这里返回会被.then接收,而不是被.catch捕获
        return await axios(error.response.config)
          
      }
      catch (error) {
        Message.error('身份凭证已过期,请重新登录!');
        router.push("/login");
      }
    })
  } else {
    Message.error('出错了');
    router.push("/login");
    return Promise.reject(error);
  }
});

发送请求的封装函数代码如下:

//获取所有用户
  getUsers({ commit }, data) {
    return new Promise(async(resolve, reject) => {
      await getUsers(data.pageindex, data.pagesize).then(response => {
        console.log(response);
        const { data } = response
        if (!data) {
          return reject('获取失败')
        }
        resolve(data)
      }).catch(error => {
        reject("获取失败!")
      })
    })
  }
运行结果及报错内容

后端刷新Token的接口状态码是401,因此需要在异常中进行获取,当运行至需要刷新Token时控制台会报如下错误:

img


可以看到获取到的responseundefined,因此造成无法正常绑定重发请求获取到的数据,但是重发的请求已经发送,并且能够返回数据,截图如下:

img

我的解答思路和尝试过的方法

我尝试使用async、await进行同步,但是并不能解决,代码如上所示

我想要达到的结果

我想要的效果即是该程序能够等待axios请求完成之后再返回,或者在获取用户函数那里能够接收到重发的请求对象。感谢各位。

img

await 和 then 貌似不能同时用。