[PWA] 6. Hijacking response

最新推荐文章于 2020-12-04 18:14:48 发布

吃素的小动物

最新推荐文章于 2020-12-04 18:14:48 发布

阅读量73

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/5498410.html

本文介绍了一种在服务器端处理404错误的方法。当URL未匹配到任何API端点时，通过返回自定义的404错误页面或特定图片来处理这种情况。此外，还提供了一个简单的示例代码，用于演示如何使用JavaScript实现这一功能。

For example, if the url is not match to any API endpoint, we want to return 404 error message.

So first thing, we want to send the request to the server first. If got the response, then we just return it back.

self.addEventListener('fetch', (event) => {

    event.respondWith(
        fetch(event.request).then( (response) => {
              // fetch the request frist

              return response;
        })
    )
});

Then we handle 404 error:

self.addEventListener('fetch', (event) => {

    event.respondWith(
        fetch(event.request).then( (response) => {
              if(response.status === 404){
                  return fetch('/img/dr-evil.gif');
              }

              return response;
        }).catch( () => {
             return new Response("Something totally wrong");
        })
    )
});