AJAX, callback,promise and generator
AJAX with jQuery
$.ajax({url:??,type:??,data:??,success: function(){??} //callback,error:function(jqXHR,textStatus,error){??}
})
think about what AJAX wants from human ,
AJAX asks questions :
tell Me By Which Way You Want To Do Things : —— 'GET or POST' ,
tell Me Where The Address Is —— url ,
tell Me What Data You Want To Get From Or Post On The Server ?—— data ,
what Do You Want To Do With The Data After Getting Or Posting It Successfully And What If An Eerror Occur? —— callbacks
AJAX with JS
window.onload = function(){var xhttp = XMLHttpRequest(); // create an AJAX object ...一般要功能检测IE AcitveXObject,其他 XMLHttpRequestxhttp.open("Get","uri",true); // Set AJAX request ————how ,where, async or sync //如果是‘POST’,则必须设置首部,设置返回内容的编码类型。 //xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;")xhttp.send(); //send AJAX request and with (data) if u are posting data to the server.xhttp.onreadystatechange=function(){ //readystate状态一有改变的话,就执行这个匿名函数,所以会执行4次if( xhttp.readystate== 4 && xhttp.status==200){ /*一般是检测到readystate为4,且status 返回200时,(HTTP状态码 200代表处理成功OK,404找不到文件等等),再执行真正的callback处理返回的数据;*/callback(xhttp.response)//and if it's json data ,u would have to use JSON.parse }}
}
如果需要多个AJAX 请求的话,为了避免写出 callback hell 可以用promise 对象,和 generator.
1,promise 一般是用new 创建Promise对象,
在promise对象上用then(callback)来处理数据,// then在这里,大概就是然后的意思。
如果后面还有AJAX request的话,则可以在callback 内部 return 新的 new Promise 对象,然后对执行后返回的promise对象使用.then(callback)方法。
Promise机制 是链式的。
2,generator 生成器 ——— function*(yield ??){}
var myGenerator = function*(){var data1 = yield $.get(url1);//do sth with data1var data2 = yield $.get(url2);var data3 = yield $.get(url3)}wrapGener (myGenerator) // 把generator 传递给 wrapGenerfunction wrapGener ( generator ){var gener = generator(); //生成生成器 return handleGenerator(gener.next()) //调用next方法,传递生成的对象 Object{value:"??",done:false} 给handleGenerator。function handleGenerator(yieldedObj){ if( !yieldedObj.done){//如果生成器没有执行完毕yieldedObj.value.then(//执行callbackfunction(data){ // callback 的参数 Object.value return handleGenerator(gener.next(data))//递归 返回这次的object.value 给gener,赋值给包含yield的变量。并且再次调用gener的next生成新的对象。}) } }
}
var gener = generator();
//call 一个生成器并不会立刻执行,而是准备执行,有点像new func() 的创建对象,但是并没有new关键字 。
只有call了gener .next()方法,生成器才会开始执行,但是,执行到有 yield 关键字 的地方会暂停,而且,会返回 yield 后面的值。
// yield 差不多就是 return for now .
如果在执行过程中,遇到 N个 yield AJAX request ,则需要调用N个.next()方法。
一般是在检测 yield 返回的对象的done属性不为真 ,也就是说生成器还没有执行完毕。Object.done == false 的情况下调用下一个next方法。
yield 返回给调用者的是一个有着2个属性的对象,Object{value:"??",done:false}
而 Object.value 里面的值就是 yield 后面的 AJAX request 了,也就是服务器返回的内容。
对 Object.value 调用.then(callback)方法,就可以使用内容了。
可以在callback function内部用递归的方式,再次调用 gener .next(value) ,这个时候会返回object.value里面的值给gener,然后generator继续执行。
转载于:https://www.cnblogs.com/xinfangzhang/p/7794067.html
AJAX, callback,promise and generator相关推荐
- 5、this调用语句必须是构造函数中的第一个可执行语句_ES6中的Promise和Generator详解...
简介 ES6中除了上篇文章讲过的语法新特性和一些新的API之外,还有两个非常重要的新特性就是Promise和Generator,今天我们将会详细讲解一下这两个新特性. Promise 什么是Promi ...
- js callback promise async await 几种异步函数处理方式
***callback 这个是最常用的也是最简单的 ,比如在ajax网络请求中,返回请求完成返回的数据 回调函数就是把一个函数当成另一个函数的参数,可以传递函数内的局部变量,也可以异步完成一些操作, ...
- Promise 与 generator函数
Promise 与 generator函数 一. 回调地狱 二. Promise 使用Promise 三. Generator 函数 四. 利用Generator函数实现异步操作的同步化表达 五. 意 ...
- ES Next Arrow function Promise Iterator Generator yield Async Await
ES Next & Arrow function & Promise & Iterator & Generator yield & Async Await It ...
- javascript-前后端交互-异步调用Ajax与Promise比较
javascript-前后端交互-异步调用Ajax与Promise比较 目录 文章目录 1.异步调用 1.1.使用场景 1.2.Ajax使用 1.2.1.启动后台 1.2.2.编写前端测试页面 1.3 ...
- ajax、promise、react、缓存笔记记录
ajax请求 1.请求基本步骤 <body><form action="###">手机号:<input type="text" n ...
- 1.21(异步解决方案:Promise and Generator)
案例使用Promise解决按顺序请求a b c 三个json文件的回调地狱问题 一个 Promise 必然处于以下几种状态之一: 待定(pending): 初始状态,既没有被兑现,也没有被拒绝. 已兑 ...
- 前端学习笔记(5)-ES6中promise、Generator、Module等使用场景
1. Promise 一种异步编程的解决方案,通过一个回调,避免更多的回调 异步编程允许我们在执行一个长时间任务时,程序不需要等待,而是继续执行之后的代码,直到这些任务完成之后再来通知你,通常是以回调 ...
- mysql回调地狱_5、Express异步读取Mysql数据库 callback/promise/async
一.Node异步 Node.js 异步编程的直接体现就是回调. 有了异步方法,我们可以一边操作数据库,一边执行其他命令,在数据库操作完成后,我们将查询数据作为回调函数的参数返回.这样在执行代码时就没有 ...
最新文章
- mysql被格式化恢复数据_三种常见数据库文件恢复方法介绍
- 微信支付java helloworld_10行代码搞定微信支付(Java版)
- Redis命令:DECR key减1操作
- 天池CV学习赛:街景字符识别-思路与上分技巧汇总
- hdu2795 Billboard 线段树
- 只需两步手把手教你玩转图像识别
- JQuery-UI dialog hide属性的取值范围
- UNIX环境高级编程之第4章:文件和目录-习题
- Spring Cloud 和 Dubbo,到底用哪个好?
- 三分钟带你快速看懂电子数据取证! | 打击网络犯罪必备知识
- 【NLP】Transformer框架原理详解-1
- 百度bae部署html,百度BAE使用:应用配置文件 app.conf
- ExtJS界面设计工具 Ext Designer
- python按键盘上哪个键运行_python键盘操作PyKeyboard安装使用详解
- 生信学习入门常见错误可能的原因分类总结和求助指南
- linux svn 403 forbidden,关于svn报错 403 Forbidden
- Logstash:使用 dissect 导入 CSV 格式文档
- DEV gridview数据筛选
- %大赛D--链式前向星+SPFA(BFS)+各种数据类型+各种最短路复习
- wxpyhton打包后图标背景变黑
热门文章
- mysql 包 过程 job_mysql job实例全过程
- ac ap方案 华为_华为无线_AC+AP小型无线网络配置实验_v1
- 户籍恢复需要体检吗_脑梗死后脚麻能恢复吗?需要多久能恢复呢?
- linux虚拟机ip修改无效
- stl swap函数_vector :: swap()函数以及C ++ STL中的示例
- Java LocalDate类| 带示例的getDayOfYear()方法
- librtmp分析(接收数据包处理)
- 计算机常用英语1000个,1000个常用英语单词.pdf
- oracle查看所有用户_Oracle实用命令查看共用一个表空间的所有用户
- thinkserver rd650管理口地址_路由器WAN口和LAN口有什么区别【区别介绍】