- 读完本文大约需要5分钟
- 本文前置知识：HTTP状态码、fetch
- 阅读难度：初级
- 本文关键代码及输出结果都写了出来，可以不用编译器编译，直接浏览文章
事情发生在昨天，在调用接口的时候，接口写错了:
/xxx/interventionlist 写成了 /xxx/Interventionlist
果不其然红一片，点开network后，找到调用的接口 ⬇️
这里的302是对404处理后的结果，将所有出现404的结果跳转到一个指定的404页面。 不过这种跳转应该发生在访问页面时，而不是在调用接口传参交互时。
因此我决定对这种出现302的错误进行一个封装，在亲自踩过坑后，这篇文章诞生了！
重定向时无法直接捕获状态码
最开始我尝试直接做个 checkStatus() 来处理这种问题，当response.status === 302 时console.log出来
...
function checkStatus(response) {
console.log(response) // 注1
// 尝试对302的捕获
if (response.status === 302) {
console.log(response) // 注2
}
if (response.status >= 200 && response.status < 300) {
return response;
}
const error = new Error(response.statusText);
error.response = response;
throw error;
}
...
// url为调用的接口地址，options为fetch的配置
fetch(url, options)
.then(checkStatus)
.then(...)
结果啥都没输出，注1、注2的console.log都没有输出内容
我们梳理一下请求的流程
fetch 发送请求 -->
服务器返回 response 并且带有状态码(比如200) -->
浏览器接收到响应，结果递交给fetch -->
我们从fetch的回调函数获取相应数据 ✅
而 重定向 时的过程应该这样：
fetch 发送请求 -->
服务器返回 response(带有location) 并且带有状态码302 -->
浏览器接收到响应，通过location进行跳转 -->
服务器返回 response 并且带有状态码(比如200) -->
...
这就是为什么我们拿不到response的原因
那么结论一目了然：
重定向时无法直接捕获状态码
解决方案
方案A： fetch配置redirect
fetch的options配置里有一条叫做redirect
redirect:
- follow 默认,跟随跳转
- error 阻止并抛出异常
- manual 阻止重定向 (并不是像它的名字描述的那样「手动」)
error
fetch('/xxx/Interventionlist', { redirect: 'error' })
.catch(reason => {
console.error(reason);
});
在出现重定向时，我们会获得一个额外的信息 ⬇️
manual
fetch('/xxx/Interventionlist', { redirect: 'manual' })
.then(reason => {
console.log(reason);
});
设置manual后不会抛出异常，但会获取到一个被过滤过后的response，里面几乎所有内容都被过滤掉了。
拿到这个响应只能知道这是一个重定向，无法得到其它任何有用的信息 ⬇️
通过这种方法只能知道发生了重定向，但是无法获取到具体的信息。
但是我们已经能判断发生了重定向，并且输出自己需要的东西方便排错
我并不知道这是出于什么安全因素考虑的会过滤掉 response 中的信息，如果有了解的希望能在评论里探讨一下
这种方式目前是我所知的唯一 纯前端 能判断发生重定向的方法
方案B： 后端改写状态码，前端手动处理
目前的302是对404的改写，那么如果我们将404改写成自定义状态码，然后前端捕获到这个状态码后，进行手动处理。
这种方法则需要前后端的同学都做处理。
