前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >前后端数据交互(六)——ajax 、fetch 和 axios 优缺点及比较

前后端数据交互(六)——ajax 、fetch 和 axios 优缺点及比较

作者头像
呆呆
修改于 2021-10-01 05:54:41
修改于 2021-10-01 05:54:41
3K00
代码可运行
举报
文章被收录于专栏:centosDaicentosDai
运行总次数:0
代码可运行

一、ajax、fetch 和 axios 简介

1.1、ajax

ajax是最早出现发送后端请求的技术,属于原生 js 。ajax使用源码,请点击《原生 ajax 请求详解》查看。一般使用之前,我们都需要把它们封装使用,就以 jQuery 的 ajax 为例。

封装的 ajax 如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const $ = {};
$.ajax = (obj)=>{
 var xhr;
 if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
 } else if (window.ActiveXObject) { // IE
  try {
   xhr = new ActiveXObject('Msxml2.XMLHTTP');
  } catch (e) {
   try {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
   } catch (e) {}
  }
 }
 if (xhr) {
  xhr.onreadystatechange = () =>{
   if (xhr.readyState === 4) {
    if (xhr.status === 200) {
     obj.success(xhr.responseText); //返回值传callback
    } else {
     //failcallback
     obj.error('There was a problem with the request.');
    }
   } else {
    console.log('still not ready...');
   }
  };
  xhr.open(obj.method, obj.url, true);
  // 设置 Content-Type 为 application/x-www-form-urlencoded
  // 以表单的形式传递数据
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send(util(obj.data));//处理body数据
 }
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//处理数据
 const util = (obj)=>{
 var str = ''
 for (key in obj){
  str += key +'='+obj[key]+'&'
  }
  return str.substring(0,str.length-1)
 }    
}

封装完成,开始使用的时候你会发现,body和header处理得有些乱,还有回调地狱的问题,所以我们出现了新的 fetch 请求技术。

1.2、fetch

fetch 首先解决了回调地狱的问题,他返回的结果是一个 Promise 对象,对 Promise 不熟的可点击《Promise详解》

fetch 使用如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
fetch(url,options).then(response=>{
// handle HTTP response
},error=>{
// handle network error
})

fetch 发送网络请求时,可以传输任意数据格式,非常简便。但是 fetch 的超时、终止取消并不方便,只能通过取消 Promise 来完成,如果有多个 fetch 请求时,更难处理。除此之外,fetch 是比较新的技术,低版本浏览器和IE浏览器支持性不好。

1.3、axios

axios 功能非常强大,包括 取消请求,超时处理,进度处理等等。但它的本质还是 ajax,基于 Promise 进行封装,既解决回调地狱问题,又能很好地支持各个浏览器。

axios使用代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
axios.post('/user', {
 firstName: 'Fred',
 lastName: 'Flintstone'
})
.then(function (response) {
 console.log(response);
})
.catch(function (error) {
 console.log(error);
});

二、ajax、fetch、axios的优缺点

2.1、ajax 的优缺点:

  • 属 js 原生,基于XHR进行开发,XHR 结构不清晰。
  • 针对 mvc 编程,由于近来vue和React的兴起,不符合mvvm前端开发流程。
  • 单纯使用 ajax 封装,核心是使用 XMLHttpRequest 对象,使用较多并有先后顺序的话,容易产生回调地狱。

2.2、fetch 的优缺点:

  • 属于原生 js,脱离了xhr ,号称可以替代 ajax技术。
  • 基于 Promise 对象设计的,可以解决回调地狱问题。
  • 提供了丰富的 API,使用结构简单。
  • 默认不带cookie,使用时需要设置。
  • 没有办法检测请求的进度,无法取消或超时处理。
  • 返回结果是 Promise 对象,获取结果有多种方法,数据类型有对应的获取方法,封装时需要分别处理,易出错。
  • 浏览器支持性比较差。

2.3、axios的优缺点:

  • 在浏览器中创建XMLHttpRequest请求,在node.js中创建http请求。
  • 解决回调地狱问题。
  • 自动转化为json数据类型。
  • 支持Promise技术,提供并发请求接口。
  • 可以通过网络请求检测进度。
  • 提供超时处理。
  • 浏览器兼容性良好。
  • 有拦截器,可以对请求和响应统一处理。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
ajax和fetch、axios的优缺点以及比较
前端是个发展迅速的领域,前端请求自然也发展迅速,从原生的XHR到jquery ajax,再到现在的axios和fetch。
前端迷
2018/10/29
9.4K0
ajax和axios、fetch的区别
传统 Ajax 指的是 XMLHttpRequest(XHR), 最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱。 JQuery ajax 是对原生XHR的封装,除此以外还增添了对JSONP的支持。经过多年的更新维护,真的已经是非常的方便了,优点无需多言;如果是硬要举出几个缺点,那可能只有:
smy
2019/04/09
1.6K0
ajax和axios、fetch的区别
前后端数据交互(二)——原生 ajax 请求详解
通过后台与服务器进行少量数据交换,ajax可以使网页实现异步更新。也就是在不需要重新加载整个网页的情况下,能够更新部分网页的技术。传统的网页不使用ajax,如果需要更新内容,必须重新加载整个页面。
呆呆
2021/09/30
1.9K0
ajax、axios、fetch三者之间
符合关注分离,没有将输入、输出和用事件来跟踪的状态混杂在一个对象里 更好更方便的写法 更加底层,提供的API丰富(request, response) 脱离了XHR,是ES规范里新的实现方式 1)fetchtch只对网络请求报错,对400,500都当做成功的请求,需要封装去处理 2)fetch默认不会带cookie,需要添加配置项 3)fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行,造成了量的浪费 4)fetch没有办法原生监测请求的进度,而XHR可以
乐心湖
2020/07/31
4050
Ajax,Promise,Fetch,Axios的区别
在js中,通常情况下代码都是自上而下同步执行的,在同步执行代码时,如果有一段代码执行的速度特别慢,会造成程序卡顿的后果。再者常见的就是向服务器发送请求,需要花费时间接受服务器返回的响应结果,对数据进行处理,因为网速和加载速度慢的原因,会带来不好的用户体验。从而引入异步处理,使代码无需等待,继续处理其他代码,直到其他程序处理完毕,js再继续之前的工作
qiangzai
2022/07/30
2.4K1
Ajax,Promise,Fetch,Axios的区别
axios、XHR、XML、AJAX和Fetch分不清怎么办?
axios 是一个轻量的HTTP客户端,它基于 XMLHttpRequest 服务(浏览器)来执行 HTTP 请求,支持丰富的配置,支持 Promise,支持浏览器端和 Node.js 端。在服务器端它使用本机 node.js http模块,而在客户端(浏览器)它使用 XMLHttpRequests。
泯泷、
2024/03/11
2280
前后端数据交互(五)——什么是 axios?
axios是基于 Promise 的 ajax 封装库,也是前端目前最流行的 ajax 请求库。简单地说发送 get、post 请求,是一个轻量级的库,使用时可直接引入。
呆呆
2021/09/30
1.7K0
前后端数据交互(三)——ajax 封装及调用
有很多框架已经将 ajax 封装,需要的时候只需要调用就好,比如 jquery 是最常用的。我们为什么还需要学习 ajax 的封装呢?首先加强我们对ajax的认识,其次如果只是因为ajax请求需要引入框架,我们可以自己封装一个,这样就不需要引入多余的框架了。
呆呆
2021/09/30
9320
前后端数据交互(四)——fetch 请求详解
fetch 是 XMLHttpRequest 的升级版,使用js脚本发出网络请求,但是与 XMLHttpRequest 不同的是,fetch 方式使用 Promise,相比 XMLHttpRequest 更加简洁。所以我们告别XMLHttpRequest,引入 fetch 如何使用?
呆呆
2021/09/30
3.4K0
【vue学习】axios
文章出自https://www.jianshu.com/p/d771bbc61dab
kirin
2020/05/09
1.3K0
Ajax,jQuery ajax,axios和fetch介绍、区别以及优缺点
三年前入职的时候还是一个只会使用Ajax和Jquery Ajax的菜鸟,由于早期Jquery不支持大文件请求的问题,要么拆分文件,要么用XHR~今天总结一篇数据请求的 进入今天的世界吧~~~
用户1462769
2019/09/17
2.5K0
Ajax,jQuery ajax,axios和fetch介绍、区别以及优缺点
只知道ajax?你已经out了
随着前端技术的发展,请求服务器数据的方法早已不局限于ajax、jQuery的ajax方法。各种js库已如雨后春笋一般,蓬勃发展,本文主要想介绍其中的axios和fetch。
前端林子
2018/11/17
3.7K4
只知道ajax?你已经out了
对于 fetch 和 axios 和 Ajax 区别 ?
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
青梅煮码
2023/01/16
8960
【JavaWeb】学习笔记——Ajax、Axios
AJAX(Asynchronous JavaScript And XML):异步的JavaScript 和 XML
鸡先生
2022/10/29
8900
【JavaWeb】学习笔记——Ajax、Axios
XHR,ajax,axios,fetch傻傻分不清?
AJAX 和 Fetch都可以访问和操纵 HTTP 管道(发出HTTP请求与接收HTTP响应),是解决动态网页的技术方案。
娜姐
2021/11/24
1.9K0
vue-d2admin-axios异步请求登录,先对比一下Jquery ajax, Axios, Fetch区别
前端技术真是一个发展飞快的领域,我三年前入职的时候只有原生XHR和Jquery ajax,我们还曾被JQuery 1.9版本版本以下不支持大文件请求这个问题卡了半天(最后自己写了原生的XHR请求)。一晃眼,JQuery ajax早已不能专美于前,axios和fetch都已经开始分别抢占“请求”这个前端高地。本文将会尝试着阐述他们之间的区别,并给出自己的一些理解。
landv
2019/07/01
2.6K0
vue-d2admin-axios异步请求登录,先对比一下Jquery ajax, Axios, Fetch区别
前端架构师之01_JavaScript_Ajax
响应头用于告知客户端本次响应的基本信息,包括服务器程序名、内容的编码格式、缓存控制等。
张哥编程
2024/12/13
2160
Ajax
什么是Ajax? Ajax是一种可以与服务器交换数据并更新部分页面内容,同时可以在不让整个网页重新加载的情况下更新网页的一种技术 Ajax请求过程: 1:创建一个异步对象 var xmlHttp = new XMLHttpRequest(); 2:设置请求方式和请求地址 /* 参数顺序,描述 (1)method:请求的类型;GET 或 POST (2)url:文件在服务器上的位置 (3)async:true(异步)或 false(同步) (一般为true,因ajax的精髓就是
jinghong
2020/05/09
6K0
Web基础知识
响应头用于告知客户端本次响应的基本信息,包括服务器程序名、内容的编码格式、缓存控制等。
张哥编程
2024/12/13
3570
前后端交互的弯弯绕绕
🆗,收拾一下心情让我们来聊一聊AJax吧,随着前端的飞速发展,前后的交互也发生了天翻地覆的变化:
Java_慈祥
2024/08/03
2670
前后端交互的弯弯绕绕
相关推荐
ajax和fetch、axios的优缺点以及比较
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验