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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/390863.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring-Boot + AOP实现多数据源动态切换

2019独角兽企业重金招聘Python工程师标准>>> 最近在做保证金余额查询优化,在项目启动时候需要把余额全量加载到本地缓存,因为需要全量查询所有骑手的保证金余额,为了不影响主数据库的性能,考虑把这个查询走从库。所以涉…

css 幻灯片_如何使用HTML,CSS和JavaScript创建幻灯片

css 幻灯片A web slideshow is a sequence of images or text that consists of showing one element of the sequence in a certain time interval.网络幻灯片是一系列图像或文本,包括在一定时间间隔内显示序列中的一个元素。 For this tutorial you can create a…

leetcode 1738. 找出第 K 大的异或坐标值

本文正在参加「Java主题月 - Java 刷题打卡」&#xff0c;详情查看 活动链接 题目 给你一个二维矩阵 matrix 和一个整数 k &#xff0c;矩阵大小为 m x n 由非负整数组成。 矩阵中坐标 (a, b) 的 值 可由对所有满足 0 < i < a < m 且 0 < j < b < n 的元素…

【数据库】Oracle用户、授权、角色管理

创建和删除用户是Oracle用户管理中的常见操作&#xff0c;但这其中隐含了Oracle数据库系统的系统权限与对象权限方面的知识。掌握还Oracle用户的授权操作和原理&#xff0c;可以有效提升我们的工作效率。 Oracle数据库的权限系统分为系统权限与对象权限。系统权限( Database Sy…

商业数据科学

数据科学 &#xff0c; 意见 (Data Science, Opinion) “There is a saying, ‘A jack of all trades and a master of none.’ When it comes to being a data scientist you need to be a bit like this, but perhaps a better saying would be, ‘A jack of all trades and …

为什么游戏开发者不玩游戏_什么是游戏开发?

为什么游戏开发者不玩游戏Game Development is the art of creating games and describes the design, development and release of a game. It may involve concept generation, design, build, test and release. While you create a game, it is important to think about t…

leetcode 692. 前K个高频单词

题目 给一非空的单词列表&#xff0c;返回前 k 个出现次数最多的单词。 返回的答案应该按单词出现频率由高到低排序。如果不同的单词有相同出现频率&#xff0c;按字母顺序排序。 示例 1&#xff1a; 输入: ["i", "love", "leetcode", "…

数据显示,中国近一半的独角兽企业由“BATJ”四巨头投资

中国的互联网行业越来越有被巨头垄断的趋势。百度、阿里巴巴、腾讯、京东&#xff0c;这四大巨头支撑起了中国近一半的独角兽企业。CB Insights日前发表了题为“Nearly Half Of China’s Unicorns Backed By Baidu, Alibaba, Tencent, Or JD.com”的数据分析文章&#xff0c;列…

Java的Servlet、Filter、Interceptor、Listener

写在前面&#xff1a; 使用Spring-Boot时&#xff0c;嵌入式Servlet容器可以通过扫描注解&#xff08;ServletComponentScan&#xff09;的方式注册Servlet、Filter和Servlet规范的所有监听器&#xff08;如HttpSessionListener监听器&#xff09;。 Spring boot 的主 Servlet…

html5教程_最好HTML和HTML5教程

html5教程HyperText Markup Language (HTML) is a markup language used to construct online documents and is the foundation of most websites today. A markup language like HTML allows us to超文本标记语言(HTML)是用于构造在线文档的标记语言&#xff0c;并且是当今大…

leetcode 1035. 不相交的线(dp)

在两条独立的水平线上按给定的顺序写下 nums1 和 nums2 中的整数。 现在&#xff0c;可以绘制一些连接两个数字 nums1[i] 和 nums2[j] 的直线&#xff0c;这些直线需要同时满足满足&#xff1a; nums1[i] nums2[j] 且绘制的直线不与任何其他连线&#xff08;非水平线&#x…

SPI和RAM IP核

学习目的&#xff1a; &#xff08;1&#xff09; 熟悉SPI接口和它的读写时序&#xff1b; &#xff08;2&#xff09; 复习Verilog仿真语句中的$readmemb命令和$display命令&#xff1b; &#xff08;3&#xff09; 掌握SPI接口写时序操作的硬件语言描述流程&#xff08;本例仅…

个人技术博客Alpha----Android Studio UI学习

项目联系 这次的项目我在前端组&#xff0c;负责UI&#xff0c;下面简略讲下学到的内容和使用AS过程中遇到的一些问题及其解决方法。 常见UI控件的使用 1.TextView 在TextView中&#xff0c;首先用android:id给当前控件定义一个唯一标识符。在活动中通过这个标识符对控件进行事…

数据科学家数据分析师_站出来! 分析人员,数据科学家和其他所有人的领导和沟通技巧...

数据科学家数据分析师这一切如何发生&#xff1f; (How did this All Happen?) As I reflect on my life over the past few years, even though I worked my butt off to get into Data Science as a Product Analyst, I sometimes still find myself begging the question, …

leetcode 810. 黑板异或游戏

黑板上写着一个非负整数数组 nums[i] 。Alice 和 Bob 轮流从黑板上擦掉一个数字&#xff0c;Alice 先手。如果擦除一个数字后&#xff0c;剩余的所有数字按位异或运算得出的结果等于 0 的话&#xff0c;当前玩家游戏失败。 (另外&#xff0c;如果只剩一个数字&#xff0c;按位异…

react-hooks_在5分钟内学习React Hooks-初学者教程

react-hooksSometimes 5 minutes is all youve got. So in this article, were just going to touch on two of the most used hooks in React: useState and useEffect. 有时只有5分钟。 因此&#xff0c;在本文中&#xff0c;我们仅涉及React中两个最常用的钩子&#xff1a; …

分析工作试用期收获_免费使用零编码技能探索数据分析

分析工作试用期收获Have you been hearing the new industry buzzword — Data Analytics(it was AI-ML earlier) a lot lately? Does it sound complicated and yet simple enough? Understand the logic behind models but dont know how to code? Apprehensive of spendi…

select的一些问题。

这个要怎么统计类别数呢&#xff1f; 哇哇哇 解决了。 之前怎么没想到呢&#xff1f;感谢一楼。转载于:https://www.cnblogs.com/AbsolutelyPerfect/p/7818701.html

html5语义化标记元素_语义HTML5元素介绍

html5语义化标记元素Semantic HTML elements are those that clearly describe their meaning in a human- and machine-readable way. 语义HTML元素是以人类和机器可读的方式清楚地描述其含义的元素。 Elements such as <header>, <footer> and <article> …

重学TCP协议(12)SO_REUSEADDR、SO_REUSEPORT、SO_LINGER

1. SO_REUSEADDR 假如服务端出现故障&#xff0c;主动断开连接以后&#xff0c;需要等 2 个 MSL 以后才最终释放这个连接&#xff0c;而服务重启以后要绑定同一个端口&#xff0c;默认情况下&#xff0c;操作系统的实现都会阻止新的监听套接字绑定到这个端口上。启用 SO_REUSE…