es7学习教程之fetch解决异步嵌套问题的方法示例


Posted in Javascript onJuly 21, 2017

本文主要给大家介绍的是关于fetch API解决异步嵌套问题,下面话不多说,来一起看看详细的介绍:

我们之前学习了async和await,知道他是为了解决浏览器异步获取的的!但是我们用fetch api的话方法会更加的简单

async和await解决异步嵌套

function ajax(url){

   return new Promise(function(reslove,reject){
    let xmlHttp=new XMLHttpRequest();
    xmlHttp.open("get",url,true);
    xmlHttp.onreadystatechange=function(){
     if(xmlHttp.readyState==4&&xmlHttp.status==200){
      let data=JSON.parse(xmlHttp.responseText);
      reslove(data);
     }
    }
    xmlHttp.send(null);
   })
  }
  let uldom=document.getElementById("students");
  let url="http://192.168.0.57:8000/students.json";
  async function main(){
  let data=await ajax(url);
  
  let students=data;
  let html="";
  for(let i=0,l=students.length;i<l;i++){
   let name=students[i].name;
   let age=students[i].age;
   html+=`
   <li>姓名${name},年龄${age}</li>
   `
  }
  uldom.innerHTML=html;
  }
  main();

我们需要创建Promise函数来进行操作,如果我们用fetch解决的话,会更加的方便!

let uldom=document.getElementById("students");
  let url="http://192.168.0.57:8000/students.json";
  function main(){
   fetch(url).then(respone=>{
   return respone.json();
  }).then(data=>{
   let students=data;
   let html="";
   for(let i=0,l=students.length;i<l;i++){
    let name=students[i].name;
    let age=students[i].age;
    html+=`
    <li>姓名${name},年龄${age}</li>
    `
   }
   uldom.innerHTML=html;
  });
   
  }
  main();

不用创建Promise,直接调用then()是不是比上边更加的简单!

async、await结合fetch处理异步

let uldom=document.getElementById("students");
 let url="http://192.168.0.57:8000/students.json"; 
 async function main(){
  let respone = await fetch(url);
  let student = await respone.json();
  let html="";
  for (let i=0,l=students.length;i<l;i++){
   let name=students[i].name;
   let age=students[i].age;
   html+=`
   <li>姓名${name},年龄${age}</li>
   `
  }
  uldom.innerHTML=html;
  }
 main()

感觉是不是很简单!比上一种方法更加的简单。

总结

以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
JS针对Array的各种操作汇总
Nov 29 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 Javascript
JavaScript 异步时序问题
Nov 20 Javascript
js图片轮播插件的封装
Jul 21 #Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 #Javascript
AngularJS中使用three.js的实例详解
Jul 21 #Javascript
Axios学习笔记之使用方法教程
Jul 21 #Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 #Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 #Javascript
基于JavaScript实现数码时钟效果
Mar 30 #Javascript
You might like
解析PHP跨站刷票的实现代码
2013/06/18 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
对python Tkinter Text的用法详解
2018/10/11 Python
python把1变成01的步骤总结
2019/02/27 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
如何开发一个JQuery插件
2016/07/28 面试题
应聘教师推荐信
2013/10/31 职场文书
幼儿园保教管理制度
2014/02/03 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
2015入党自传格式范文
2015/06/26 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
mysql联合索引的使用规则
2021/06/23 MySQL