从零开始 React Native (3) grenerator函数 控制流管理 Promise

前端之家收集整理的这篇文章主要介绍了从零开始 React Native (3) grenerator函数 控制流管理 Promise前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <script type="text/javascript" src="generator_test.js"></script>
  5. <Meta charset="UTF-8">
  6. <style type="text/css"> progress { width: 160px; border: 1px solid #0064B4; background-color: #e6e6e6; color: #0064B4; } </style>
  7. <title>code3_Generator函数</title>
  8.  
  9. </head>
  10. <body>
  11.  
  12. <progress max="100" value="5"></progress>
  13. <div id="data">sdf</div>
  14. <!--<input type="button" name="button" onclick="ajax()" value="ajax请求"/>-->
  15. <input type="button" name="button" onclick="myAjax()" value="newAjax请求"/>
  16. </body>
  17. </html>

JS

  1. /** * Created by liuml on 2017/4/20. */
  2.  
  3. /** * 下一步,必须调用遍历器对象的next方法,使得指针移向下一个状态。 * 也就是说,每次调用next方法,内部指针就从函数头部或上一次停下来的地方开始执行,直到遇到下一个yield语句(或return语句)为止。 */
  4. //grenerator函数
  5. //区别
  6. //1.返回值function*
  7. //2.yield
  8. function* func() {
  9. yield "step1";
  10. console.log("step1");
  11.  
  12. yield "step2";
  13. console.log("step2");
  14.  
  15. // return "result";
  16. }
  17.  
  18. let state = func();
  19. state.next();
  20. state.next();
  21. state.next();
  22. console.log(state.next());
  23.  
  24. // 案例 :
  25. //功能 显示进度条 -> 请求数据 ->获取数据成功 隐藏进度条
  26. //显示进度条
  27. function showLoadingProgress() {
  28. //
  29. let progress = document.getElementsByTagName("progress")[0];
  30. //定时器
  31. let interval = setInterval(function () {
  32. progress.value += 10;
  33. if (progress.style.display === "none") {
  34. clearInterval(interval); //取消定时器
  35. }
  36. /*if (progress.value == 100) {//用这种方式的话就不用隐藏了 这里进度条满了后自动给隐藏 progress.style.display = "none"; clearInterval(interval); }*/
  37. },300);
  38. }
  39.  
  40. //请求数据
  41. function loadUIDataAsynch(callback) {
  42.  
  43. //模拟网络延时
  44. setTimeout(function () {
  45. //拿到数据
  46.  
  47. let datanode = document.getElementById("data");
  48. console.log(datanode);
  49. console.log(datanode.innerHTML);
  50. datanode.innerHTML = "模拟从服务器获得的数据.";
  51. //隐藏进度条;
  52. callback();
  53.  
  54. },3000);
  55.  
  56. }
  57.  
  58. //隐藏进度条
  59. function hideLoadingProgress() {
  60. var progress = document.getElementsByTagName("progress")[0];
  61. progress.style.display = "none";
  62. }
  63.  
  64. //
  65. function loadUiMain() {
  66. showLoadingProgress();
  67. loadUIDataAsynch(hideLoadingProgress);
  68.  
  69. }
  70.  
  71. //当页面加载完成之后 开始操作
  72. window.onload = loadUiMain;
  73.  
  74.  
  75. //使用 Generator 函数
  76.  
  77. //显示进度条
  78. function showLoadingProgress() {
  79. //不断刷新进度条
  80. //DOM
  81. var progress = document.getElementsByTagName("progress")[0];
  82. //定时器,每隔400毫秒,进度累加
  83. var interval = setInterval(function () {
  84. progress.value += 10;
  85. if (progress.style.display === "none") {
  86. clearInterval(interval); //取消定时器
  87. }
  88. },400);
  89. }
  90.  
  91. //获取数据
  92. function loadUIDataAsynch() {
  93.  
  94. //模拟网络延时
  95. setTimeout(function () {
  96. //拿到数据
  97. let datanode = document.getElementById("data");
  98. console.log(datanode);
  99. console.log(datanode.innerHTML);
  100. datanode.innerHTML = "模拟从服务器获得的数据.";
  101. //隐藏进度条
  102. loader.next();
  103. },3000);
  104.  
  105. }
  106.  
  107. //请求数据
  108.  
  109. function hideLoadingProgress() {
  110. var progress = document.getElementsByTagName("progress")[0];
  111. progress.style.display = "none";
  112. }
  113.  
  114. //异步操作的同步化表达
  115. function* loadUi() {
  116. //显示对话框
  117. showLoadingProgress();
  118. //加载数据
  119. yield loadUIDataAsynch();
  120. //隐藏对话框
  121. hideLoadingProgress();
  122.  
  123. }
  124.  
  125. var loader;
  126.  
  127. window.onload = function () {
  128. loader = loadUi();
  129. loader.next();
  130. }
  131.  
  132.  
  133. //next传参
  134. //yield句本身没有返回值,或者说总是返回undefined
  135. //next方法可以带一个参数,该参数就会被当作上一个yield语句的返回值
  136.  
  137. /** * Generator 函数从暂停状态到恢复运行,它的上下文状态(context)是不变的。通过next方法的参数, * 就有办法在 Generator 函数开始运行之后,继续向函数体内部注入值。 * 也就是说,可以在 Generator 函数运行的不同阶段,从外部向内部注入不同的值,从而调整函数行为。 */
  138. function* func2() {
  139. console.log("started");
  140. let r1 = yield;
  141. console.log(r1); //输出yield返回值
  142. let r2 = yield;
  143. console.log(r2);
  144. }
  145.  
  146. let state = func2();
  147. state.next();
  148. state.next("a");
  149. state.next();
  150.  
  151. //循环输出,通过传参,随时让循环重新开始
  152. function* func3() {
  153. for (let i = 0; i < 5; i++) {
  154. let reset = yield i;
  155. console.log(reset);
  156. if (reset) i = -1;
  157. //console.log(i);
  158. }
  159. }
  160.  
  161. let state = func3();
  162. console.log(state.next());
  163. console.log(state.next());
  164. //通过next传参,让yield有返回值
  165. console.log(state.next(true));
  166. console.log(state.next());
  167. console.log(state.next());
  168.  
  169.  
  170. //按照流程执行
  171. //step1(value1) -> step2(value2) -> step3(value3) -> step4(value4)
  172.  
  173. function step4(value3,callback) {
  174. var value4 = `step4_${value3}`;
  175. callback(value4);
  176. }
  177.  
  178. function step3(value2,callback) {
  179. var value3 = `step3_${value2}`;
  180. callback(value3);
  181. }
  182.  
  183. function step2(value1,callback) {
  184. var value2 = `step2_${value1}`;
  185. callback(value2);
  186. }
  187.  
  188. function step1(callback) {
  189. var value1 = `step1_start `;
  190. callback(value1);
  191. }
  192.  
  193.  
  194. //回调嵌套
  195. step1(function (value1) {
  196. step2(value1,function (value2) {
  197. step3(value2,function (value3) {
  198. step4(value3,function (value4) {
  199. console.log(value4);
  200. });
  201. });
  202. });
  203. });
  204.  
  205.  
  206. function step4(value3) {
  207. return `step4_${value3}`;
  208. }
  209.  
  210. function step3(value2) {
  211. return `step3_${value2}`;
  212. }
  213.  
  214. function step2(value1) {
  215. return `step2_${value1}`;
  216. }
  217.  
  218. function step1() {
  219. return `step1_start `;
  220. }
  221.  
  222. //控制流管理
  223. function* stepFunc() {
  224. let value1;
  225. yield value1 = step1();
  226. let value2;
  227. yield value2 = step2(value1);
  228. let value3;
  229. yield value3 = step3(value2);
  230. let value4;
  231. yield value4 = step4(value3);
  232. console.log(value4);
  233. }
  234. //顺序执行
  235. for (var i of stepFunc());
  236.  
  237.  
  238. //Ajax请求网络,json数据
  239. //请求成功:显示数据
  240. //请求失败:抛出异常
  241. //局部刷新8
  242. function ajax() {
  243. console.log("点击了ajax按钮");
  244. url = "test.json";
  245. var request = new XMLHttpRequest();
  246. request.open("GET",url);
  247. request.onreadystatechange = handler;
  248. request.responseType = "json";//响应类型 json
  249. request.setRequestHeader("Accept","application/json");
  250. request.send();
  251. //回调
  252. function handler() {
  253. if (request.readyState !== 4) {
  254.  
  255. return;
  256. }
  257. if (this.state == 200) {//请求成功 显示数据
  258. console.log(this.response.message);
  259. } else {
  260. throw new Error(this.statusText);
  261. }
  262. }
  263.  
  264. }
  265.  
  266. //
  267. //Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大
  268. //Ajax请求网络,json数据
  269. //请求成功:显示数据
  270. //请求失败:抛出异常
  271. //局部刷新
  272. //Promise对象的三种状态
  273. //Pending(进行中)、Resolved(已完成,又称 Fulfilled)和Rejected(已失败)
  274. function ajax(url) {
  275.  
  276. var promise = new Promise(function (resolve,reject) {
  277. var request = new XMLHttpRequest();
  278. request.open("GET",url);
  279. request.onreadystatechange = handler;
  280. request.responseType = "json";
  281. request.setRequestHeader("Accept","application/json");
  282. request.send();
  283.  
  284. function handler() {
  285. //4完成响应 解析完成
  286. if (this.readyState !== 4) {
  287. return;
  288. }
  289.  
  290. if (this.state == 200) {
  291. resolve(this.response);
  292. } else {
  293. reject(new Error(this.statusText));
  294. }
  295. }
  296.  
  297. });
  298. return promise;
  299.  
  300. }
  301.  
  302. function myAjax() {
  303. console.log(ajax('test.json'));
  304. ajax('test.json').then(
  305. //resolve 成功
  306. function (json) {
  307. console.log(json);
  308. alert(json);
  309. },function (e) {
  310. //rejedt 失败
  311. console.log(e.message + "失败");
  312. alert(e.message);
  313. }
  314. // json => json.message.log
  315. //reject 失败
  316. )
  317.  
  318.  
  319. }
  320. function ajax(url) {
  321. var promise = new Promise(function (resolve,url)
  322. request.onreadystatechange = handler;
  323. request.responseType = "json"; //服务器响应数据的类型 json
  324. request.setRequestHeader("Accept","application/json");
  325. request.send();
  326. //回调
  327. function handler() {
  328. //4(完成)响应内容解析完成
  329. if (this.readyState !== 4) {
  330. return;
  331. }
  332. if (this.status == 200) {
  333. //请求成功:显示数据
  334. resolve(this.response);
  335. }
  336. else {
  337. reject(new Error(this.statusText));
  338. }
  339. }
  340. });
  341. return promise;
  342. }
  343. //指定resolve状态、reject状态的回调函数
  344. ajax('test.json').then(
  345. //resolve
  346. json => alert(json.message),//reject,可选的
  347. e => console.log(e.message)
  348. );

还有个json 文件数据 我随便搞的
名字是test.json

  1. {
  2. "repBody": { "appSignins": [ { "id": 41111,"user_id": 21733,"user_loginname": "测试内容ph34","count": 1,"create_time": 1482217201000,"last_logintime": 1482197775000,"remark": "第1天","score": 5,"user_apptype": "0" },{ "id": 41111,"count": 2,"create_time": 1482317353818,"remark": "连续签到第2天","score": 10,"count": 3,"create_time": 1482403753819,"last_logintime": 1482230953818,"remark": "签到第3天","count": 4,"create_time": 1482490153819,"last_logintime": 1482230953819,"remark": "签到第4天","count": 5,"create_time": 1482576553819,"remark": "签到第5天","count": 6,"create_time": 1482662953820,"remark": "签到第6天","count": 7,"create_time": 1482749353820,"last_logintime": 1482230953820,"remark": "连续签到第7天","score": 20,"count": 8,"create_time": 1482835753821,"remark": "签到第8天","count": 9,"create_time": 1482922153821,"last_logintime": 1482230953821,"remark": "签到第9天","count": 10,"create_time": 1483008553821,"remark": "签到第10天","count": 11,"create_time": 1483094953822,"remark": "签到第11天","count": 12,"create_time": 1483181353822,"last_logintime": 1482230953822,"remark": "签到第12天","count": 13,"create_time": 1483267753823,"remark": "签到第13天","count": 14,"create_time": 1483354153823,"last_logintime": 1482230953823,"remark": "连续签到第14天","score": 50,"count": 15,"create_time": 1483440553824,"remark": "签到第15天","count": 16,"create_time": 1483526953824,"last_logintime": 1482230953824,"remark": "签到第16天","count": 17,"create_time": 1483613353825,"remark": "签到第17天","count": 18,"create_time": 1483699753825,"remark": "签到第18天","count": 19,"create_time": 1483786153825,"last_logintime": 1482230953825,"remark": "签到第19天","count": 20,"create_time": 1483872553827,"remark": "签到第20天","count": 21,"create_time": 1483958953827,"last_logintime": 1482230953827,"remark": "签到第21天","count": 22,"create_time": 1484045353828,"remark": "签到第22天","count": 23,"create_time": 1484131753828,"last_logintime": 1482230953828,"remark": "签到第23天","count": 24,"create_time": 1484218153829,"remark": "签到第24天","count": 25,"create_time": 1484304553829,"last_logintime": 1482230953829,"remark": "签到第25天","count": 26,"create_time": 1484390953829,"remark": "签到第26天","count": 27,"create_time": 1484477353830,"remark": "签到第27天","count": 28,"create_time": 1484563753830,"last_logintime": 1482230953830,"remark": "签到第28天","count": 29,"create_time": 1484650153831,"remark": "签到第29天","count": 30,"create_time": 1484736553831,"last_logintime": 1482230953831,"remark": "连续签到第30天","score": 100,"user_apptype": "0" } ],"isSigned": false,"resCode": "1","resMsg": "获取数据成功!" } }

猜你在找的React相关文章