使用Promise，map缓存接口数据

1. 首先，导入了 axios 和 qs 库。axios 是一个用于处理 HTTP 请求的库，qs 是一个用于处理查询参数的库。 2. 定义了三个 Map 对象：cacheMap 用于存储缓存的数据；statusMap 用于存储每个请求的缓存状态；callbackMap 用于存储等待状态的请求回调。 3. 定义了一个接口 RequestCallback，用于描述回调函数的格式。 4. 定义了一个接口 MyRequestConfig，继承了 AxiosRequestConfig，并添加了一个可选属性 needCache，用于标识是否需要缓存。 5. 定义了一个函数 generateCacheKey，用于根据请求配置生成缓存的键值。 6. 定义了 sendRequest 函数，用于发送请求。函数内部首先判断是否需要缓存，然后根据缓存状态来处理请求。如果缓存状态是 complete，则直接返回缓存数据；如果缓存状态是 pending，则将回调函数添加到 callbackMap 中等待请求完成。 7. 请求完成后，根据请求结果更新缓存状态，同时触发相应的回调函数。 8. 定义了一个示例 API 函数 getArticleList，用于获取文章列表。这个函数内部调用 sendRequest 函数发送请求，并设置了 needCache 为 true，表示需要缓存。 9. 定义了一个测试函数 testApi，用于测试 getArticleList 函数。在这个函数中，连续调用了两次 getArticleList 函数，由于启用了缓存，第二次调用将直接使用缓存数据，而不会再次发送请求。

import axios, { AxiosRequestConfig } from 'axios'

import qs from 'qs'

// 存储缓存数据

const cacheMap = new Map()

// 存储缓存当前状态

const statusMap = new Map<string, 'pending' | 'complete'>()

// 定义一下回调的格式

interface RequestCallback {

  onSuccess: (data: any) => void

  onError: (error: any) => void

}

// 存放等待状态的请求回调

const callbackMap = new Map<string, RequestCallback[]>()

interface MyRequestConfig extends AxiosRequestConfig {

  needCache?: boolean

}

// 这里用params是因为params是 GET 方式穿的参数，我们的缓存一般都是 GET 接口用的

function generateCacheKey(config: MyRequestConfig) {

  return config.url + '?' + qs.stringify(config.params)

}

export function sendRequest(request: MyRequestConfig) {

  const cacheKey = generateCacheKey(request)

  // 判断是否需要缓存

  if (request.needCache) {

    if (statusMap.has(cacheKey)) {

      const currentStatus = statusMap.get(cacheKey)

      // 判断当前的接口缓存状态，如果是 complete ，则代表缓存完成

      if (currentStatus === 'complete') {

        return Promise.resolve(cacheMap.get(cacheKey))

      }

      // 如果是 pending ，则代表正在请求中，这里放入回调函数

      if (currentStatus === 'pending') {

        return new Promise((resolve, reject) => {

          if (callbackMap.has(cacheKey)) {

            callbackMap.get(cacheKey)!.push({

              onSuccess: resolve,

              onError: reject

            })

          } else {

            callbackMap.set(cacheKey, [

              {

                onSuccess: resolve,

                onError: reject

              }

            ])

          }

        })

      }

    }

    statusMap.set(cacheKey, 'pending')

  }

  return axios(request).then(

    (res) => {

      // 这里简单判断一下，200就算成功了，不管里面的data的code啥的了

      if (res.status === 200) {

        statusMap.set(cacheKey, 'complete')

        cacheMap.set(cacheKey, res)

      } else {

        // 不成功的情况下删掉 statusMap 中的状态，能让下次请求重新请求

        statusMap.delete(cacheKey)

      }

      // 这里触发resolve的回调函数

      if (callbackMap.has(cacheKey)) {

        callbackMap.get(cacheKey)!.forEach((callback) => {

          callback.onSuccess(res)

        })

        // 调用完成之后清掉，用不到了

        callbackMap.delete(cacheKey)

      }

      return res

    },

    (error) => {

      // 不成功的情况下删掉 statusMap 中的状态，能让下次请求重新请求

      statusMap.delete(cacheKey)

      // 这里触发reject的回调函数

      if (callbackMap.has(cacheKey)) {

        callbackMap.get(cacheKey)!.forEach((callback) => {

          callback.onError(error)

        })

        // 调用完成之后也清掉

        callbackMap.delete(cacheKey)

      }

      return Promise.reject(error)

    }

  )

}

const getArticleList = (params: any) =>

  sendRequest({

    needCache: true,

    baseURL: 'http://localhost:8088',

    url: '/article/blogList',

    method: 'get',

    params

  })

export function testApi() {

  getArticleList({

    page: 1,

    pageSize: 10

  }).then(

    (res) => {

      console.log(res)

    },

    (error) => {

      console.error('error1:', error)

    }

  )

  getArticleList({

    page: 1,

    pageSize: 10

  }).then(

    (res) => {

      console.log(res)

    },

    (error) => {

      console.error('error2:', error)

    }

  )

}