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实现检测指定目录是否存在的方法
Jan 12 Javascript
js身份证验证超强脚本
Oct 26 Javascript
javascript 清除输入框中的数据
Apr 13 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
深入了解JavaScript 防抖和节流
Sep 12 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 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
处理单名多值表单的详解
2013/06/08 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
php include类文件超时问题处理
2015/02/06 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
图片自动缩小 点击放大
2008/07/07 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
Python实现的购物车功能示例
2018/02/11 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
Python新手学习装饰器
2020/06/04 Python
基于python实现操作redis及消息队列
2020/08/27 Python
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
装修设计师求职信
2014/02/26 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
2014年共青团工作总结
2014/12/10 职场文书
会计岗位职责范本
2015/04/02 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
element多个表单校验的实现
2021/05/27 Javascript