Vue2常用功能日常总结(1) - 在Http请求的URL上拼接随机值参数【时间戳或Hash值】

在Http请求的URL上拼接随机值参数，Http的URL会由于随机值参数的不同而每次都会有所不同，从而使得此请求每次被调用时都会被重新创建和重发， 而不会在被发送后即缓存下来。

因此这种方式可以保证每一次发起的Http请求都是一个最新的且不同于之前任何请求的请求，从而避免了浏览器对该请求URL的缓存，以及Web服务器对后台服务器请求响应的缓存。

这个随机值参数的随机值可以有多种生成方式，比如哈希值，随机字符串，时间戳等等，但这里面只有时间戳在现行世界规则或约定下不会出现重复值以外，其他方式都不能保证不出现相同的值，故，用时间戳来做这个随机值是一种比较好的方案。

1、在 axios自定义实例中 添加请求拦截器时 增加相关配置

1.1 自定义axios实例

// 创建一个axios实例
const service = axios.create({
  baseURL: IS_PROD ? systemConfig.BASE_API : '/pro',
  timeout: 60000 // 请求超时，60秒
})

1.2 在axios自定义实例中 添加请求拦截器时 增加相关配置

// 添加请求拦截器
service.interceptors.request.use(
  config => {
    config.isAddTimestamp = config.isAddTimestamp === false ? false : true // url是否拼接时间戳，有些请求url上不能添加随机值【时间戳】
    // 在发送请求之前其他处理
    return config
  },
  error => {
    clearReqNumAndLoading(error)
    // 请求错误处理
    return Promise.reject(error)
  }
)

1.3 部分请求url上不能添加随机值参数，如：文件流模式 的文件下载或导出

import request from '@/http/request'
export default {
  exportErrorInfo(data) {
    return request({
      url: '/exportErrorInfo/xxxxxxExportErrorInfo',
      method: 'post',
      isDown: true,
      isAddTimestamp: false,
      responseType: 'blob',
      data
    })
  }
}

2、时间戳拼接

时间戳应当是一种比较好的随机值生成方案，不管是用Hash值，还是随机字符串都可能随机出相同的值，而时间戳在现行的世界规则或约定下是无法随机出重复值的。

if (config.isAddTimestamp) {
  let url = config.url
  if (url.indexOf('?') !== -1) {  // 判定http url上是否存在'?'(即是否存在参数，一般get请求url上都拼接有参数)
    config.url = url + '&t_s=' + new Date().getTime() // 请求后添加时间戳，保证每次请求都是最新请求
  } else {
    config.url = url + '?t_s=' + new Date().getTime() // 请求后添加时间戳，保证每次请求都是最新请求
  }
}

3、请求结果示例

Vue2全家桶

相关

标签