对于 fetch 和 axios 和 Ajax 区别 ?

1.Ajax

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。

用法:

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  dataType: dataType,
  success: function() {},
  error: function() {}
});

优点:

  • 提高了性能和速度:减少了客户端和服务器之间的流量传输,同时减少了双方响应的时间,响应更快,因此提高了性能和速度
  • 交互性好:使用ajax,可以开发更快,更具交互性的Web应用程序
  • 异步调用:Ajax对Web服务器进行异步调用。这意味着客户端浏览器在开始渲染之前避免等待所有数据到达。
  • 节省带宽:基于Ajax的应用程序使用较少的服务器带宽,因为无需重新加载完整的页面
  • 底层使用XMLHttpRequest
  • 拥有开源JavaScript库 : JQuery,Prototype,Scriptaculous等。
  • AJAX通过HTTP协议进行通信

缺点:

  • 增加了设计和开发的时间
  • 比构建经典Web应用程序更复杂
  • Ajax应用程序中的安全性较低(容易收到CSRF和XSS攻击),因为所有文件都是在客户端下载的
  • 可能出现网络延迟的问题
  • 禁用javascript的浏览器无法使用该应用程序
  • 由于安全限制,只能使用它来访问服务于初始页面的主机的信息。如果需要显示来自其他服务器的信息,则无法在AJAX中显示。

2. axios

axios 基于promise用于浏览器和node.js的http客户端

用法:

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

优点:

  • 从node.js创建http请求
  • 在浏览器中创建XMLHttpRequest
  • 支持Promise API
  • 提供了一些并发请求的接口
  • 支持拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御CSRF/XSRF

3.fetch

fetch号称是AJAX的替代品,是在ES6出现的,使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了,参数有点像jQuery ajax。但是,一定记住fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象。(然而问题还是有很多)

用法:

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}

优点:

  • 符合关注分离,没有将输入、输出和用事件来跟踪的状态混杂在一个对象中
  • 更好更方便的写法
  • 更加底层,提供的API丰富(request,response)
  • 脱离了XHR,是ES规范里新的实现方式

缺点:

  • fetch只对网络请求报错,对400,500都当做成功的请求,需要封装去处理
  • fetch默认不会带cookie,需要添加配置项
  • fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject和Promise.race结合setTimeout实现的超时控制并不能阻止请求过程继续在后台执行,造成了量的浪费
  • fetch没有办法原生监测请求的进度,而XHR可以
本文转载于网络 如有侵权请联系删除

相关文章

  • Logrotate入门了解及生产实践原创

    #1,简单了解logrotate在CentOS系统中是默认安装的日志轮替组件,通过如下命令可以看到主配置内容:egrep-v'^$|^#'logrotate.conf weekly rotate4 create dateext include/etc/logrotate.d /var/log/wtmp{ monthly create0664rootutmp minsize1M rotate1 } /var/log/btmp{ missingok monthly create0600rootutmp rotate1 }复制这个配置当中其他内容基本上可以忽略,主要内容是第6行的引用,我们新增一些日志管理策略也都可以在这个目录下创建相关策略来维护。logrorate默认在系统的/etc/cron.daily中存放了一个执行脚本,因此默认情况下脚本将会每天执行一次:$cat/etc/cron.daily/logrotate #!/bin/sh /usr/sbin/logrotate-s/var/lib/logrotate/logrotate.status/etc/logro

  • 如何使用 Tmpwatch/Tmpreaper 删除旧文件

    你可能忘记了删除计算机上某个目录中不再需要的文件的操作。这可能是“下载”或任何其他目录。它可能已经增长了一段时间。即便有足够的存储空间,你也应该删除它们,因为这会在列出文件时降低系统速度。同样,当一个目录中有成千上万个文件时,它可能很会很臃肿。当你不知道要检查的文件名时,很难在特定目录中找到文件。我们可以通过结合使用find命令和一些组合来做到这一点,我们过去已经写过一篇文章。使用Bash脚本在Linux中删除早于“X”天的文件/文件夹今天,我们将向你展示如何在Linux上使用Tmpwatch程序来实现这一目标。什么是tmpwatchtmpwatch会在指定目录中递归删除指定时间段内未被访问的文件。通常,它用于自动清除临时文件系统目录,例如/tmp和/var/tmp。它只会删除空目录、常规文件和符号链接。它不会切换到其他文件系统,并避开了属于根用户的lost+found目录。默认情况下,tmpwatch会根据文件的atime(访问时间)而不是mtime(修改时间)删除文件。你可以在tmpwatch命令中添加其他参数来更改这些行为。警告:请不要在/中运行tmpwatch或tmpreape

  • linux操作系统检测主机是否存在的fping命令

    tcpdump命令是一款sniffer工具,是linux上的抓包工具,嗅探器;它可以打印出所有经过网络接口的数据包的头信息。tcpdump命令工作时先要把网卡的工作模式切换到混杂模式。所以tcpdump命令需要以root身份运行。tcpdump命令是linux下使用最广泛的网络协议分析工具。使用tcpdump命令时,必须精通TCP/IP协议工作原理。语法格式:tcpdump[参数]常用参数:-a尝试将网络和广播地址转换成名称-c<数据包数目>收到指定的数据包数目后,就停止进行倾倒操作-d把编译过的数据包编码转换成可阅读的格式,并倾倒到标准输出-dd把编译过的数据包编码转换成C语言的格式,并倾倒到标准输出-ddd把编译过的数据包编码转换成十进制数字的格式,并倾倒到标准输出-e在每列倾倒资料上显示连接层级的文件头-f用数字显示网际网络地址-F<表达文件>指定内含表达方式的文件-i<网络界面>使用指定的网络截面送出数据包-l使用标准输出列的缓冲区-n不把主机的网络地址转换成名字-N不列出域名-O不将数据包编码最佳化-p不让网络界面进入混杂模式-q快速输出,

  • 如何在SAP CRM WebClient UI上打开外部链接

    CreatedbyJerryWangonJun03,2014在如下customizing里定义一个externalweblink: 2.将externallinkassign到externalgroupCRM-EXT里: 3.tcodeCRMC_UI_PROFILE,将externalgroupnameCRM-EXTassign给functionprofileEXT_WEB_LINKS: 4.登陆webclientui,通过personalization将externallink从Availablelinks加到Displayedlinks: 点击SAPHomePage的超链接即可打开新的external页面

  • vscode配置

    { "editor.fontSize":16, "workbench.colorTheme":"OneDarkPro", "files.autoSave":"afterDelay", "editor.fontFamily":"Hack", "vetur.format.defaultFormatter.html":"js-beautify-html", "vetur.format.defaultFormatter.js":"vscode-typescript", "vetur.format.defaultFormatterOptions":{ "js-beautify-html":{ "wrap_line_length":220, "wrap_attributes":"auto&qu

  • NB-IoT移远BC95调试笔记 01 加网测试

    一、前言移远BC95是最早推出的NB-IoT模块,目前厦门这边网络都已经覆盖了。自己拿个设备来玩玩,这篇笔记先记录下加网测试的心得。本文作者twowinter,转载请注明作者:http://blog.csdn.net/iotisan/ 二、加网总体思路加网思路是参考《BC95_AT_Commands_Manual》中的“9.1.AttachNetwork”来做的。AT+NBAND?//Querytheband +NBAND:8 OK AT+CFUN?//Valueis1. +CFUN:1 OK AT+CIMI//QuerytheIMSInumber. 460012345678969 OK AT+CSQ//Querythesignalstrength. +CSQ:21,99 OK AT+NUESTATS//Querythemodulestatus. Signalpower:-663 Totalpower:-632 TXpower:-35 TXtime:1572 RXtime:17847 CellID:27447553 DLMCS:0 ULMCS:0 DCIMCS:2 ECL:0

  • Elasticsearch 6.x版本全文检索学习之倒排索引与分词、Mapping 设置

    Beats,Logstash负责数据收集与处理。相当于ETL(ExtractTransformLoad)。 Elasticsearch负责数据存储、查询、分析。 Kibana负责数据探索与可视化分析。 1、Elasticsearch的常见术语。注意:Elasticsearch6.x版本以后概念发生了变化。 2、索引Index:由具有相同字段的文档列表组成。索引Index是文档的集合。相当于数据库中的数据表。Elasticsearch6.x版本以后,一个索引Index下面最多只能建一个Type或者未来没有Type了。索引中存储具有相同结构的文档(Document)。相当于数据表,数据表中有schema的概念,数据表有自己的表结构的定义。而Index的mapping相当于数据表的schema的概念,Index也需要定义字段名称和类型的。  每个索引都有自己的mapping定义,用于定义字段名和类型。一个集群可以有多个索引。3、文档Document:用户存储在es中的数据文档。es中存储的最小单元。相当于数据库中的一行数据。每个文档都有唯一的id标识,可以自行指定或者es自动生成。JsonO

  • C语言根据协议分割获取字符串单元

    第一次用MarkDown写公众号文章,希望多多支持,技术也需要升级!协议做如下规定规定数据协议:序列号长度状态字数据长度数据1数据2数据3复制以空格作为数据单元。 例如:000010000713345672635832698 (1)(2)(3)(4)(5)(6)(7)复制以上各个编号字段代表的基本含义如下:(1)00001就是数字1,即代表序列号为1 (2)00007就是数字7,即代表长度为7 (3)1代表状态字 (4)3代表数字长度 (5)34567代表数据1 (6)26358代表数据2 (7)32698代表数据3复制这样就找到规律了,假设数据都为整型或者负整型,我们就可以根据这个规则来实现以下代码:#include<stdio.h> #include<stdlib.h> #include<string.h> //根据空格拆分字符串 intpartition(char*src,char*par,intpos) { inti,j; i=pos; //取得一个非空字符 while(src[i]=='') ++i; if(

  • 【科普】什么是HTTP

    周末一大早,我正在电脑前面浏览一些技术网站,突然女朋友大喊起来:哇,杭州又下大雪啦,快来看啊。我并没有理她,于是她跑过来拉我。图,雪后杭州上次杭州下雪的时候,[给女朋友介绍了什么是RPC],这次下雪将要介绍的HTTP和RPC也有点关系,都是通信方式。什么是HTTP协议HTTP是HyperTextTransferProtocol的缩写,中文翻译为超文本传输协议。他是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。 说的简单点,其实HTTP协议主要就是用来进行客户端和服务器之间进行通信的标准协议。HTTP主要规定了客户端如何与服务器建立链接、客户端如何从服务器请求数据、服务器如何响应请求,以及最后连接如何关闭。当我们在浏览器中输入一个url,如http://www.taobao.com,然后按下回车,一直到页面显示淘宝网的首页的过程就是一次HTTP的网络通信。这次通信过程中,我们查看淘宝使用的电脑就是客户端,而搭建淘宝网的那些计算机机器就是服务器。这个过程有点像老板通过电话给员工下达命令。当我们在浏览器输入网址并按下回车之后,共发生了以下四件事:1

  • iOS开发常用之网络、网页

    网络相关网络连接AFNetworking-ASI不升级以后,最多人用的网络连接开源库,iOS的网络编程之AFNetworking使用,iOS的开发下载文件速度计算,AFNetworking3.0迁移指南,AFNetworking2.0源码解析<一>,AFNetworking2.0源码解析<二>,AFNetworking源码解析<三>,AFNetworking源码解析<四>。Alamofire.swift-Alamofire是AFNetworking的作者mattt新写的网络请求的swift库。Alamofire最佳实践AlamofireObjectMapper.swift-将AlamofireJSON响应数据转为swift对象。RxAlamofire.swift-为Alamofire提供函数响应式(FRP)调用接口,以优雅的方式使用Alamofire进行网络请求。YTKNetwork-是基于AFNetworking封装的iOS网络库,提供了更高层次的网络访问抽象。相比AFNetworking,YTKNetwork提供了以下更高级的功能:按

  • 早鸟票倒计时最后一周:领域驱动设计实战工作坊——金融科技专场(上海站)

    随着互联网服务及FinTech创新的发酵,中国金融市场正在经历着一波变革。这场变革的核动力毫无疑问来自于科技的发展和引领,而软件构建的生态是现代科技能够为我们所用的基石。如何构建高效响应市场变化的软件生态成为了每一家金融机构必须完成的优先级任务。金融IT从过去的成本中心必然需要转型成为发展引擎,而这样的转型需要我们的软件设计者们重新思考软件架构。在云和微服务的时代,领域驱动设计(Domain-DrivenDesign)成为了我们必须拥抱的架构实践。领域驱动设计的方法将帮助您打通从业务需求到软件架构的端到端过程,并通过持续的统一语言实践,帮助整个组织建立更高的市场响应能力。本次工作坊邀请ThoughtWorks咨询师悉数登场,将带领大家从业务出发、面向业务变化完成现代架构设计,带您解剖软件复杂度及应对之策。【工作坊说明】讲师介绍:来自ThoughtWorks咨询团队的讲师们内容简介:微服务(Microservices)成为了追求高市场响应力产品团队的必修课,如何有效划分微服务成为了服务化设计的第一步。很多团队在划分过程中缺少系统化的设计方法,为后续的实施埋下了巨大的隐患,最终会造成整体架

  • 程序员的鄙视链

    最近这几年在世界各地突然吹起了一股全民写程序的风潮,连美国总统欧巴马都在写JavaScript了,但是身为一介靠写程序(以及在上班时间胡乱上网)来谋生的developer(所谓的developer就是「软件工程师」的比较潮的说法),想要提醒那些想学习写程序的人一件重要的事:慎选你的第一个程序语言。在软件工程师(中国叫做「程序员」或「码农」)的圈子里,文人相轻的现象可是非常严重的,在程序设计的各个领域里都有着错综复杂的「鄙视链」。从程序语言、编辑器、平台到{是写在if的同一行还是下一行,不同阵营的人都习惯鄙视来鄙视去。而其中「你用什么程序语言?」更是大家最热衷的一条鄙视链,所以对于刚踏入程序设计领域的初学者来说,万一程序语言选得不好,可是会一开始就落入鄙视链的底层啊。软件工程师的鄙视链到底有多惨烈、多残酷呢?程序语言篇懂FunctionalProgramming的工程师鄙视老是把设计模式挂在嘴边的工程师,老是把设计模式挂在嘴边的工程师鄙视会说「你这样写就不OO了啊」的工程师,会说「你这样写就不OO了啊」的工程师鄙视会说「哈?什么物件导向?不是把重复的code写成一个function就好了

  • 分子对接简明教程 (4)

    文件格式解释PDB文件(详细格式描述)基本信息部分HEADER记录:包括分子的分类、提交日期、PDBIDTITLE记录:为该结构的描述,如果有多行,除第一行外,其它行有连续的数字标示。COMPND记录:包含分子数目、名字、链特征、分子是如何获得的等。SOURCE记录:大分子的生物或化学来源KEYWDS记录:关键字EXPDTA记录:实验信息JRNL记录:文献引用信息REMARK记录:更为丰富的记录信息HEADERHYDROLASE(ACIDPROTEINASE)31-MAR-951HSG TITLECRYSTALSTRUCTUREAT1.9ANGSTROMSRESOLUTIONOFHUMAN TITLE2IMMUNODEFICIENCYVIRUS(HIV)IIPROTEASECOMPLEXEDWITHL- COMPNDMOL_ID:1; COMPND2MOLECULE:HIV-1PROTEASE; COMPND3CHAIN:A,B; COMPND5ENGINEERED:YES; COMPND6OTHER_DETAILS:NY5ISOLATE SOURCEMOL_ID:1; SOURCE2

  • NuxtJs 3.x 实战记录

    ByNoxxxxfromhttps://www.noxxxx.com/?post_type=post&p=2104 欢迎分享与聚合,尊重版权,可以联系授权WindiCSS如果使用windi.config.ts配置文件,nuxt.config.ts中就不要填写配置,否则会导致windi.config.ts的配置不生效数据相应式列表通过接口数据返回渲染,当通过html自定义属性来控制图片中的checkbox的选中态时,需要把接口数据主动用Vue的相应式函数重新定义,比如用reactive(data)来重新声明,data为接口返回函数,否则数据不会动态切换。

  • tensorflow 13:多gpu 并行训练

    多卡训练模式: 进行深度学习模型训练的时候,一般使用GPU来进行加速,当训练样本只有百万级别的时候,单卡GPU通常就能满足我们的需求,但是当训练样本量达到上千万,上亿级别之后,单卡训练耗时很长,这个时候通常需要采用多机多卡加速。深度学习多卡训练常见有两种方式,一种是数据并行化(dataparallelism),另外一种是模型并行化(modelparallelism)。  深度模型训练方法: 深度学习模型的训练是一个迭代的过程,在每一轮迭代过程中,前向传播算法会根据当前参数的取值,计算出在一小部分训练数据上的预测值,然后反向传播算法,再根据损失函数计算参数的梯度并且更新参数。 一、数据并行化 数据并行化:每个GPU上面跑一个模型,模型与模型之间结构参数相同,只是训练的数据不一样,每个模型通过最后的loss计算得到梯度之后,再把梯度传到一个parameterserver(PS)上进行参数平均averagegradient,然后再根据averagegradient更新模型的参数。 深度学习算法由于数据量非常大、算法复杂度高等特点,常常需要采用并行机制。###常用的并行化深度学习模

  • 【2022-11-12】搞好关系

    20:00 过去事已过去了,未来不必预思量。只今只道只今句,梅子熟时栀子香。                                                  ——《山居诗》 何太一直很在意我在社会上的人脉关系。怕我躺平在家,怕我遇事后没有一点人际关系可以帮助,怕以后家里需要办事找不到后门通道,怕自己没有资源而逐渐被社会淘汰。   我也是在一个没有关,没有背景,没有人脉的务农家庭长大。父亲是一个内向、保守、厚实的人,想从他身上找点社会关系上的成就感,门都没有。也因此被母亲“小

  • 变量提升和函数提升的意义

    先举个例子: functiontest(){ foo(); functionfoo(){//函数声明形式定义函数 console.log("成功"); } } test(); 复制 结果:成功 functiontest(){ foo(); varfoo=functionfoo(){//函数表达式形式定义函数 console.log("成功"); } } test(); 复制 结果:TypeError:fooisnotafunction 原因: 解析器在向执行环境中夹在数据时,对函数声明和函数表达式并非一视同仁。解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问)。说白了就是,用函数声明形式定义的函数支持变量提升,而函数表达式形式的不行。 个人理解: 如果能够变量提升,先用了再说,然后再看说明,比如例子一。先调用foo(),接着才声明functionfoo()复制

  • Windows系统 PHPstudy Apache无法启动的解决办法

    最近在配置phpstudy的时候,出现是phpstudyapache无法启动的情况,其实也不是一点也不能启动,而且apache的启动状态亮一下就自动关闭了。 这样情况大部分小伙伴应该都遇到过,以前看过phpstudy官方的说法 phpStudy启动失败,原因一是防火墙拦截,二是80端口已经被别的程序占用,如IIS,迅雷等;三是没有安装VC9运行库,php和apache都是VC9编译。 解决以上三个问题,基本上都是可以一次安装完成的。 但是这次配置的时候这些问题都排除了,苦苦找不到解决办法,后来重新配置Apache,然后配置站点,一切都是那么顺利。 为什么之前不行呢? 忽然想到如果是在apache可以正常启动之前,就配置了站点的话,apache会无法识别到添加的站点, 比如我之前的这种情况,在apache还没启动的时候,就立刻新建了一个站点导致apache无法识别站点的目录。 解决的方法就是在站点域名设置里面,删掉这个站点,apache就可以正常启动了,等apache正常启动后,再添加站点就没问题了。 经过多次测试,还真是这个情况。 这还真是奇葩问题,记下来提醒自己,哈哈 下边附上VC9

  • 微擎系统搭建

    前言 时隔一年半,再次接触微信公众平台开发。相比于掌上大学、圈里、微站ABC、图灵机器人、小i机器人、FAQ免费智能问答机器人、V5KF、赛科智能机器人,个人更喜欢模块定制的微擎和捷微,源码在自己手里,想怎么搞怎么搞。 本篇短文,就记录下微擎系统搭建的具体步骤。 准备条件 首先,你要有一个公网服务器,服务器上有PHP和MySQL的环境,官方推荐linux(centOS)+nginx+php5.3,mysql5.6。其次,你要有远程操作服务器的工具,推荐使用xshell和xftp。最后,你需要从微擎官网下载微擎的源码。 服务器 云擎 先说国内的,BAE、CAE、JAE、SAE等,上次做微信开发时,它们还是免费的,现在有些开始收费了。 再说国外的,GAE、OpenShift、heroku、appfog、mongolab等,但是国内的访问速度一般,要么直接被墙。其中,OpenShift是我最喜欢的,以前使用WordPress在上面搭建了一个博客。 云擎的用法简单,基本都是建立某个类型的应用,然后把代码部署上去。因为云擎有各种限制,比如PHP版本限制、文件大小限制、访问流量限制等,所以不建议使

  • 文件上传和下载

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现。   对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用Servlet获取上传文件的输入流然后再解析里面的请求参数是比较麻烦,所以一般选择采用apache的开源工具common-fileupload这个文件上传组件。这个common-fileupload上传组件的jar包可以去apache官网上面下载,也可以在struts的lib文件夹下面找到,struts上传的功能就是基于这个实现的。common-fileupload是依赖于common-io这个包的,所以还需要下载这个包。 一、开发环境搭建   创建一个FileUploadAndDownLoad项目,加入Apache的commons-fileupload文件上传组件的相关Jar包,如下图所示:    二、实现文件上传 2.1、文件上传页面和消息提示页面   upload.jsp页面的代码如下: 1<%@pagelanguage="java"pageEncoding="UTF-

  • endnote x7

    本帖隐藏的内容 本地下载1(海外线路) 本地下载2(快) 同一个文件中1,但不同的名称为您提供方便“的EndNoteX7批量许可Mac.dat”[size=14.2857151031494px]1。打开终端输入  sudosu获取管理员权限  提示输入密码[size=14.2857151031494px]2。复制“EndNoteX7VolumeLicenseMac.dat”到“/Applications/EndNoteX7/”[size=14.2857151031494px]B)重命名“的EndNoteX7VolumeLicenseMac.dat”到“.license.dat” [size=14.2857151031494px]这一步无法修改需要用到终端,在终端里输入  cd/Applications/EndNote\X7/[size=14.2857151031494px]执行命令  mvEndNote\X7\Volume\License\Mac.dat.license.dat[size

相关推荐

推荐阅读