vue axios不緩存get請求(防止返回304不更新數據)

jayzou 發布于2019-08-02 14:28 / 3793人閱讀

摘要：最近做項目遇到一款瀏覽器，由于緩存了請求，導致不管如何刷新，數據都不更新的問題。以下分享一下解決辦法解決思路就是給每一條請求增加一個的參數，為時間戳但是我們又不想每次請求都加上，所以希望全局配置。

最近做項目遇到一款瀏覽器，由于緩存了get請求，導致不管如何刷新，數據都不更新的問題。
以下分享一下解決辦法:
解決思路就是給每一條get請求增加一個timestamp的參數，value為時間戳
但是我們又不想每次請求都加上，所以希望全局配置。
解決方法在代碼最下方

import axios from "axios"
// import { Spin } from "iview"
import {
  getToken
} from "@/libs/util"
import Vue from "vue"
const vueInstance = new Vue()

class HttpRequest {
  constructor(baseUrl = baseURL) {
    this.baseUrl = baseUrl
    this.queue = {
    }
  }
  getInsideConfig() {
    const config = {
      baseURL: this.baseUrl,
      timeout: 60000,
      headers: {
        Authorization: getToken() || "",
        post: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
        }
      }
    }
    return config
  }
  destroy(url) {
    delete this.queue[url]
  }
  interceptors(instance, url) {
    // 請求攔截
    instance.interceptors.request.use(config => {
      this.queue[url] = true
      return config
    }, error => {
      return Promise.reject(error)
    })
    // 響應攔截
    instance.interceptors.response.use(res => {
      this.destroy(url)
      const {
        data,
        status
      } = res
      if (data.code && data.code !== 200) {
        vueInstance.$Modal.error({
          title: data.code,
          content: data.message || data.error || "系統出錯"
        })
      }
      return {
        data,
        status
      }
    }, error => {
      this.destroy(url)
      return Promise.reject(error)
    })
  }
  request(options) {
    const instance = axios.create()

    if (!options["method"]) { //沒有method的請求為get，判斷為get請求
      if (!options["params"]) { //如果這個請求本身不帶參數
        Object.assign(options, {   //給options這個對象添加一個params的參數，屬性為timestamp,值為時間戳
          params: {
            timestamp: new Date().getTime()
          }
        })
      } else {
        Object.assign(options.params, { //如果get請求本身帶有參數，給options.params 再添加一個key值timestamp,值為時間戳
          timestamp: new Date().getTime()
        })
      }
    }
    options = Object.assign(this.getInsideConfig(), options)
    this.interceptors(instance, options.url)
    return instance(options)
  }
}
export default HttpRequest //返回HttpRequest對象

由于時間倉促，這段代碼沒有做太多優化，只給大家提供思路。

云服務器 GPU云服務器 js get請求返回數據 js get請求返回數據格式服務器返回get請求 js不返回數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53828.html

vue axios不緩存get請求(防止返回304不更新數據)

摘要：最近做項目遇到一款瀏覽器，由于緩存了請求，導致不管如何刷新，數據都不更新的問題。以下分享一下解決辦法解決思路就是給每一條請求增加一個的參數，為時間戳但是我們又不想每次請求都加上，所以希望全局配置。最近做項目遇到一款瀏覽器，由于緩存了get請求，導致不管如何刷新，數據都不更新的問題。以下分享一下解決辦法:解決思路就是給每一條get請求增加一個timestamp的參數，value為時間戳...

lykops 2019-08-26 13:32 評論0 收藏0
騰訊一面（2019前端實習崗）

摘要：前言之前投遞了騰訊的實習生前端崗，一直沒有電話，查了下狀態說不合適，以為涼涼了，今天卻收到了電話，出乎意料然后就開始了一面，一開始面試官說時間不會太久，大概分鐘吧，結果整個過程也就持續了分鐘吧。前言之前投遞了騰訊的實習生前端崗，一直沒有電話，查了下狀態說不合適，以為涼涼了，今天卻收到了電話，出乎意料...然后就開始了一面，一開始面試官說時間不會太久，大概30分鐘吧，結果整個過程也就...

jas0n 2019-08-22 15:45 評論0 收藏0
vue axios 簡單封裝以及思考

摘要：先安裝的詳細介紹以及用法就不多說了請移步下面是簡單的封裝一個，在此說明這個方法呢是不一定需要的，根據個人的項目需求吧，也可以直接返回，交給后面另行處理也行。或者根據后端返回的狀態，在里面進行處理也行。先安裝 axios npm install axios axios的詳細介紹以及用法就不多說了請移步 github ??? https://github.com/axios/axios ...

phoenixsky 2019-04-23 13:19 評論0 收藏0
我的前端進階之路

摘要：事件模型事件捕獲階段。事件到達目標元素觸發目標元素的監聽函數。的狀態值與狀態碼的狀態值未初始化還沒有調用方法。載入完成已經執行完成，已經接收到全部的響應內容。前言總括：包含這三個月來碰到的一些覺得比較好的面試題，三個月沒怎么寫博客著實有些手癢，哈哈哈。7000余字，不成敬意2333 原文地址：我的前端進階之路知乎專欄&&簡書專題：前端進擊者（知乎）&&前端進擊者（簡書）博主...

cloud 2019-08-29 12:36 評論0 收藏0