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

 更新时间:2017年07月21日 10:53:34   作者:青石巷  
这篇文章主要给大家介绍了关于es7学习教程之fetch解决异步嵌套问题的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。

本文主要给大家介绍的是关于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 Object的extend是一个常用的功能

    JavaScript Object的extend是一个常用的功能

    对Object的extend是一个常用的功能。举一个例子,由于javascript 没有重载(overload),而且函数的参数类型是没有定义的,所以很多时候我们都传入一个对象来作为参数已方便控制。
    2009-12-12
  • RequireJS多页面应用实例分析

    RequireJS多页面应用实例分析

    这篇文章主要介绍了RequireJS多页面应用实例分析的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • javascript的23种设计模式示例总结大全

    javascript的23种设计模式示例总结大全

    这篇文章主要为大家介绍了javascript的23种设计模式的总结大全,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • 使用canvas修改二维码颜色的实现过程

    使用canvas修改二维码颜色的实现过程

    二维码作为现代信息传递的重要工具,其黑白色调一直是其标志性特征,然而,有时我们可能希望个性化定制二维码的颜色,以适应特定设计需求或提高可识别性,在这篇文章中,我们将深入探讨如何使用Canvas技术修改二维码的颜色,为二维码添加更多创意和个性
    2023-11-11
  • 微信小程序中获取设备信息的方法

    微信小程序中获取设备信息的方法

    这篇文章主要给大家介绍了关于微信小程序中获取设备信息的相关资料,微信小程序是一种在微信平台上运行的应用程序,它具有轻量化、便捷性和高兼容性的特点,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • js实现点击文本框显示日期选择器特效代码分享

    js实现点击文本框显示日期选择器特效代码分享

    这篇文章主要为大家详细介绍了javascript实现点击文本框显示日期选择器特效,提高了工作效率,推荐给大家,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-08-08
  • JS面试高频单线程与事件循环深入解析

    JS面试高频单线程与事件循环深入解析

    JavaScript是一种单线程语言,它在任何给定时间只能执行一个任务,然而js确能够处理异步操作,这得益于其事件循环(Event Loop)机制,今天这篇文章带领大家深入理解JavaScript单线程特性,以及讲解事件循环和js多线程知识
    2023-10-10
  • 关于微信小程序实现云支付那些事儿

    关于微信小程序实现云支付那些事儿

    我们在做小程序支付相关的开发时,总会遇到这些难题,下面这篇文章主要给大家介绍了关于微信小程序实现云支付那些事儿,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2021-09-09
  • IE的有条件注释判定IE版本详解(附实例代码)

    IE的有条件注释判定IE版本详解(附实例代码)

    IE的有条件注释是一种专有的(因此是非标准的)、对常规(X)HTML注释的Miscrosoft扩展。顾名思义,有条件注释使你能够根据条件(比如浏览器版本)显示代码块(不一定就是css,也可以是html代码,甚至是JavaScript代码)。
    2012-01-01
  • 用chart.js添加动态背景图

    用chart.js添加动态背景图

    这篇文章主要为大家详细介绍了用chart.js添加动态背景图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06

最新评论