如何用Apisauce像Angular那样优雅封装查询字符串参数？

当然可以！Apisauce完全支持像Angular中HttpParams那样优雅的查询参数处理方式，根本不需要手动拼接URL字符串——手动拼接不仅容易出错，还会忽略特殊字符的URL编码问题，用内置的参数配置就完美解决了。

优雅实现方式（和Angular写法对齐） #

Apisauce的get方法允许你在第二个参数中传入配置对象，其中的params属性就是用来设置查询参数的，它会自动帮你生成正确的查询字符串，还会处理编码：

import { create } from 'apisauce';

// 先初始化你的API实例（建议抽离到单独的API配置文件）
const api = create({
  baseURL: 'http://someurl'
});

export const checkAvailability = async (context: string, data: string) => {
  // 动态键名的写法和Angular的params.append(context, data)对应
  return api.get('', {
    params: {
      [context]: data
    }
  });
};

如果你的context是固定的键名（比如始终是'context'这个字符串），写法更简洁：

export const checkAvailability = async (context: string, data: string) => {
  return api.get('', {
    params: {
      context: data
    }
  });
};

为什么比手动拼接好？ #

• 自动处理URL编码：比如data里包含&、=或者中文等特殊字符，Apisauce会自动转义，避免参数解析错误
• 代码更清晰：一眼就能看出传递的参数是什么，不用在URL字符串里找拼接逻辑
• 避免低级错误：不会出现漏写&、多写?之类的拼写问题

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