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、請求結果示例