我是服务工作者的新手。我正在接受Udacity提供的移动网络专家培训,我正在使用google-chrome。 我想从网络获取响应,如果它返回404作为状态,我也会从网络获取另一个响应。 这是仅从网络获取一次的代码。这段代码完美无缺:
self.addEventListener('fetch', function(event) {
event.respondWith(
fetch(event.request).then(function(response) {
if (response.status === 404) {
return new Response("Whoops, not found");
}
return response;
}).catch(function() {
return new Response("Uh oh, that totally failed!");
})
);
});
我通过在获取response.status === 404
后抛出错误并在try/catch
中以相同方式管理错误来对此代码进行了一些更新。更新后的代码如下:
self.addEventListener('fetch', function(event) {
try {
event.respondWith(
fetch(event.request).then(function(response) {
if (response.status === 404) {
throw (Error);
}
return response;
}).catch(function() {
return new Response("Uh oh, that totally failed!");
})
);
} catch (Error) {
event.respondWith(
fetch('/imgs/dr-evil.gif').then(function(response) {
if (response.status === 404) {
return new Response('couldn\'t fetch twice');
}
return response;
}).catch(function() {
return new Response("Uh oh, that totally failed twice!");
})
);
}
});
我知道有一种更好的方法可以使用服务工作者进行嵌套提取,但我想知道我在这里做错了什么。
答案 0 :(得分:1)
我没有这样做,所以它可能需要一些调整,但尝试这样的事情。您当前代码的问题是第一个获取承诺链始终解析为Response。在第一个then
或第一个catch
中,您返回"Uh oh, that totally failed!"
的回复。 event.respondWith
接受了这种回应并愉快地继续这样做。
外部try/catch
存在于同步空间中,当fetch启动异步链时,因此代码无法访问外部catch,因为它不在fetch的执行上下文中。
如果服务工作者和async / await的兼容性相同(我不知道),您可能需要查看它,因为这将是一种更友好的方式来构建代码。
self.addEventListener('fetch', function(event) {
event.respondWith(
fetch(event.request).then(function(response) {
if (response.status === 404) {
throw (Error);
}
return response;
}).catch(function() {
return fetch('/imgs/dr-evil.gif').then(function(response) {
if (response.status === 404) {
throw (Error);
}
return response;
})
}).catch(function() {
return new Response("Uh oh, that totally failed twice!");
})
);
});