如何正确地使用 Promise 和缓存-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，Promise 和缓存是两个实现异步请求和优化性能的重要工具。然而，如果不正确地使用这两个工具，可能会导致代码不可维护，性能下降甚至出现 Bug。因此，本文将详细介绍 Promise 和缓存的正确用法，并提供示例代码和实用技巧，帮助读者更好地理解和应用这两个工具。

Promise 的使用

Promise 是一种异步编程的解决方案，使用 Promise 可以让异步代码更易于维护和组合。Promise 的基本用法是将异步操作封装成 Promise 对象，在异步操作完成后，Promise 对象的状态会改变，从而触发对应的回调函数。

Promise 三种状态

Promise 对象有三种状态，分别是：

pending：初始状态，既不是成功，也不是失败状态。
fulfilled：操作成功完成，Promise 对象的状态变为 fulfilled，此时会触发 then 方法的回调函数。
rejected：操作失败，Promise 对象的状态变为 rejected，此时会触发 catch 方法的回调函数。

Promise 实例

下面是一个简单的 Promise 实例：

// www.javascriptcn.com code example
const promise = new Promise((resolve, reject) => {
  // 异步操作完成
  const asyncResult = 'Hello, World!'
  if (asyncResult) {
    resolve(asyncResult) // 成功则调用 resolve 函数，并将结果传递给回调函数
  } else {
    reject('Something went wrong') // 失败则调用 reject 函数，并将错误传递给回调函数
  }
})

promise.then(result => {
  console.log(result) // 在异步操作成功后，处理 resolved 状态
}).catch(error => {
  console.log(error) // 在异步操作失败后，处理 rejected 状态
})

上述代码中，Promise 函数接收一个函数参数，该函数参数会在异步操作完成时被调用。该函数中，可以通过调用 resolve 函数，将异步操作的结果传递给回调函数；或者调用 reject 函数，将异步操作的错误信息传递给回调函数。在 Promise 实例中，执行 then 和 catch 方法来处理返回的结果或错误信息。

Promise All 和 Race 的使用

Promise.all() 和 Promise.race() 是 Promise 的两个常用方法，分别可用于并行执行多个异步任务或者选择最先完成的任务。

下面是一段使用 Promise.all() 的示例代码：

// www.javascriptcn.com code example
Promise.all([
  fetch('/api/data1'),
  fetch('/api/data2'),
  fetch('/api/data3')
]).then(responses => {
  return Promise.all(responses.map(res => res.json()))
}).then(data => {
  console.log(data)
}).catch(error => {
  console.log(error)
})

上述代码中， Promise.all() 接收一个 Promise 实例数组作为参数，当所有 Promise 实例都 resolve 后，返回一个 Promise 实例数组。在该示例中，我们同时发起三个异步请求，拿到请求结果后再将每个结果解析为 JSON 数据。

下面是一段使用 Promise.race() 的示例代码：

// www.javascriptcn.com code example
Promise.race([
  fetch('/api/data1'),
  fetch('/api/data2'),
  fetch('/api/data3')
]).then(response => {
  console.log(response.url)
}).catch(error => {
  console.log(error)
})

上述代码中，Promise.race() 接收一个 Promise 实例数组作为参数，当任意一个 Promise 实例 resolve 或 reject 后，就会 resolve 或 reject 对应的 Promise 实例。在该示例中，我们使用 race 方法，从多个异步请求中获取先响应的请求的 URL。

缓存的使用

缓存是一种优化性能的技术，可以减少网络请求的次数和数据传输量，提升用户体验和网站速度。在前端开发中，我们可以将通常会缓存的数据分为两类：静态资源和动态资源。

静态资源缓存

静态资源包括 HTML、CSS、JavaScript、图片和字体等静态文件，这些文件的内容不随用户请求而改变，因此可以进行缓存。将这些文件缓存到本地或浏览器，可以减少页面加载时间和减小服务器负荷。

下面是一个简单的缓存示例代码：

// www.javascriptcn.com code example
const cacheName = 'my-static-cache' // 定义缓存名称
const filesToCache = [ // 需要缓存的静态资源列表
  '/',
  '/styles/main.css',
  '/images/logo.png',
  '/js/main.js'
]

self.addEventListener('install', event => { // 监听 install 事件，进行缓存操作
  event.waitUntil(
    caches.open(cacheName)
      .then(cache => cache.addAll(filesToCache))
      .then(self.skipWaiting())
  )
})

self.addEventListener('fetch', event => { // 监听 fetch 事件，获取缓存内容
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        return response || fetch(event.request)
      })
  )
})

上述代码在页面安装时，将需要缓存的文件列表添加到缓存中。在后续的页面请求中，如果有缓存，就直接使用缓存内容，否则就向服务器请求资源并更新缓存。

动态资源缓存

动态资源包括数据接口和生成内容等动态文件，这些文件的内容会随用户请求而改变，因此不能直接进行缓存。但是，我们可以将动态资源缓存到内存或浏览器缓存中，以减少服务器压力和网络请求次数。

下面是一个简单的动态数据缓存示例代码：

// www.javascriptcn.com code example
const cacheName = 'my-dynamic-cache'
const cacheTime = 60 * 60 // 缓存时间为 1 小时

self.addEventListener('fetch', event => { // 监听 fetch 事件，获取缓存内容或更新缓存
  event.respondWith(
    caches.open(cacheName).then(cache => {
      return cache.match(event.request)
        .then(response => {
          const fetchPromise = fetch(event.request)
            .then(networkResponse => {
              cache.put(event.request, networkResponse.clone())
              return networkResponse
            })

          return response || fetchPromise
        })
    })
  )
})

self.addEventListener('activate', event => { // 监听 activate 事件，删除过期缓存
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(name => {
          if (name.startsWith('my-') && name !== cacheName) {
            return caches.delete(name)
          }
        })
      )
    })
  )
})

上述代码中，我们监听 fetch 事件，对每个数据请求进行缓存。在请求到缓存时，直接返回缓存；如果没有缓存，则将请求结果缓存到内存或浏览器缓存中，并返回结果。此外，在 activate 事件中，我们删除一定时间之前的缓存。

结语

通过以上的介绍，我们可以看到 Promise 和缓存是前端开发中必备的两个工具，它们能够帮助我们优化性能，提升代码可维护性和用户体验。但是，如果不正确地使用这两个工具，可能会导致代码不可维护，性能下降甚至出现 Bug。因此，在使用 Promise 和缓存时，我们要注意它们的用法和限制条件，并遵循相应的最佳实践，以达到更好的效果。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d6b685a941bf7134c901bb

如何正确地使用 Promise 和缓存