# image_cache

**Repository Path**: lan-jason/image_cache

## Basic Information

- **Project Name**: image_cache
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-09-22
- **Last Updated**: 2024-09-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

```js
const fs = wx.getFileSystemManager() // 获取文件系统管理器，允许对文件系统进行操作
let downloadingImages = {} // 用于存储正在下载的图片，避免同一图片被多次重复下载

// 异步函数：获取缓存的图片路径或下载图片
export async function getCacheImage(imageUrl) {
  // 从本地存储中读取缓存的图片信息
  const imageCache = wx.getStorageSync('imageCache') || []
  // 查找当前图片是否已经存在于缓存中
  const cachedItem = imageCache.find(item => item.webUrl === imageUrl)

  if (cachedItem) {
    try {
      // 使用文件系统检查缓存的图片文件是否存在于本地
      fs.accessSync(cachedItem.cacheUrl)
      return cachedItem.cacheUrl // 如果文件存在，直接返回本地缓存的路径
    } catch (e) {
      // 如果文件不存在或发生错误，移除该缓存记录
      removeCache(imageCache, imageUrl)
    }
  }

  // 如果没有缓存或者缓存失效，重新下载图片
  return downloadImage(imageUrl)
}

// 函数：移除缓存中的图片记录
function removeCache(imageCache, imageUrl) {
  // 找到缓存中图片对应的索引
  const index = imageCache.findIndex(item => item.webUrl === imageUrl)
  if (index > -1) {
    // 如果找到了对应索引，移除该缓存记录
    imageCache.splice(index, 1)
    // 更新本地存储的缓存数据
    wx.setStorageSync('imageCache', imageCache)
  }
}

// 函数：下载图片并缓存
function downloadImage(imageUrl) {
  // 如果该图片已经在下载中，避免重复下载
  if (downloadingImages[imageUrl]) {
    // 如果有其他请求在等待这张图片下载，返回一个新的 Promise，将回调存储起来
    return new Promise(resolve => {
      downloadingImages[imageUrl].push(resolve)
    })
  }

  // 初始化下载队列，用来存储所有等待该图片下载的回调函数
  downloadingImages[imageUrl] = []

  // 返回一个新的 Promise，处理图片下载的异步操作
  return new Promise((resolve, reject) => {
    // 调用微信的下载接口，开始下载图片
    wx.downloadFile({
      url: imageUrl, // 要下载的图片 URL
      success(res) {
        if (res.statusCode === 200) {
          // 如果下载成功，获取临时文件路径
          const filePath = res.tempFilePath
          // 将图片缓存到本地
          updateCache(imageUrl, filePath)

          // 通知所有等待这张图片的回调函数，并传递下载好的本地文件路径
          downloadingImages[imageUrl].forEach(r => {
            r(filePath) // 触发回调，返回文件路径
          })
          // 清除下载队列
          delete downloadingImages[imageUrl]
          // 解析 Promise，返回文件路径
          resolve(filePath)
        } else {
          // 如果下载失败，返回错误信息
          reject(`下载失败，状态码: ${res.statusCode}`)
        }
      },
      fail(err) {
        // 如果下载失败，通知等待的请求，并返回原始图片 URL
        downloadingImages[imageUrl].forEach(r => r(imageUrl)) // 失败时返回原始 URL
        // 清除下载队列
        delete downloadingImages[imageUrl]
        // 解析 Promise 失败，返回错误
        reject(err)
      },
    })
  })
}

// 函数：更新本地缓存数据
function updateCache(imageUrl, filePath) {
  // 读取当前缓存中的图片信息
  const imageCache = wx.getStorageSync('imageCache') || []
  // 创建一个新的缓存项，包括图片的原始 URL 和本地文件路径
  const newCacheItem = {
    webUrl: imageUrl, // 原始图片 URL
    cacheUrl: filePath, // 下载后的本地路径
  }
  // 将新的缓存项添加到缓存数组中
  imageCache.push(newCacheItem)
  // 更新本地存储的缓存数据
  wx.setStorageSync('imageCache', imageCache)
}
```