草庐IT

Ajax、Fetch、Axios

抽疯的稻草绳 2023-03-28 原文

这些名词的共同点：都用于发送网络请求。

1.Ajax

它的全称是：Asynchronous JavaScript And XML，翻译过来就是“异步的 Javascript 和 XML”。

很多小伙伴可能会误以为 Ajax 是发请求的一种方式，或者把 XMLHttpRequest 与 Ajax 划等号，其实这是错误和片面的。

正解：

Ajax 是一个技术统称，是一个概念模型，它囊括了很多技术，并不特指某一技术，它很重要的特性之一就是让页面实现局部刷新。

特点：

  • 局部刷新页面，无需重载整个页面。

简单来说，Ajax 是一种思想，XMLHttpRequest 只是实现 Ajax 的一种方式。其中 XMLHttpRequest 模块就是实现 Ajax 的一种很好的方式，这也是很多面试官喜欢让面试者手撕的代码之一。

利用 XMLHttpRequest 模块实现 Ajax。

示例代码：

<body>
  <script>
    function ajax(url) {
      const xhr = new XMLHttpRequest();
      xhr.open("get", url, false);
      xhr.onreadystatechange = function () {
        // 异步回调函数
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            console.info("响应结果", xhr.response)
          }
        }
      }
      xhr.send(null);
    }
    ajax('https://smallpig.site/api/category/getCategory')
  </script>
</body>
复制代码

输出结果：

image.png

这里利用 XMLHttpRequest 模块实现了一个最简单的 get 网络请求。

注意： 我们使用这种方式实现网络请求时，如果请求内部又包含请求，以此循环，就会出现回调地狱，这也是一个诟病，后来才催生了更加优雅的请求方式。

2.Fetch

Fetch 是在 ES6 出现的，它使用了 ES6 提出的 promise 对象。它是 XMLHttpRequest 的替代品。

很多小伙伴会把它与 Ajax 作比较，其实这是不对的，我们通常所说的 Ajax 是指使用 XMLHttpRequest 实现的 Ajax，所以真正应该和 XMLHttpRequest 作比较。

正解：

Fetch 是一个 API，它是真实存在的，它是基于 promise 的。

特点：

  • 使用 promise，不使用回调函数。
  • 采用模块化设计，比如 rep、res 等对象分散开来，比较友好。
  • 通过数据流对象处理数据，可以提高网站性能。

所以这里就和 Ajax 又很大不同了，一个是思想，一个是真实存在的 API，不过它们都是用来给网络请求服务的，我们一起来看看利用 Fetch 实现网络请求。

示例代码：

<body>
  <script>
    function ajaxFetch(url) {
      fetch(url).then(res => res.json()).then(data => {
        console.info(data)
      })
    }
    ajaxFetch('https://smallpig.site/api/category/getCategory')
  </script>
</body>
复制代码

输出结果：

image.png

上段代码利用 Fetch 发送了一个最简单的 get 请求，其中最重要的特点之一就是采用了.then 链式调用的方式处理结果，这样不仅利于代码的可读，而且也解决了回调地狱的问题。

3.Axios

Axios 是随着 Vue 的兴起而被广泛使用的，目前来说，绝大多数的 Vue 项目中的网络请求都是利用 Axios 发起的。当然它并不是一个思想，或者一个原生 API，它是一个封装库。

正解：

Axios 是一个基于 promise 封装的网络请求库，它是基于 XHR 进行二次封装。

特点：

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

所以说，Axios 可以说是 XHR 的一个子集，而 XHR 又是 Ajax 的一个子集。既然说它是一个库，那么我们在使用的时候就需要引入它。

示例代码：

// 发送 POST 请求
axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
复制代码

总结

Ajax、Fetch、axios三者之间的关系可以用一张图来清晰的表示，如图：

image.png

三者做个对比：

网络请求 特点
Ajax 一种技术统称，主要利用XHR实现网络请求
Fetch 具体API，基于promise，实现网络请求
Axios 一个封装库，基于XHR封装，较为推荐使用
FetchAxiosstrongsectionXMLHttpRequest

有关Ajax、Fetch、Axios的更多相关文章

  1. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  2. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. jquery - 使用 Rails 3 学习 Ajax 的资源 - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。有没有学习Ajax(jQuery)和Rails3的好资源？

  5. ruby-on-rails - 当 AJAX 调用在 Ruby on Rails 中失败时重定向到 500 页 - 2

    我正在使用一个用RubyonRails构建的应用程序，目前错误处理非常差。如果通过ajax执行Controller方法，并且该方法导致500(或404或任何其他响应)，则呈现500.html页面并将其作为AJAX请求的结果返回。显然，javascript不知道如何处理该HTML，网页看起来只是在等待响应。在AJAX调用期间发生错误时，rails是否有一种简单的方法来呈现error.rjs模板？ 最佳答案 您可以在Controller的rescue_action或rescue_action_in_public方法中使用respond_

  6. jquery - Rails 4 如何捕捉 ajax :success event - 2

    我正在使用Rails4.0。我正在发送这样的事件(注意:remote=>true):true,:class=>"rate-btnyes-btnbtnbtn-defaultbtn-sm"}%>我的Controller看起来像这样:defratevideo=Video.find_by(hashed_id:params[:id])action=params[:yesno]putsvideo.hashed_idputsactionrespond_todo|format|if(action=='yes')new_rating=video.rating==1?0:1video.update(is_

  7. ruby-on-rails - rails 如何在调用 ajax 删除表行后删除它？ - 2

    如果我有一个链接-=link_to'ajaX',ajax_delete_link_path(link),data:{:confirm=>'Areyousure?',:remote=>true}有一条路线:get'ajax_delete_link/:id',to:'links#ajax_delete_link',as::ajax_delete_link和一个链接Controller:defajax_delete_link@link=Link.find(params[:id])@link.destroyrespond_todo|format|format.jsendend和ajax_del

  8. ruby-on-rails - 使用 Ruby On Rails 在 AJAX 中进行星级评定 - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭11年前。我认为acts_as_rateable似乎已经过时并且不支持AJAX。我正在寻找一个简单的“5星”评级系统:是否有任何插件或教程可以提供帮助？

  9. ruby - 设计 - 使用 Ajax 登录 - 2

    是否有可能为ajax通信修改设计SessionsController？编辑我找到了解决方案，并将其发布到答案中，谢谢 最佳答案 1。生成DeviseController以便我们修改它railsgdevise:controllers现在我们在app/controllers/[model]目录中拥有所有Controller2。编辑routes.rb让我们将Devise设置为使用我们修改后的SessionsController首先将此代码(当然将:users更改为您的设计模型)添加到config/routes.rbdevise_for:u

  10. ruby-on-rails - rspec 测试 ajax 响应(应该呈现部分) - 2

    我想测试我的Controller操作是否正在渲染部分内容。我四处寻找，似乎找不到任何有用的东西。创建Action:defcreate@project=Project.new...respond_todo|format|if@project.saveformat.js{render:partial=>"projects/form"}endendend规范:it"shouldsaveandrenderpartial"do....#Iexpected/hopedthiswouldworkresponse.shouldrender_partial("projects/form")#oreven

随机推荐