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

Question

我永远是一个jQuery用户.但现在我正在构建我的第一个使用JWT进行身份验证的API.这就是说,我在网上发现的大多数教程使用带有身份验证标头的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().

"还有什么值得使用像Axios这样的其他库而不是jQuery吗？"

我绝对会说.专用于处理http的库将应用程序框架或表示库中的进程分离.

Answer 2

在 jquery 中添加对 CSRF (XSRF) 的支持非常简单，只需在加载 jquery 后将以下几行添加到您的页面即可（您的令牌将呈现在页面上的元标记中）：

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

我（过去）发现 Axios 带来的麻烦多于其价值。简单的过程，例如执行 GET 请求来请求资源列表，使用 POST/PUT/DELETE 请求更改列表中的项目，然后重新请求列表（以同步视图）会导致提供缓存的数据，这意味着视图没有改变。这只是一个例子。

编辑：我目前正在开发一个 Vue.js 项目，我还记得为什么我坚持使用 jquery 而不是 axios 的几个原因：

值得注意的是，如果您使用 bootstrap 或类似的东西，您已经包含了 jquery，那么为什么还要包含第二个库呢？

最后，我使用一个简单的脚本，只需添加几个类和一个用于显示错误的引导警报，即可将任何标准 html 表单转换为 ajax 提交表单。它旨在与 laravel 和（可选）Vue.js 一起使用。它真的很方便，因为它处理表单组件的样式来告诉用户正在发生什么。为了调试服务器端错误，您只需从表单中删除“ajax-submit”类，它将恢复为标准表单提交。脚本中的辅助操作最简单地使用 jQuery 实现。我已经在这里概括了它的要点。希望有人会发现它有用。

我实际上非常有兴趣了解使用 Axios 创建等效脚本（不包括 jQuery）有多么困难

进一步编辑： 我只需从另一个项目中删除 Axios。它是一个 PWA 应用程序，Axios 没有使用服务工作线程所需的 fetch API 的选项。 我创建了一个要点，用 fetch 替换 Axios 。 也许这对某人有用。