原生请求 js、jquery封装的ajax请求、axios请求与fetch请求区别与优缺点
原生JS请求
现代浏览器,最开始与服务器交换数据,都是通过XMLHttpRequest对象。它可以使用JSON、XML、HTML和text文本等格式发送和接收数据。
首先我们先把原生的请求封装一下:
xmlhttp=new XMLHttpRequest()
function obj2str(data) {
data = data || {}; // 如果没有传参, 为了添加随机因⼦,必须⾃⼰创建⼀个对象
data.t = new Date().getTime();
var res = [];
for (var key in data) {
//在URL中是不可以出现中⽂的,如果出现了中⽂需要转码,可以调⽤encodeURIComponent⽅法,URL中
res.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
}
return res.join("&");
} function ajax(option) {
var str = obj2str(option.data);//key=value&key=value;
var xmlhttp, timer;
if (option.type.toLowerCase() === "get") {//toLowerCase将⼤写转化为⼩写
xmlhttp.open(option.type, option.url + "?" + str, true)
xmlhttp.send();
} else {
xmlhttp.open(option.type, option.url, true);
//注意点:以下代码必须放在open和send之间
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(str);
}
xmlhttp.onreadystatechange = function (ev2) {
if (xmlhttp.readyState === 4) {
clearInterval(timer);
//判断是否请求成功(Http状态码⼤于等于200,且⼩于300,和状态码等于304为请求成功)
if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
option.success(xmlhttp);
} else {
option.error(xmlhttp);
}
}
};
if (option.timeout) {
timer = setInterval(function () {
console.log("中断请求");
xmlhttp.abort();
clearInterval(timer);
}, option.timeout);
}
}
使用:
ajax({
url:"http://server-name/login",
type:'post',
data:{
username:'username',
password:'password'
},
dataType:'json',
timeout:10000,
contentType:"application/json",
success:function(data){
。。。。。。//服务器返回响应,根据响应结果,分析是否登录成功
},
//异常处理
error:function(e){
console.log(e);
}
})
优点:
- 不重新加载页面的情况下更新网页
- 在页面已加载后从服务器请求/接收数据
- 在后台向服务器发送数据。
缺点:
- 使用起来也比较繁琐,需要设置很多值。
- 早期的IE浏览器有自己的实现,这样需要写兼容代码。
Jq中的ajax:
为了更快捷的操作DOM,并且规避一些浏览器兼容问题,产生了jQuery
。它里面的AJAX
请求也兼容了各浏览器,可以有简单易用的方法$.get
,$.post
。简单点说,就是对XMLHttpRequest
对象的封装。
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {},
error: function () {}
})
优点:
- 对原生
XHR
的封装,做了兼容处理,简化了使用。 - 增加了对
JSONP
的支持,可以简单处理部分跨域。
缺点:
- 如果有多个请求,并且有依赖关系的话,容易形成回调地狱。
- 本身是针对MVC的编程,不符合现在前端MVVM的浪潮。
- ajax是jQuery中的一个方法。如果只是要使用ajax却要引入整个jQuery非常的不合理。
Axios:
Axios
是一个基于promise
的HTTP
库,可以用在浏览器和 node.js
中。它本质也是对原生XMLHttpRequest
的封装,只不过它是Promise的实现版本,符合最新的ES规范。
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'liu',
lastName: 'weiqin'
}
})
.then(res => console.log(res))
.catch(err => console.log(err))
优点:
- 从浏览器中创建
XMLHttpRequests
- 从
node.js
创建http
请求 - 支持
Promise
API - 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换
JSON
数据 - 客户端支持防御
XSRF
缺点:
- 只持现代代浏览器.
fetch:
Fetch API
提供了一个 JavaScript
接口,用于访问和操作HTTP
管道的部分,例如请求和响应。它还提供了一个全局fetch()
方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。fetch
是低层次的API,代替XHR
,可以轻松处理各种格式,非文本化格式。可以很容易的被其他技术使用,例如Service Workers
。但是想要很好的使用fetch
,需要做一些封装处理。
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
fetch
目前遇到的问题:
fetch
只对网络请求报错,对400
,500
都当做成功的请求,需要封装去处理fetch
默认不会带cookie
,需要添加配置项。fetch
不支持abort
,不支持超时控制,使用setTimeout
及Promise.reject
的实现超时控制并不能阻止请求过程继续在后台运行,造成了流量的浪费。fetch
没有办法原生监测请求的进度,而XHR
可以。
请注意,fetch规范与jQuery.ajax()主要有两种方式的不同,牢记: -. 当接收到一个代表错误的 HTTP 状态码时,从 fetch()返回的 Promise 不会被标记为 reject, 即使该 HTTP 响应的状态码是 404 或 500。相反,它会将 Promise 状态标记为 resolve (但是会将 resolve的返回值的 ok 属性设置为 false ),仅当网络故障时或请求被阻止时,才会标记为 reject。 -. 默认情况下,fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session,则会导致未经认证的请求(要发送 cookies,必须设置 credentials 选项)。
原生请求 js、jquery封装的ajax请求、axios请求与fetch请求区别与优缺点的更多相关文章
- jQuery 封装的ajax
jquery封装的ajax 具体操作: $.get(url [,data] [,fn回调函数] [, dataType]); data:给服务器传递的数据,请求字符串 .json对象 都可以设 ...
- Jquery封装的ajax的使用过程发生的问题
Jquery封装的ajax的使用过程发生的问题 今天在做项目的时候使用到了ajax来完成项目前后端数据交互,在之后发现在前端没有数据显示,而后端数据确实存在,在多次检查代码之后,发现代码并不存在问题, ...
- Jquery封装的Ajax
$.get方法 语法: $.get(url,data,function(e){ //e就是服务器返回的数据 },dataType); 四个参数: url: 请求的服务器地址 data: 发送给服务器的 ...
- jquery 封装的ajax调用
(function(){ var Ploy = { Config: { ajaxUrl: "/ajax/ploy.ashx" ...
- React Native 网络请求封装:使用Promise封装fetch请求
最近公司使用React作为前端框架,使用了异步请求访问,这里做下总结: React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRe ...
- Ajax详解及其案例分析------如何获得Ajax对象,使用Ajax对象发送GET和POST请求,校验用户名,POST和GET请求时的乱码处理,实现级联的下拉列表
本节主要内容预览: 1 获得Ajax对象 2 使用Ajax对象发送GET请求 3 使用Ajax对象发送POST请求 4 使用Ajax校验用户名 5 POST请求时的乱码处理 6 GET请求时的乱码处理 ...
- Vuex、axios、跨域请求处理和import/export的注意问题
一.Vuex 1.介绍 vuex是一个专门为Vue.js设计的集中式状态管理架构. 对于状态,我们把它理解为在data中需要共享给其他组件使用的部分数据. Vuex和单纯的全局对象有以下不同: 1. ...
- 三种获取数据的方法fetch和ajax和axios
一 .fetch用法 ( 本人比较喜欢fetch,代码精简,虽说目前axios比较流行,但是fetch很多大厂已经开始用fetch开始封装了, 我觉得以后fetch会取代axios和ajax ) 1. ...
- JavaScript原生封装ajax请求和Jquery中的ajax请求
前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果.Ajax 在浏览器与 Web 服务器之间使用异步 ...
- ajax02_封装自己的jQuery库和ajax请求
封装自己的ajax类库 首先封装自己的 jQuery库 启发:css的元素选择器思想 简单的代码实现 function jQuery(selector){ if(typeof selector == ...
随机推荐
- IDEA-mybatis逆向工程使用
首先我们需要安装mybatis逆向工程插件mybatis Generator: 然后在pom.xml文件中添加逆向工程插件: <!--mybatis逆向工程插件--> <plugin ...
- Unity 2D 记录
Unity 2D 记录 1. 环境配置 1.1 下载安装unity hub和vs code 搜索unity hub 进行下载 https://unity.com/download 安装vs code ...
- Linux系统管理实战-进程管理
进程管理 了解进程 状态/生命周期 查看进程 管理进程 kill killall pkill 进程的调度 进程的nice 了解进程状态/生命周期 什么是进程? 进程的状态? 进程的生命周期? 查看进程 ...
- 盒模型属性-width height-padding-border-margin
宽度 width: 作用:设置可以添加元素内容的区域的宽度. 属性值: 特殊应用: • 如果一个元素不添加width 属性,默认属性值为auto,不同的元素浏览器会根据其 特点自动计算出实际宽度,例 ...
- 关于php pconnect长连接如何刷新连接的讨论
由于每个pconnect所建立的连接信息和单个进程绑定.线上偶发了redis在某一台机器php-fpm上连接正常而无法进行任何操作的问题. 先说结论 查看redis拓展官方文档 close方法 有一句 ...
- Vue学习day1
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- IE浏览器下bootStrap form-control input输入框不显示兼容性问题
问题背景 采用了如下代码. 主要时bootstrap 搜索框. 再IE11下表现出 input 明明 value有值,但是显示不出来的问题. 排查发现form-control样式去后功能正常,但是样式 ...
- 9.6 2020 实验 1:Mininet 源码安装和可视化拓扑工具
一.实验目的 掌握 Mininet 的源码安装方法和 miniedit 可视化拓扑生成工具. 二.实验任务 使用源码安装 Mininet 的 2.3.0d6 版本,并使用可视化拓扑工具生成一个最简 ...
- 一道网红题:Java值传递,答案开始看了不太懂,是不是涉及到了匿名类的实例化?
题目如下:看起来是值传递的考察... public class Test{ public static void main(String[] args){ int a = 10; int b = 10 ...
- 记一次Centos7上安装VNC服务
需要部署oracle数据库,操作系统为Centos7.5,oracle数据库在linux上面部署必须要安装一些依赖包,安装好,当然可以通过静默化安装,时间紧任务重,就通过vnc服务来进行安装,桌面化操 ...