经验分享：axios 发起http请求的一些细节

2023-11-19 17:03:29

今天和公司后台对接接口时，发生了一件很有意思的事情，他写了一个登录接口，我使用 axios 进行 post 请求，我传了用户名和密码过去，接口没有调用成功，后台看了日志后，说我没传参，然后发了一张他自己测试接口的成功截图。于是我就进入了找 bug 环节。

经过一番排查，我发现问题出在 axios 的请求参数上。在 JavaScript 中，对象是一个引用类型，这意味着当我们把一个对象作为参数传递给函数时，函数实际上是收到了这个对象的引用。如果我们在函数内部修改了这个对象，那么在函数外部也会看到这些修改。

// 请求参数
const data = {
  username: 'admin',
  password: '123456',
};

// 发送请求
axios.post('/login', data)
  .then(res => {
    console.log(res.data);
  })
  .catch(err => {
    console.log(err.message);
  });

在这个代码中，我将一个名为 data 的对象作为参数传递给了 axios.post() 函数。在函数内部，axios 会将这个对象转换为 JSON 字符串，然后发送给后端服务器。但是，当我在函数内部修改了 data 对象时，后端服务器收到的 JSON 字符串并没有改变。

// 请求参数
const data = {
  username: 'admin',
  password: '123456',
};

// 发送请求
axios.post('/login', data)
  .then(res => {
    console.log(res.data);

    // 在函数内部修改 data 对象
    data.username = 'new_username';
  })
  .catch(err => {
    console.log(err.message);
  });

在这个代码中，我在 axios.post() 函数内部修改了 data 对象的 username 属性。但是，当我在函数外部打印 data 对象时，username 属性的值仍然是 'admin'。这是因为在 JavaScript 中，对象是一个引用类型，当我们把一个对象作为参数传递给函数时，函数实际上是收到了这个对象的引用。如果我们在函数内部修改了这个对象，那么在函数外部也会看到这些修改。

为了解决这个问题，我们需要在发送请求之前创建一个 data 对象的副本，然后将这个副本作为参数传递给 axios.post() 函数。

// 请求参数
const data = {
  username: 'admin',
  password: '123456',
};

// 发送请求
axios.post('/login', {...data})
  .then(res => {
    console.log(res.data);
  })
  .catch(err => {
    console.log(err.message);
  });