javascript - 使用 Axios 与 jQuery 进行 HTTP 请求有什么区别？

Question

我一直都是 jQuery 用户。但现在我正在构建第一个使用 JWT 进行身份验证的 API。也就是说，我在网上找到的大多数使用带有身份验证 header 的 API 的教程都使用 Axios 来发出这些请求。

我已经在项目中使用了 jQuery，因此，我很乐意进行简单的 jQuery ajax 调用，但我不确定使用它是否有任何硬缺点。

这将是我的 jQuery 代码:

$.ajax({
  url: "http://localhost:8080/login",
  type: 'POST',
  data: formData,
  error : function(err) {
    console.log('Error!', err)
  },
  success: function(data) {
    console.log('Success!')
    localStorage.setItem('token', data.id_token);
  }
});

发送请求

$.ajax({
  url: "http://localhost:8080/login",
  type: 'GET',
  // Fetch the stored token from localStorage and set in the header
  headers: {"Authorization": localStorage.getItem('token')}
});

阅读完 Axios 功能后，最后一项是:针对 XSRF 防护的客户端支持。 jQuery ajax 不支持吗？我需要做任何额外的事情来实现这种保护吗？还有什么值得使用像 Axios 这样的库而不是 jQuery 的其他东西吗？

Answer 1

我在 jQuery $.ajax 文档中没有看到任何对此的明确支持。话虽如此，您可以使用 beforeSend 设置来完成此操作。在 beforeSend 中，您将修改 jqHXR 以包含您的 XSRF 信息。

@charlietfl 提到您也可以在全局 ajaxSend() 中执行此操作，因此它会应用于 $.ajax()

的所有实例

这就是axios正在做的事情:

  // `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
  xsrfCookieName: 'XSRF-TOKEN', // default

  // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
  xsrfHeaderName: 'X-XSRF-TOKEN', // default

如果您已在项目中使用 jQuery，并且可以自己处理 XSRF，则使用 $.ajax()。

"Is there anything else that makes it worth using another library like Axios instead of jQuery?"

我绝对会说。专用于处理 http 的库将进程与应用程序框架或表示库解耦。