【前端】-【防止接口重复请求】

文章目录

需求
实现方案

需求

对整个的项目都做一下接口防止重复请求的处理

实现方案

方案一

思路：通过使用axios拦截器，在请求拦截器中开启全屏Loading，然后在响应拦截器中将Loading关闭。

代码：

问题：在目前项目的接口处理逻辑中还有一些局部Loading，就有可能会出现Loading套Loading的情况

方案二

思路：对于同一个接口，如果传参都是一样的，一般来说都没有必要连续请求多次吧。那我们可以通过代码逻辑直接把完全相同的请求给拦截掉，不让它到达服务端

代码：

如果两个请求的请求方法，地址，参数以及请求发出的页面hash（如果是history路由，可以将pathname加入生成key）都一样，那么可以认为他们是相同请求，我们可以根据这几个数据把这个请求生成一个key来作为这个请求的唯一标识

javascript 复制代码

// 根据请求生成对应的key
function generateReqKey(config, hash) {
    const { method, url, params, data } = config;
    return [method, url, JSON.stringify(params), JSON.stringify(data), hash].join("&");
}

有了请求的key，我们就可以在请求拦截器中把每次发起的请求给收集起来，后续如果有相同请求进来，那都去这个集合中去比对，如果已经存在了，说明就是一个重复的请求，我们就给拦截掉。当请求完成响应后，再将这个请求从集合中移除。

缺点：假如项目中会有一些数据字典型的接口，这些接口由不同页面调用，如果第一个页面请求的字典接口比较慢，第二个页面的接口就被拦截了，最后就会导致第二个页面逻辑错误。虽然我们生成key的时候加入了hash（不会存在不同页面调用相同数据字典型接口，后面的请求被拦截的情况），但如果我这两个请求是来自同一个页面呢？比如，一个页面同时加载两个组件，而这两个组件都需要调用某个接口时：

那么此时，后调接口的组件就无法拿到正确数据了

方案三

思路：延续方案二的思路，仍然是拦截相同请求，但这次我们不直接把请求挂掉，而是对于相同的请求我们先给它挂起，等到最先发出去的请求拿到结果回来之后，把成功或失败的结果共享给后面到来的相同请求。

需要注意的是：

在拿到响应结果后，返回给之前我们挂起的请求时，我们要用到发布订阅模式
对于挂起的请求，我们需要将它拦截，不能让它执行正常的请求逻辑，所以一定要在请求拦截器中通过return Promise.reject()来直接中断请求，并做一些特殊的标记，以便于在响应拦截器中进行特殊处理。

javascript 复制代码

import axios from "axios"

let instance = axios.create({
    baseURL: "/api/"
})

// 发布订阅
class EventEmitter {
    constructor() {
        this.event = {}
    }
    on(type, cbres, cbrej) {
        if (!this.event[type]) {
            this.event[type] = [[cbres, cbrej]]
        } else {
            this.event[type].push([cbres, cbrej])
        }
    }

    emit(type, res, ansType) {
        if (!this.event[type]) return
        else {
            this.event[type].forEach(cbArr => {
                if(ansType === 'resolve') {
                    cbArr[0](res)
                }else{
                    cbArr[1](res)
                }
            });
        }
    }
}


// 根据请求生成对应的key
function generateReqKey(config, hash) {
    const { method, url, params, data } = config;
    return [method, url, JSON.stringify(params), JSON.stringify(data), hash].join("&");
}

// 存储已发送但未响应的请求
const pendingRequest = new Set();
// 发布订阅容器
const ev = new EventEmitter()

// 添加请求拦截器
instance.interceptors.request.use(async (config) => {
    let hash = location.hash
    // 生成请求Key
    let reqKey = generateReqKey(config, hash)
    
    if(pendingRequest.has(reqKey)) {
        // 如果是相同请求,在这里将请求挂起，通过发布订阅来为该请求返回结果
        // 这里需注意，拿到结果后，无论成功与否，都需要return Promise.reject()来中断这次请求，否则请求会正常发送至服务器
        let res = null
        try {
            // 接口成功响应
          res = await new Promise((resolve, reject) => {
                    ev.on(reqKey, resolve, reject)
                })
          return Promise.reject({
                    type: 'limiteResSuccess',
                    val: res
                })
        }catch(limitFunErr) {
            // 接口报错
            return Promise.reject({
                        type: 'limiteResError',
                        val: limitFunErr
                    })
        }
    }else{
        // 将请求的key保存在config
        config.pendKey = reqKey
        pendingRequest.add(reqKey)
    }

    return config;
  }, function (error) {
    return Promise.reject(error);
  });

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 将拿到的结果发布给其他相同的接口
    handleSuccessResponse_limit(response)
    return response;
  }, function (error) {
    return handleErrorResponse_limit(error)
  });

// 接口响应成功
function handleSuccessResponse_limit(response) {
      const reqKey = response.config.pendKey
    if(pendingRequest.has(reqKey)) {
      let x = null
      try {
        x = JSON.parse(JSON.stringify(response))
      }catch(e) {
        x = response
      }
      pendingRequest.delete(reqKey)
      ev.emit(reqKey, x, 'resolve')
      delete ev.reqKey
    }
}

// 接口走失败响应
function handleErrorResponse_limit(error) {
    if(error.type && error.type === 'limiteResSuccess') {
      return Promise.resolve(error.val)
    }else if(error.type && error.type === 'limiteResError') {
      return Promise.reject(error.val);
    }else{
      const reqKey = error.config.pendKey
      if(pendingRequest.has(reqKey)) {
        let x = null
        try {
          x = JSON.parse(JSON.stringify(error))
        }catch(e) {
          x = error
        }
        pendingRequest.delete(reqKey)
        ev.emit(reqKey, x, 'reject')
        delete ev.reqKey
      }
    }
      return Promise.reject(error);
}

export default instance;

问题：当上传了两个不同的文件时，只调用了一次上传接口，按理说是两个不同的请求，可为什么会被我们前面写的逻辑给拦截掉一个呢？我们打印一下请求的config：

可以看到，请求体data中的数据是FormData类型，而我们在生成请求key的时候，是通过JSON.stringify方法进行操作的，而对于FormData类型的数据执行该函数得到的只有{}。所以，对于文件上传，尽管我们上传了不同的文件，但它们所发出的请求生成的key都是一样的，这么一来就触发了我们前面的拦截机制。那么我们接下来我们只需要在我们原来的拦截逻辑中判断一下请求体的数据类型即可，如果含有FormData类型的数据，我们就直接放行不再关注这个请求就是了。

javascript 复制代码

function isFileUploadApi(config) {
  return Object.prototype.toString.call(config.data) === "[object FormData]"
}

react直接用swr，ahook

vue用VueRequest