axios ajax fetch 区别以及优缺点
将jQuery的ajax、axios和fetch做个简单的比较,所谓仁者见仁智者见智,最终使用哪个还是自行斟酌
1.jQuery ajax
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {},
error: function () {}
});
优缺点:
- 本身是针对MVC的编程,不符合现在前端MVVM的浪潮
- 基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案
- JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务)
2.axios
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 请求
- 支持 Promise API
- 客户端支持防止CSRF
- 提供了一些并发请求的接口(重要,方便了很多的操作)
3.fetch
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规范里新的实现方式
- 1)fetchtch只对网络请求报错,对400,500都当做成功的请求,需要封装去处理
- 2)fetch默认不会带cookie,需要添加配置项
- 3)fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行,造成了量的浪费
- 4)fetch没有办法原生监测请求的进度,而XHR可以
为什么要用axios?
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:
- 从浏览器中创建 XMLHttpRequest
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止CSRF/XSRF
axios ajax fetch 区别以及优缺点的更多相关文章
- ajax、axios、fetch区别及优缺点
将jQuery的ajax.axios和fetch做个简单的比较,所谓仁者见仁智者见智,最终使用哪个还是自行斟酌 1.jQuery ajax $.ajax({ type: 'POST', url: ur ...
- axios ajax fetch 区别
请求方式千千万,axios是一种对ajax的封装,fetch是一种浏览器原生实现的请求方式,跟ajax对等
- axios与ajax的区别及优缺点
区别:axios是通过Promise实现对ajax技术的一种封装,就像jquery对ajax的封装一样,简单来说就是ajax技术实现了局部数据的刷新,axios实现了对ajax的封装,axios有的a ...
- axios和fetch区别对比
axios axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' ...
- Jquery ajax, Axios, Fetch区别
1. Jquery ajax, Axios, Fetch区别之我见 2. ajax.axios.fetch之间的详细区别以及优缺点
- Jquery ajax, Axios, Fetch区别之我见(转载)
来源:https://segmentfault.com/a/1190000012836882 引言 前端技术真是一个发展飞快的领域,我三年前入职的时候只有原生XHR和Jquery ajax,我们还曾被 ...
- vue-d2admin-axios异步请求登录,先对比一下Jquery ajax, Axios, Fetch区别
先说一下对比吧 Jquery ajax, Axios, Fetch区别之我见 引言 前端技术真是一个发展飞快的领域,我三年前入职的时候只有原生XHR和Jquery ajax,我们还曾被JQuery 1 ...
- 异步请求xhr、ajax、axios与fetch的区别比较
目录 1. XMLHttpRequest对象 2. jQuery ajax 3. axios 4. fetch 参考 why: 为什么会出现不同的方法呢? what: 这些都是异步请求数据的方法.在不 ...
- react中使用Ajax请求(axios,Fetch)
React本身只关注于界面, 并不包含发送ajax请求的代码,前端应用需要通过ajax请求与后台进行交互(json数据),可以使用集成第三方ajax库(或自己封装) 常用的ajax请求库 jQuery ...
随机推荐
- Linux的基本目录结构
- Hive on Spark和Spark sql on Hive,你能分的清楚么
摘要:结构上Hive On Spark和SparkSQL都是一个翻译层,把一个SQL翻译成分布式可执行的Spark程序. 本文分享自华为云社区<Hive on Spark和Spark sql o ...
- java运算符1
一:算术运算符(+, -, *, /, ++, --, ) 1.+号 :可以做加法运算(加号两边为字符和数字).正数表示 字符串连接符:只要+号两边其中有一边有字符串,输出时加号就充当连接 ...
- JMeter_jmeter-plugins插件的安装使用
一.安装JMter Plugins 1.官网下载 JMeter Plugins 的jar包 2. 将下载的jar包复制到 %JMETER_HOME%\lib\ext 目录下 3. 启动 JMeter ...
- mysql数据库安装教程
centos 7安装mysql教程 一.卸载mariadb 注:卸载mariadb,否则安装Mysql会出现冲突 [root@mysqlmaster ~]# rpm -qa |grep mariadb ...
- 微信小程序css继承
在微信小程序里写的全局样式,pages里的组件是可以继承的,但是components里只能继承font和color属性.
- 基于springboot的定时任务实现(非分布式)
1. 核心注解 在springboot项目中我们可以很方便地使用spring自己的注解@Scheduled和@EnableScheduling配合来实现便捷开发定时任务. @EnableSchedul ...
- Docker 与 K8S学习笔记(十 二)容器间数据共享
数据共享是volume的关键特性,今天我们来看一下通过volume实现容器与host.容器与容器之间共享数据. 一.容器与host共享数据 在上一篇中介绍到的bind mount和docker man ...
- [C# 学习]窗体间调用控件
一.方法1: 假如有两个窗体,Form_A和Form_B,每个窗体里都有一个按键,Button_A和Button_B,要实现单击Button_A显示窗体B,那么窗体A中Buttom_A的单击事件的程序 ...
- 2022GDUT寒训专题一J题
题目 题面 给你一个长度为 n的整数序列{A1,A2,⋯,A**n},要求从中找出一段连续的长度不超过 m的非空子序列,使得这个序列的和最大. 输入格式 第一行为两个整数 n,m: 第二行为 n个用空 ...