vue axios不缓存get请求(防止返回304不更新数据)

lykops 发布于2019-08-26 13:32 / 3009人阅读

摘要：最近做项目遇到一款浏览器，由于缓存了请求，导致不管如何刷新，数据都不更新的问题。以下分享一下解决办法解决思路就是给每一条请求增加一个的参数，为时间戳但是我们又不想每次请求都加上，所以希望全局配置。

最近做项目遇到一款浏览器，由于缓存了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不返回数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109016.html

vue axios不缓存get请求(防止返回304不更新数据)

摘要：最近做项目遇到一款浏览器，由于缓存了请求，导致不管如何刷新，数据都不更新的问题。以下分享一下解决办法解决思路就是给每一条请求增加一个的参数，为时间戳但是我们又不想每次请求都加上，所以希望全局配置。最近做项目遇到一款浏览器，由于缓存了get请求，导致不管如何刷新，数据都不更新的问题。以下分享一下解决办法:解决思路就是给每一条get请求增加一个timestamp的参数，value为时间戳...

jayzou 2019-08-02 14:28 评论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