首页 > 其他分享 >XMLHttpRequest、Fetch、Axios和AJAX的关系

XMLHttpRequest、Fetch、Axios和AJAX的关系

时间:2024-09-23 20:51:56浏览次数:9  
标签:Axios 浏览器 请求 AJAX API XMLHttpRequest Fetch

一、基于http协议用于前后端通信的工具

1、XMLHttpRequest(原生JS对象)

XMLHttpRequest(XHR)是 原生 JavaScript 对象 。通过 XMLHttpRequest 可以在 不刷新 页面的情况下请求特定 URL,获取数据。

特性:

  • 浏览器广泛支持
  • 功能丰富:可以跟踪请求的状态、支持进度事件、文件上传、同步请求等
  • 可同步可异步
  • 不支持Promise API

2、Fetch (浏览器原生API)

(1)Fetch API 提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的一些具体部分,例如请求和响应。它还提供了一个全局 fetch() 方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。这种功能以前是使用 XMLHttpRequest 实现的。Fetch 提供了一个更理想的 替代 方案。
(2)fetch() 方法用于发起获取资源的请求,它会返回一个会在请求响应后兑现的 promise。该 promise 会兑现一个表示请求响应的 Response 对象。

相比XMLHttpRequest:

  • 语法更加简洁
  • 提供了Promise API支持
  • 支持流式处理,允许逐步读取响应数据,适合大文件的处理

3、Axios(第三方库)

Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests

其他特性:

  • 支持Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 超时处理
  • 查询参数序列化支持嵌套项处理
  • 自动将请求体序列化为:
    • JSON (application/json)
    • Multipart / FormData (multipart/form-data)
    • URL encoded form (application/x-www-form-urlencoded)
  • 将 HTML Form 转换成 JSON 进行请求
  • 自动转换JSON数据
  • 获取浏览器和 node.js 的请求进度,并提供额外的信息(速度、剩余时间)
  • 兼容符合规范的 FormData 和 Blob(包括 node.js)
  • 客户端支持防御XSRF

Axios的详细介绍及使用指南

4、Axios, Fetch和XMLHttpRequest 比较

特性XMLHttpRequestFetchAxios
Promise 支持
语法简洁
自动 JSON 解析
错误处理需要手动处理需要手动检查状态码自动处理 HTTP 错误
进度跟踪
拦截器请求和响应拦截器
请求取消需要手动实现通过 AbortController支持 AbortController
浏览器兼容性所有浏览器都支持现代浏览器,需 polyfill 支持 IE现代浏览器(需引入外部库)
Node.js 支持需要 polyfill
体积原生 JS对象原生 API外部库,体积较大
流式处理响应是(支持 ReadableStream
同步请求支持不支持不支持

5、Axios为什么使用XMLHttpRequest实现,而不是更加现代的Fetch?

(1)历史原因:Axios2014年就开始维护了,Promise和Fetch()是ES6(2015年)才更新的,所以有一部分的历史原因,根据升级日志来看,Axios的Promise支持也是2015年才加上的。
(2)兼容性:XMLHttpRequest兼容性更高,除了现代浏览器也支持老浏览器。
(3)功能:XMLHttpRequest可提供的底层功能更多,Axios 通过封装 XMLHttpRequest,可以提供类似 Fetch 的简洁语法,同时保留这些底层功能。
(4)需要注意的是技术是在不断变化和完善的:从 v0.22.0 开始,Axios 支持以 fetch API 方式—— AbortController 来实现取消请求的功能,并弃用了之前的CancelToken。

二、AJAX(web开发技术)

(1)AJAX(Asynchronous JavaScript And XML)是一种在 Web 应用中通过 异步 发送 HTTP 请求向服务器获取内容,并使用这些新内容更新页面中相关的部分,而 无需重新加载 整个页面的 Web 开发技术。
(2)一开始的时候 AJAX 通过使用 XMLHttpRequest 接口实现,但是 fetch() API 更适合用于开发现代 Web 应用:更出色、更灵活、更好地与一些 Web 应用的基础技术相结合(如 Service Worker)。
(3)AJAX 的 本质 :AJAX指的是通过 JavaScript 进行异步 HTTP 请求,而不是具体的工具或库。因此,不论是使用原生的 XMLHttpRequest、Fetch API,还是 Axios,它们都可以用于实现 AJAX 操作。

标签:Axios,浏览器,请求,AJAX,API,XMLHttpRequest,Fetch
From: https://blog.csdn.net/wechatonly/article/details/142446146

相关文章

  • axios允许跨域cookie
    //添加请求拦截器service.interceptors.request.use( (config)=>{ ////在发送请求之前做些什么token //if(Session.get('token')){ // (<any>config.headers).common['Authorization']=`${Session.get('token')}`; //} //获取本......
  • AJAX请求的步骤解析与优化方法
    ajax的请求过程1、新建ajax对象:    IE6不兼容newXMLHttpRequest();    IE6下,ajax对象的兼容方法:        window判断的方法:            varxhr=null;            if(window.XMLHttpRequest){    xhr=newXMLHttpReq......
  • vue中axios请求数据
    首先引入包:yarnaddaxios再导入importaxiosfrom'axios'<template><div><h1>登录页面</h1><form><labelfor="username">用户名:</label><inputtype="text"id="userna......
  • java识别是不是ajax请求
    在JavaWeb应用中,识别是否是一个AJAX请求通常可以通过检查HTTP请求头中的X-Requested-With头字段来实现。如果该字段的值为XMLHttpRequest,则可以认为这是一个AJAX请求。示例代码以下是一个示例,展示了如何在SpringMVC控制器中识别AJAX请求:1.SpringMVC控制器importorg.spring......
  • vue/配置axios(前后端数据连通/api接口的调用)
    1.创建apis文件2.写入调用的api地址且暴露出去。importhttpInstancefrom'@/utils/http';exportfunctiongetHomeNav(){returnhttpInstance({url:'http://10.0.11.91:91/dailyreport/getdailyreportall',})}3.创建文件编写拦截器 代码部分//axio......
  • vue 配置代理 及 axios 请求封装和使用
    一.配置代理- vue.config.js const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({ transpileDependencies:true, //配置代理服务器 devServer:{  proxy:{   '/baidu':{    target:'https://ba......
  • AJAX 02-个人信息设置
     图片上传1.获取图片文件对象2.使用FormData携带图片文件constfd=newFormData()fd.append(参数名,值)3.提交表单数据到服务器,使用图片url网址<!--文件选择元素--><inputtype="file"class="upload"><imgsrc=""alt=""class="......
  • 使用 Axios 配置动态域名的基础 URL 和项目打包
    在Web开发中,我们常常需要根据不同的环境(如开发、测试和生产)配置不同的API基础URL。使用Axios作为HTTP客户端,我们可以通过动态配置基础URL来实现这一目标。本文将介绍如何在Axios中配置动态域名,并提供项目打包的示例。为什么需要动态配置基础URL?在开发过程中,我......
  • Ajax
    Axios对Ajax的封装。简化代码<script>functionget(){//使用axios进行GET请求axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{console.log(result.data);});}functionpost(){//使用axios进行POST请......
  • vue项目之配置本地,测试,生产环境,配置axios.defaults.baseURL,解决跨域问题
    最近在做一个vue项目,想通过不同的命令调用不同环境的api,防止来回手动修改api出错。网上看了好多写的都不全,然后自己突发奇想自己写一篇文章。一、先简单说一下项目搭建1、安装vue脚手架npminstallvue-cli-g2、在硬盘上找一个文件夹放工程用的,在终端中进入该目录cd目录路......