英文：Sean 译文：众成翻译/涯丨角
https://zcfy.cc/article/what-will-happen-when-fetch-meets-a-302-status-code
昨天，我正在把SSO整合到项目中。起初，在用户未登录的时候，后端会返回302状态码，浏览器根据响应头的设置跳转到SSO页面。重定向到正确的登录页面来让用户登录，这似乎并没有什么问题。然而，当我需要用fetch从后端请求一些数据的时候，请求会失败并且重定向并没有发生。
所以，第一个问题是:
当fetch遇到302状态码，会发生什么?
我仅仅用koa写了一个小例子来测试fetch的302状态码。在后端，当接口 /bait 接受一个请求，会设置一个302状态码并且在响应头中增加重定向的位置信息：/gotcha。代码如下：
const
app
=
new
Koa
(
)
;
const
bait
=
ctx
=
>
{
ctx
.
response
.
redirect
(
'/gotcha'
)
;
const
gotcha
=
ctx
=
>
{
ctx
.
response
.
type
=
'json'
;
ctx
.
response
.
body
=
{
data
:
'Gotcha!'
}
;
app
.
use
(
route
.
get
(
'/gotcha'
,
gotcha
)
)
;
app
.
use
(
route
.
get
(
'/bait'
,
bait
)
)
;
现在，如果我向 /bait 发起一个请求，/gotcha 会返回响应信息:
检查网络请求发现，第一个请求 /bait 返回了302，然后发起了第二个请求 /gotcha：
所以302是透明的：我们发起请求，后端返回302，然后浏览器会帮助重定向到新的接口，并返回最终的数据。这里的“透明”指，我们可以查看被重定向的接口以及最终返回数据的接口。
这些代码可以在我的 github 上查看，你可以克隆这个仓库并运行这些代码。
下个问题是:
处理这些需要认证的接口最好的方法是什么?
虽然fetch不能拦截302状态码，但是它可以处理401和403状态码。所以可以让接口返回401，响应如下:
"status"
:
"unauthorized"
,
"sso_url"
:
"http://sso.somecompany.com/somewhere"
在前端，代码像下面这样:
fetch
(
'http://www.somecompany.com/someapi'
)
.
then
(
response
=
>
{
if
(
response
.
ok
)
{
// process the data
}
else
if
(
response
.
status
==
401
)
{
// something bad happened...
// do something like throwing an Error, or making a jump
}
else
{
// some other status like 400, 403, 500, etc
// take proper actions
.
catch
(
error
=
>
{
// do some clean-up job
}
)
;
在大多数情况下，上面提到的 fetch 样例代码会在多个地方使用，不可能要求每一个人都做检查。所以将 fetch 进行封装后使用是更好的解决办法。
针对两个问题，总结出两点内容:
-
fetch不能拦截302，浏览器会自动从302响应的头信息的重定向地址中取到数据。
-
针对认证的情况，后端可以返回401状态码，让前端去检查返回的状态码并据此执行相应操作。
（点击标题可跳转阅读）
基于色键技术的纯客户端实时蒙版弹幕
趣图：HTTP 状态码速记表
微信小程序之登录态的探索
觉得本文对你有帮助？请分享给更多人
关注「前端大全」加星标，提升前端技能
喜欢就点一下「好看」呗~
事情
发生
在昨天，在调用接口的时候，接口写错了:
/xxx/interventionlist 写成了 /xxx/Interventionlist
果不其然红一片，点开network后，找到调用的接口 ⬇️
这里的
302
是对404处理后的结果...
1.基本使用
Fetch
是一个新的端获取资源的接口，用于替换笨重繁琐XMLHttpRequest.它有了Request 和 Response 以及Headers对象的概念，与后端语言请求资源更接近。
一个简单的GET请求
fetch
('https://www.baidu.com')
.then(resp=>resp.text()) // 转换成文本对象
.then(resp=>console.log(resp)) // 输出请求内容
<script>
var result =
fetch
('https://api.github.com') result.then(function(response) {
console.log('response', response)
console.log('header', response.headers.get('Content-Type'))
业务流程: 前端向后端发请求，后端调用第三方接口，第三方接口实现跳转并跳转到登陆页面，登陆页面里面有一个回调地址，也就是登陆成功以后返回到调用该接口的地址。目标是返回到前端首页，并显示用户名。
302
游戏大作战 关卡1 :由于r
Fetch
API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。
它还提供了一个全局
fetch
() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。
这种功能以前是使用 XMLHttpRequest 实现的。
浏览器提供了原生的AJAX实现类XMLHttpRequest，基于该类实例，我们可以实现在网页上发送AJAX请求到服务端。
但是XMLHttpRequest的设计并不完美，主要体现在以下几个方面：
HTTP请求，响应都被耦合在XMLHttpRequest实例上，结构不够简单明了
采用事件回调的方式获取HTTP
