JavaScript调用Django REST Framework按team ID筛选数据异常如何解决

问题解决办法 #

1. 修复异步请求回调顺序混乱问题
   你当前通过forEach循环发起多个fetch异步请求，异步请求的响应返回顺序不受调用顺序控制，每次刷新后响应回来的先后顺序随机，就会出现控制台打印的result顺序不一致的情况。如果需要按固定顺序输出结果，可以替换为async/await串行请求的写法，同时给每个返回结果加上对应的team ID标识：

document.addEventListener('DOMContentLoaded', async function () {
  const teamList = document.querySelectorAll('.card-title')
  for (const team of teamList) {
    let team_id = parseInt(team.dataset.team)
    console.log('请求team ID:', team_id)
    const response = await fetch(`/generals/?team=${team_id}`)
    const result = await response.json()
    console.log(`team ${team_id} 返回结果:`, result)
  }
})

2. 修正Django路由配置
   Django默认开启APPEND_SLASH配置，会自动对无尾斜杠的请求返回重定向到带尾斜杠的地址，重定向过程可能出现参数丢失或者请求重复问题，修改urls.py的路由规则，增加尾斜杠：

path('generals/', views.GeneralView.as_view(), name='general_view')

3. 修正过滤配置并增加排序规则
   旧版本的filter_fields已被官方弃用，替换为filterset_fields避免版本兼容导致过滤失效；同时给QuerySet指定排序规则，避免数据库返回结果顺序随机：

class GeneralView(generics.ListAPIView):
    queryset = General.objects.all().order_by('id')
    serializer_class = GeneralSerializer
    filter_backends = [DjangoFilterBackend]
    filterset_fields = ('team',)

4. 接口有效性验证
   修改完所有配置后，直接在浏览器地址栏访问固定测试地址，比如http://你的服务地址/generals/?team=对应ID，多次刷新确认返回结果是否一致，即可验证过滤功能是否正常。

内容的提问来源于stack exchange，提问作者Omayer Hasan