如何在GET请求中携带参数发送数据并获取返回结果

GET请求携带参数的实现方法 #

你使用的HTTP客户端（如Axios）原生支持GET请求传入查询参数，无需手动拼接URL，修改后的代码如下：

const ROUTE = "public/v1/route";

export async function showRoute(
  flow: string,
  token: string
): Promise<RouteParams> {
  // 第二个参数传入配置对象，params字段内的所有属性都会自动转为查询字符串
  const response = await client.get(ROUTE, {
    params: {
      flow,
      token
    }
  });
  return response.data;
}

其他可选实现方式 #

• 手动拼接URL参数（适合需要自定义参数序列化规则的场景）：

  const ROUTE = "public/v1/route";
  
  export async function showRoute(
    flow: string,
    token: string
  ): Promise<RouteParams> {
    // 用URLSearchParams自动处理特殊字符编码，避免手动拼接出现乱码
    const query = new URLSearchParams({ flow, token }).toString();
    const response = await client.get(`${ROUTE}?${query}`);
    return response.data;
  }
  

• 如果token需要放在请求头中（符合JWT等身份验证的常规规范），可以调整为以下写法：

  const ROUTE = "public/v1/route";
  
  export async function showRoute(
    flow: string,
    token: string
  ): Promise<RouteParams> {
    const response = await client.get(ROUTE, {
      headers: {
        Authorization: `Bearer ${token}`
      },
      params: {
        flow
      }
    });
    return response.data;
  }
  

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