如何使用拦截器取消web请求

Question

我有一段代码，试图在其中进行真实世界的模拟。在这个例子中，我想模拟一下，如果并且仅如果localstorage中有一个密钥为"token"的token，我想发出web请求。问题是它执行了我目前正在运行的大量web请求。

const getData = async () => {
const data = await instance.get("todos/1");
setData(data.data);
await instance.get("todos/2");
await instance.get("todos/3");
};
.
.
.
instance.interceptors.request.use(async (req) => {
token = localStorage.getItem("token") || null;
console.log(req.url);
if (!token) {
console.log("not exist token");
//cancel request because token not exists
return req;
} else {
console.log("token exist");
req.headers.Authorization = `Bearer ${token}`;
return req;
}
});

我的想法是，当localstorage中没有令牌时，取消或不执行web请求，如果有，我想在headers中发送token。

我该怎么做？

这是我的实时代码

Answer 1

axios中有一个用于取消请求的apihttps://github.com/axios/axios#cancellation

const cancelSource = axios.CancelToken.source();
const instance = axios.create({
cancelToken: cancelSource.token,
timeout: 1000 * 10,
});
instance.interceptors.request.use((req) => {
if (condition) {
cancelSource.cancel('No Authorization Token')
}
return req
})

但是，有一种更简单的方法可以中止请求。只要在拦截器中抛出一个错误。

instance.interceptors.request.use((req) => {
if (condition) {
throw new Error('No Authorization Token')
}
return req
})

两种方式中的任何一种都会抛出Promise Error。我推荐后一种，抛出错误。