PWA 中 Service Worker 发送请求如何进行错误处理？-JavaScript中文网-JavaScript教程资源分享门户

在 PWA（Progressive Web App）中，Service Worker 可以使网页具有离线缓存、推送通知等功能，这对于提升用户体验非常重要。但是在 Service Worker 发送请求时，可能会出现网络错误、超时等异常情况，这时我们需要对这些错误进行处理，以保证网页能够正常运行。

Service Worker 发送请求的方式

Service Worker 可以通过 fetch 方法发送网络请求，例如：

// javascriptcn.com 代码示例
self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request)
      .then(response => {
        // 处理响应数据
      })
      .catch(error => {
        // 处理异常情况
      })
  )
})

fetch 方法会返回一个 Promise 对象，我们可以在 then 方法中处理响应数据，在 catch 方法中处理异常情况。但是这样处理异常情况可能会有一些问题，例如：

如果网络请求超时，我们可能需要重试请求；
如果网络请求失败，我们可能需要使用缓存数据；
如果请求的资源不存在，我们可能需要返回一个 404 页面。

针对这些问题，我们需要对 Service Worker 的请求进行更加细致的错误处理。

Service Worker 请求的错误处理

1. 网络请求超时处理

网络请求超时可能是由于网络不稳定、服务器繁忙等原因引起的，如果我们直接在 catch 方法中处理超时错误，可能会导致请求失败而不是重试请求。因此，我们可以使用 Promise.race 方法来设置请求超时时间，例如：

// javascriptcn.com 代码示例
function timeout(ms, promise) {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => {
      reject(new Error('timeout'))
    }, ms)
    promise.then(result => {
      clearTimeout(timer)
      resolve(result)
    }, error => {
      clearTimeout(timer)
      reject(error)
    })
  })
}

self.addEventListener('fetch', event => {
  event.respondWith(
    timeout(5000, fetch(event.request))
      .then(response => {
        // 处理响应数据
      })
      .catch(error => {
        if (error.message === 'timeout') {
          // 处理超时错误
        } else {
          // 处理其他错误
        }
      })
  )
})

上面的代码中，我们使用了 timeout 方法来设置请求超时时间为 5 秒，如果请求在超时时间内未返回数据，则会抛出一个超时错误。在 catch 方法中，我们可以根据错误类型来处理超时错误和其他错误。

2. 网络请求失败处理

网络请求失败可能是由于网络故障、服务器宕机、DNS 解析失败等原因引起的，如果我们直接在 catch 方法中处理失败错误，可能会导致请求失败而不是使用缓存数据。因此，我们需要使用 catch 方法来处理网络请求失败，例如：

// javascriptcn.com 代码示例
self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request)
      .then(response => {
        // 处理响应数据
      })
      .catch(error => {
        return caches.match(event.request)
          .then(cacheResponse => {
            if (cacheResponse) {
              // 使用缓存数据
            } else {
              // 处理请求失败错误
            }
          })
      })
  )
})

上面的代码中，我们在 catch 方法中使用了 caches.match 方法来查找缓存数据，如果存在缓存数据，则使用缓存数据，否则处理请求失败错误。

3. 请求的资源不存在处理

请求的资源可能不存在，例如请求一个不存在的文件或网页，这时我们需要返回一个 404 页面。我们可以在 fetch 事件中使用 Response 构造函数来创建一个 404 响应，例如：

// javascriptcn.com 代码示例
self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request)
      .then(response => {
        // 处理响应数据
      })
      .catch(error => {
        return new Response('404 Not Found', {
          status: 404,
          statusText: 'Not Found'
        })
      })
  )
})

上面的代码中，我们在 catch 方法中使用 Response 构造函数来创建一个 404 响应，然后返回这个响应。

总结

在 PWA 中，Service Worker 可以使网页具有离线缓存、推送通知等功能，但是在发送请求时，可能会出现网络错误、超时等异常情况，这时我们需要对这些错误进行处理，以保证网页能够正常运行。针对网络请求超时、网络请求失败、请求的资源不存在等情况，我们可以使用 Promise.race 方法、catch 方法、Response 构造函数等方式来进行错误处理。这些错误处理方式可以帮助我们提高 PWA 的稳定性和用户体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6555e703d2f5e1655d056d4e