ajax和cs的关系,fetch、axios 与Ajax之间关系
1、axios
底层封装是XMLHttpRequest对象，实现原理跟ajax一样， 通过封装Promise()对象来处理结果
例子如下： 封装Axios对象进行回调 get方法
var axios = {
getMethod:function(url){
var xhr = new XMLHttpRequest()
reture Promise((resolve,reject)=>{
xhr.open('GET',url,true)
xhr.onreadstatechange = function(){
if(xhr.readState == 4){
if(xhr.status == 200){
resolve(xhr.responseText)
}
}
}
xhr.send()
})
}
}
2、已经封装好的Axios例子
axios({
method:"get | post",
url:"发送的地址"，
data:{}
})
.then(
item=>{}
)
.catch(info=>{})
二、fetch
fetch 是基于ES6语法中Proimse()对象编写，代码简洁少，可以认为是Axios替代一种方法,支持
async / await。
1 、fetch只对网络请求报错，对400，500都当做成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
2 、fetch默认不会带cookie，需要添加配置项： fetch(url, {credentials: 'include'})
3、fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
4)fetch没有办法原生监测请求的进度，而XHR可以
try{
let response= awiat fetch(
let data=response.json()
/doSomething/
) catch(){
conosloe.log(err)
}
}
三、ajax
var xhr= new XMLHttpRequest();
xhr.onreadystatechange =function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
consloe.log(xhr.responseText)
}
}
}
xhr.open("post","目标响应",ture);
//让Ajax已提交表单的方式，发起Post的Ajax请求
xhr.setRequestHeader("Content-Type","application/x-www-form-urlncoded");
xhr.send("username"+username+"possword"+possword)
基于juqery的ajax
$.ajax({
url:"", //请求的url地址
dataType:"json", //返回格式为json
async:true,//请求是否异步，默认为异步，这也是ajax重要特性
data:{"id":"value"}, //参数值
type:"POST | GET", //请求方式
beforeSend:function(){
//请求前的处理
},
success:function(req){
//请求成功时处理
},
complete:function(){
//请求完成的处理
},
error:function(){
//请求出错处理
}
});
ajax和cs的关系,fetch、axios 与Ajax之间关系相关推荐
- 前端学axios还是ajax,【Web前端问题】axios发送ajax请求问题？
在程序里借助axios库发送ajax请求,但是失败了,返回这个 然而在同一个位置换成jquery的代码却能成功,代码如下,不知axios哪里写的不对??谢谢~ //axios axios.post(& ...
- 计算机和英语的英语的关系,关于电脑和英语之间关系的科普贴(原创)
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 经常看见有人说电脑编程用英语,输入法都得用英语,汉字不适合电脑之类的弱智问题.我就来科普一下这里面的道理,希望大家都顶起来.不了解的人也多了解一下,免得自 ...
- default默认值 unique单列唯一和联合唯一 primary key主键 auto_increment自增 外键foregin key 表与表之间关系
约束条件 之前讲过: zerofill (填充0) unsigned (约束条件值unsigned 无符号) not null 非空(不能插入空) 补充知识点 插入数据的时候可以指定字段 create ...
- ajax和fetch哪个好,axios和ajax，fetch的区别
1,传统 Ajax 指的是 XMLHttpRequest(XHR), 最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回 ...
- ajax速度axio速度,[转]Ajax Fetch Axios之间的详细区别以及优缺点
jQuery ajax1 2 3 4 5 6 7 8$.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: ...
- ES6中新的AJAX解决方案：Promise、Fetch、Response、Axios
目录 (一)Promise对象:包装结果集 一.Promise对象概念: 二.Promise对象使用: 1. Promise对象总是处于以下三种状态之一: 2. 使用方法: (二)Fench()方法: ...
- HTTP POST方式写法fetch，axios，ajax
fetch: fetch('URL', { method: 'get', // body: '', }).then((req) => { req.json(() => { }).then( ...
- 使用rest_framework写api接口的一些注意事项(axios发送ajax请求)
1. 类继承GenericAPIView,定义queryset 印象深刻的事: 由于原来对于继承关系不太清楚,写接口 APIView/泛指GenericAPIView不太关注queryset 没有设置 ...
- 使用fetch函数发送ajax
回到文章总目录 使用fetch函数发送ajax请求 MDN文档地址 中文文档 https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWork ...
- Ajax（jQuery封装），表单form提交（Ajax），art-template模板引擎，原生Ajax，XML和JSON，axios，跨域和JSONP，防抖和节流，HTTP协议
目录 服务器基本概念 1.URL 2.URL地址的组成部分 3. 图解客户端与服务器的通信过程 4.网页中如何请求数据 5.资源的请求方式 Ajax jQuery中的Ajax 1. $.get()函数 ...
最新文章
- 正则重温(学习笔记)
- 模式识别与机器学习笔记（一）
- 简易的实现对象内存池
- 关于计算机犯罪的英语作文,关于信息安全的英语作文范文
- 《编写可维护的Javascript》学习总结
- error C2065: 'assert' : undeclared identifier
- C语言正则表达式详解 regcomp() regexec() regfree()详解
- DHCP中继 ||| 四种通信方式（单播+组播+广播+任播）
- 定义一个鸭子的类java_2019-02-11——Java 鸭子模型
- 【ATcode】怪文書 / Dubious Document（题意）
- 网页如何与小程序交互通信
- Openstack安装与部署三：本地源配置
- 【项目管理冲刺-必会概念】
- 如何在VMware Workstation虚拟机上安装苹果系统(Mac OS)
- Rikka with Travels 动态维护树直径
- HTAP应该是一种需求 而不是一种产品
- 群晖监控备份方案，为金融企业信息安全保驾护航
- 如何进行精准引流？教你定制精准引流方案！
- Qt处理Excel的一些库
- 如何降低OBS推流直播延迟的问题？