VUE axios每次请求添加时间戳问题

问题描述

在使用Vue.js框架中的axios发送请求时，我们可能需要在每次请求的url后加上时间戳，以避免缓存导致的数据不同步问题。这时候，我们可以通过拦截器的方式向请求的url中添加时间戳。

攻略步骤

1. 创建axios实例

在main.js中，我们需要引入axios，并创建一个axios的实例，通过该实例对数据请求进行管理，具体代码如下：

import axios from 'axios';
// 创建axios实例
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  responseType: 'json',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  }
});

export default axiosInstance;

1. 创建请求拦截器

我们需要在请求拦截器中，对每次请求添加时间戳。在axios实例中添加如下代码：

import axios from 'axios';
// 创建axios实例
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  responseType: 'json',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  }
});

// 添加请求拦截器
axiosInstance.interceptors.request.use(config => {
  // 在请求url上添加时间戳
  config.url += ((/\?/).test(config.url) ? '&' : '?') + '_=' + Date.now();
  return config;
}, error => {
  return Promise.reject(error);
});

export default axiosInstance;

在该代码中，我们在请求的config.url上添加了时间戳，确保每次请求都是不同的url。需要注意的是，我们向url添加时间戳的方法，确保了get请求的时候，是添加在url的queryString上，并且用‘_’将其作为参数的name。

1. 发送请求

在发送请求的时候，直接使用axios.create()创建的实例即可，具体代码如下：

// 引入axios实例
import axiosInstance from './axiosInstance';

export const loginApi = params => {
  return axiosInstance.post('/login', params);
};

在使用该发送请求方式，axiosInstance实例会自动添加时间戳，确保每次请求的url都不相同。

示例1：使用时间戳解决重复请求数据

在某些情况下，前端需要控制用户请求时间，比如每5秒才能发送一次请求。在这种情况下，我们可以使用时间戳来限制用户发送请求的频率。

// 定义一些变量
let isLoading = false; // 是否在请求数据
let lastRequestTime = 0; // 上次请求的时间

const getData = () => {
  // 如果还没在请求数据，或与上次请求时间过去了5秒，才能发起请求
  if (!isLoading && Date.now() - lastRequestTime >= 5000) {
    isLoading = true;
    axiosInstance.get('/data').then(res => {
      isLoading = false;
      lastRequestTime = Date.now();
      // 处理数据
    }).catch(error => { 
      isLoading = false;
      // 处理错误
    });
  }
};

以上代码中，我们用isLoading变量判断当前是否在请求数据，如果不在，则允许发起请求。然后我们用Date.now()获取当前的时间戳，减去上一次请求时间戳，如果与上次请求的时间相隔超过5秒，则可以发起请求。

示例2：使用时间戳更新页面内容

在使用Vue.js开发时，我们有时需要通过ajax向后端请求数据，并将数据展示在页面上。但是在不进行页面刷新的情况下，我们如何保证用户看到的信息与实际数据是同步的呢？这时候，时间戳就可以发挥作用了。

<template>
  <div>
    <h2>{{loading ? 'Loading ...' : 'Todo List'}}</h2>
    <ul>
      <li v-for="item in list" :key="item.id">{{item.title}}</li>
    </ul>
    <p>
      <button @click="getList">Get List</button>
    </p>
  </div>
</template>

<script>
import axiosInstance from './axiosInstance';

export default {
  data() {
    return {
      loading: false,
      list: [],
      timestamp: 0
    }
  },
  methods: {
    getList() {
      this.loading = true;
      axiosInstance.get(`/list?timestamp=${this.timestamp}`).then(res => {
        this.timestamp = Date.now();
        this.list = res.data.list;
        this.loading = false;
      }).catch(error => {
        this.loading = false;
      });
    }
  }
}
</script>

在该示例中，我们使用了timestamp变量记录上一次请求发生的时间戳，并在发送请求的时候，将timestamp作为参数发送给后台。当后台返回数据时，我们将最新的时间戳赋值给timestamp变量，保证下一次请求的时候，时间戳是不同的。这样就能确保每次请求的数据都是最新的了。