Vue向Django API发起并发请求时均返回最后请求响应的问题

看起来你遇到了并发请求时响应被意外覆盖的问题，我帮你分析下可能的原因和解决办法：

首先排查后端Django视图的问题 #

最常见的元凶是Django QuerySet的惰性求值缓存。如果你的视图里把查询集定义在了函数外部，就会出现这种复用缓存的情况：

# 错误示例：查询集定义在函数外，会被缓存复用
all_users = User.objects.all()
new_users = User.objects.filter(is_new=True)

def list_objects(request):
    if 'type' in request.GET and request.GET['type'] == 'new':
        return Response(new_users.values())
    else:
        return Response(all_users.values())

QuerySet是惰性执行的，第一次查询后结果会被缓存，后续请求直接复用缓存数据，并发请求时自然会拿到相同结果。

解决办法：把查询逻辑放到视图函数内部，确保每次请求都重新执行查询：

def list_objects(request):
    if 'type' in request.GET and request.GET['type'] == 'new':
        # 每次请求都重新查询新用户
        new_users = User.objects.filter(is_new=True).values()
        return Response(new_users)
    else:
        # 每次请求都重新查询全部用户
        all_users = User.objects.all().values()
        return Response(all_users)

另外，建议给响应添加禁用缓存的头，避免浏览器或中间件干扰：

from rest_framework.response import Response

def list_objects(request):
    # 你的查询逻辑...
    response_data = ...
    
    response = Response(response_data)
    # 禁用缓存的响应头配置
    response['Cache-Control'] = 'no-cache, no-store, must-revalidate'
    response['Pragma'] = 'no-cache'
    response['Expires'] = '0'
    return response

然后检查前端Vue的问题 #

1. 修正变量名冲突 #

你在new_users()方法里给this.new_users赋值，但方法名和数据变量名完全相同——虽然Vue的方法和数据是分开存储的，但这种命名很容易引发混淆，建议改成驼峰命名规范：

data() {
  return {
    sers: [],
    newUsers: [] // 数据变量改为驼峰
  }
},
methods:{
  fetchUsers(){ // 方法名调整，和变量名区分开
    axios.get('users').then((response) => {
      this.sers = response.data;
    }).catch((error) => {
      console.log(error);
    });
  },
  fetchNewUsers(){ // 方法名重新命名
    axios.get('users', {
      params: {type:'new'},
    }).then((response) => {
      this.newUsers = response.data;
    }).catch((error) => {
      console.log(error);
    });
  }
},
mounted(){
  this.fetchUsers();
  this.fetchNewUsers();
}

2. 禁用axios请求缓存 #

浏览器默认会缓存GET请求，即使带参数的URL不同，也可能出现缓存问题。可以在axios请求中明确禁用缓存：

axios.get('users', {
  params: {type:'new'},
  cache: false // 强制禁用缓存
})

关键排查步骤：确认请求的实际响应 #

打开浏览器开发者工具（F12），切换到「Network」标签：

• 确认两个请求的URL分别是/users和/users?type=new
• 查看每个请求的「Response」内容，确认Django是否返回了正确的数据
  如果Response内容是正确的，那问题就在前端赋值逻辑；如果Response内容错误，就回到后端视图继续排查。

内容的提问来源于stack exchange，提问作者Rahul Reghunath