使用Axios和jQuery进行HTTP请求有什么区别？

Question

我一直以来都是jQuery的用户。但现在我正在构建我的第一个API，它使用JWT进行身份验证。因此，大多数我在线上找到的关于如何使用带有身份验证标头的Axios消耗这个API的教程。

我已经在项目中使用了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这个库吗？

阅读Axios特性后，最后一个是：客户端支持防XSRF攻击。jQuery ajax是否不支持此功能？我需要额外做些什么来实现这种保护？除了这个特性，还有什么其他的原因可以使用Axios而不是jQuery这个库吗？

- sigmaxf

---

Axios在IE中无法工作。 - Yevgeniy Afanasyev

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()。

“除了jQuery之外，还有什么其他使Axios库值得使用的东西吗？” 我会毫不犹豫地说是的。 专门处理HTTP的库将该过程与应用程序框架或表示库分离。

- Kyle Richardson

---

可以在全局 ajaxSend() 中实现，这样它就会反映在所有使用 $.ajax 的地方。 - charlietfl

Answer 2

在jquery中添加CSRF（XSRF）支持非常简单，只需在jquery加载后将以下行添加到页面上（使用页面上的meta标签呈现您的令牌即可）：

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

过去我发现Axios带来的麻烦比价值更大。像请求资源列表的GET请求，用POST/PUT/DELETE请求修改列表中的项目，然后重新请求列表以同步视图这样的简单过程会导致缓存数据被提供，意味着视图不会改变。这只是一个例子。

编辑：我目前正在开发一个Vue.js项目，我记得为什么我选择了jquery而不是axios的原因有几个：

值得注意的是，如果您使用Bootstrap或类似的东西，您已经包含了jQuery，那么为什么要再包含一个库呢？

最后，我使用一个简单的脚本，通过添加几个类和一个bootstrap-alert来将任何标准HTML表单转换为ajax提交表单。 它旨在与Laravel和（可选）Vue.js一起使用。它非常方便，因为它处理表单组件的样式以告诉用户正在发生什么。 要调试服务器端错误，您可以从表单中删除“ajax-submit”类，它将恢复为标准表单提交。脚本中的辅助操作最简单使用jQuery实现。 我已经在这里放置了一个gist。 希望有人会发现它有用。

事实上，我非常想看看使用Axios而不是jQuery创建等效脚本有多难。

进一步编辑：我刚刚又从另一个项目中删除了Axios。这是一个PWA应用程序，Axios没有使用fetch API的选项，这是与Service Workers一起使用所必需的。我创建了一个gist来替换Axios为fetch。也许它对某人有用。

- mp035

---

使用Bootstrap 5时，不再需要“我应该只是使用jQuery，因为Bootstrap使用它”的说法了。明年值得使用它的原因是因为微软将最终关闭IE浏览器。或者，您可以直接使用CSS Grid。 - Jackal