从源码解析 Axios 参数传递之谜

前言

在日常开发中，使用 Axios 传递参数时，开发者经常会混淆参数传递的位置。这是因为 Axios 对传递的参数进行了合并兼容，导致了使用上的困惑。本文将从源码层面深入剖析 Axios 的参数传递机制，拨开云雾，让您彻底掌握 Axios 的参数传递之道。

Axios 的三种使用方式

Axios 提供了三种使用方式：

1. axios(config) ：该方式允许开发者自定义配置对象，灵活控制 HTTP 请求的各个方面。
2. axios.request(config) ：该方式更接近底层 API，允许开发者直接指定请求配置。
3. axios.get/post/put/delete(url[, config]) : 该方式提供了简洁的语法，针对常见的 HTTP 方法进行了封装，大大简化了请求发送。

Axios 参数传递的底层原理

从源码层面分析，Axios 将所有参数合并到一个对象中，称为 config 对象。该对象包含了 HTTP 请求的所有配置信息，包括 URL、方法、数据、标头等。

对于 axios(config) 和 axios.request(config) 两种方式，参数直接传递给 config 对象。对于 axios.get/post/put/delete(url[, config]) 方式，url 参数被作为 config 对象的 url 属性，而可选的 config 参数被合并到 config 对象中。

参数传递位置的兼容性

Axios 对参数传递位置进行了兼容处理，开发者既可以在 config 对象中传递参数，也可以在 url 参数后直接传递参数。例如，以下两种写法是等价的：

// 使用 config 对象传递参数
axios({
  url: 'https://example.com/api/users',
  method: 'GET',
  params: {
    name: 'John Doe',
    age: 30
  }
});

// 在 url 参数后直接传递参数
axios.get('https://example.com/api/users', {
  params: {
    name: 'John Doe',
    age: 30
  }
});

注意事项

需要注意的是，在 url 参数后直接传递参数时，如果 url 中已经包含了查询参数，则会与 config 对象中的查询参数合并。例如，以下写法可能会导致意想不到的结果：

axios.get('https://example.com/api/users?name=Jane Doe', {
  params: {
    age: 30
  }
});

在这种情况下，最终发送的请求 URL 为 https://example.com/api/users?name=Jane Doe&age=30，其中 name 参数被覆盖了。为了避免这种问题，建议始终在 config 对象中传递查询参数。

总结

通过从源码层面分析 Axios 的参数传递机制，我们彻底掌握了 Axios 如何处理参数合并。这将帮助我们避免参数传递位置的困惑，提升 HTTP 请求编写的效率和准确性。在实际开发中，建议优先使用 axios(config) 方式，因为它提供了最大的灵活性，可以更精确地控制 HTTP 请求的各个方面。