如何在Vue拦截器中使用await？问题排查与需求说明

一、先搞定第一段代码的问题 #

你第一段代码打不出值，主要是俩问题：

1. 语法错了：JS里根本没有final这个声明变量的关键字，得换成const或者let。
2. 异步流程没处理对：拦截器用了async函数的话，得等异步操作做完再调用next()（要是你的拦截器需要把请求继续传下去的话），不然可能异步逻辑还没跑完，拦截器就直接结束了。

修正后的代码：

http.interceptors.push(async (req, next) => {
  // 把final换成const/let
  const value = await someAsyncFunction();
  console.log(value);
  // 必须调用next()，请求才能继续往下走
  next();
});

二、让后续代码同步执行 #

要是想让executeSomethingElse()等someAsyncFunction()做完再跑，直接在await后面写就行，不用搞then那套：

http.interceptors.push(async (req, next) => {
  const value = await someAsyncFunction();
  console.log(value);
  // 这会儿异步操作已经完成了，下面的代码会按顺序执行
  executeSomethingElse();
  next();
});

额外提醒 #

• 得确保someAsyncFunction()确实返回Promise，await只认Promise对象。要是这个函数不是异步的，或者没返回Promise，await根本起不了作用。
• 不同的Vue HTTP库（比如axios、vue-resource）拦截器写法可能有点不一样，但异步处理的逻辑是相通的——用async/await的时候，一定要等异步操作完了再执行后续逻辑或者调用next。

内容的提问来源于stack exchange，提问作者Arizona1911