NuxtJS中使用axios发起GET请求携带查询参数过滤数据不生效怎么办

你遇到的返回全量数据的问题，按优先级依次排查以下原因即可：

• 优先确认接口路由规范
  绝大多数后端遵循RESTful接口设计规范，/resources/ 是集合资源路由，默认返回全量资源列表，单条id对应资源的请求路径应为 /resources/[id]，不需要额外传params参数。因为原代码中resources是数组类型，请求到单条数据后需要包裹为数组适配v-for渲染：

fetch: async function() {
  // 直接请求单条资源路由，返回结果包为数组适配列表渲染
  this.resources = [await this.$axios.$get('/resources/1')]
}

• 确认查询参数规则是否匹配后端要求
  如果你的后端确实设计为在/resources/路由下通过查询参数过滤结果，先和后端对齐过滤参数的格式要求：

  1. 检查过滤id的参数名是否正确，是否存在比如resource_id、id_eq等其他命名
  2. 部分框架（比如遵循JSON:API规范的后端）要求过滤参数为嵌套格式，示例如下：

  fetch: async function() {
    this.resources = await this.$axios.$get('/resources/',
    {
      params: {
        filter: {
          id: 1
        }
      }
    })
  }
  

• 验证请求参数是否正常传递
  打开浏览器开发者工具的「网络」面板，查看对应GET请求的完整URL，确认是否已经正确拼接了?id=1后缀：

  • 如果URL没有携带参数，检查axios全局配置是否存在拦截器删除了params参数
  • 如果URL已经携带参数，说明后端没有实现对应参数的过滤逻辑，需要后端同学补充id参数的查询过滤支持即可

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