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 相关文章推荐
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
javascript 打开页面window.location和window.open的区别
Mar 17 Javascript
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
layui table设置某一行的字体颜色方法
Sep 05 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 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
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
原生js实现简单的模态框示例
2017/09/08 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
什么是类的返射机制
2016/02/06 面试题
广州一家公司的.NET面试题
2016/06/11 面试题
shell程序中如何注释
2012/02/17 面试题
电气自动化自荐信
2013/10/10 职场文书
品牌转让协议书
2014/08/20 职场文书
2015年维修工作总结
2015/04/25 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书