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 相关文章推荐
javascript题目,重写函数让其无限相加
Feb 15 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
按钮接受回车事件的三种实现方法
Jun 06 Javascript
javascript实现简单的进度条
Jul 02 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
vue实现循环滚动列表
Jun 30 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
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
php打开文件fopen函数的使用说明
2013/07/05 PHP
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
几行js代码实现自适应
2017/02/24 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
跟老齐学Python之用while来循环
2014/10/02 Python
Python算法应用实战之队列详解
2017/02/04 Python
Python三级菜单的实例
2017/09/13 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
程序员岗位职责
2013/11/11 职场文书
班组长工作职责
2013/12/25 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
公司放假通知范文
2015/04/14 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书