RESTful API 之 URL 中参数传递技巧

在使用 RESTful API 进行前后端交互时，URL 中参数传递是非常常见的方式。本文将介绍一些 URL 中参数传递的技巧，以帮助前端开发者更好地使用 RESTful API 进行开发。

1. URL 中参数传递的方式

在 RESTful API 中，URL 中参数传递有两种方式：

• Query 参数传递
• 路径参数传递

1.1 Query 参数传递

Query 参数传递是通过在 URL 的末尾添加 ? 和参数键值对的方式进行传递。例如：

http://example.com/api/users?name=john&age=30

上述 URL 中，name 和 age 是参数的键，john 和 30 是参数的值。

Query 参数传递的优点是可以传递多个参数，并且参数之间可以任意组合，方便进行筛选和过滤操作。缺点是 URL 可读性较差，并且容易被爬虫或其他程序攻击。

1.2 路径参数传递

路径参数传递是通过在 URL 中添加路径参数的方式进行传递。例如：

http://example.com/api/users/john/30

上述 URL 中，john 和 30 是路径参数。路径参数的优点是 URL 可读性较好，易于理解和维护。缺点是只能传递固定数量的参数，并且参数之间的组合方式受限。

2. URL 中参数传递的技巧

在使用 URL 中参数传递时，有一些技巧可以帮助我们更好地进行开发。

2.1 参数编码

在 URL 中传递参数时，需要对参数进行编码，以避免出现特殊字符和中文等问题。常见的编码方式有两种：

• URL 编码
• Base64 编码

2.1.1 URL 编码

URL 编码是将参数进行转义，将特殊字符转换为 % 加上对应的 ASCII 码。例如：

http://example.com/api/users?name=John%20Doe&age=30

上述 URL 中，%20 表示空格，%26 表示 &，其他特殊字符也有对应的编码方式。

在 JavaScript 中，可以使用 encodeURIComponent 函数进行 URL 编码：

const name = 'John Doe';
const age = 30;
const url = `http://example.com/api/users?name=${encodeURIComponent(name)}&age=${encodeURIComponent(age)}`;

2.1.2 Base64 编码

Base64 编码是将参数进行转换，将二进制数据转换为可打印字符。例如：

http://example.com/api/users?name=Sm9obiBEb2U=&age=MzA=

上述 URL 中，Sm9obiBEb2U= 表示 John Doe 的 Base64 编码，MzA= 表示 30 的 Base64 编码。

在 JavaScript 中，可以使用 btoa 函数进行 Base64 编码：

const name = 'John Doe';
const age = 30;
const url = `http://example.com/api/users?name=${btoa(name)}&age=${btoa(age)}`;

2.2 参数默认值

在 URL 中传递参数时，有时候需要设置默认值，以避免出现参数缺失的情况。可以使用 ES6 的默认参数语法来实现：

function getUsers(name = '', age = 0) {
  const url = `http://example.com/api/users?name=${encodeURIComponent(name)}&age=${encodeURIComponent(age)}`;
  // ...
}

上述代码中，如果调用 getUsers 时不传递参数，那么 name 和 age 将分别使用空字符串和 0 作为默认值。

2.3 参数合并

在 URL 中传递参数时，有时候需要合并多个参数，以进行复杂的筛选和过滤操作。可以使用 Object.assign 函数来实现：

const filters = {
  name: 'John Doe',
  age: 30,
  gender: 'male'
};
const url = `http://example.com/api/users?${Object.entries(filters).map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&')}`;

上述代码中，filters 对象包含多个参数键值对，Object.entries 函数将其转换为数组，map 函数将数组中的每个元素转换为 URL 参数字符串，join 函数将多个参数字符串合并为一个完整的 URL 参数字符串。

2.4 参数类型转换

在 URL 中传递参数时，有时候需要将参数转换为指定的类型，以方便后续处理。可以使用 parseInt 和 parseFloat 函数来实现：

const name = 'John Doe';
const age = '30';
const url = `http://example.com/api/users?name=${encodeURIComponent(name)}&age=${parseInt(age)}`;

上述代码中，age 参数是一个字符串，使用 parseInt 函数将其转换为整数类型。

3. 总结

本文介绍了 RESTful API 中 URL 中参数传递的两种方式，以及一些技巧，包括参数编码、参数默认值、参数合并和参数类型转换。这些技巧可以帮助前端开发者更好地使用 RESTful API 进行开发，提高开发效率和代码可读性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f47b522b3ccec22fccaa36