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 相关文章推荐
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
VuePress 静态网站生成方法步骤
Feb 14 Javascript
npm的lock机制解析
Jun 20 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
JS指定音频audio在某个时间点进行播放
Nov 28 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中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
js 图片等比例缩放代码
2010/05/13 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
不要用强制方法杀掉python线程
2017/02/26 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
python编写简单端口扫描器
2019/09/04 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
写给女朋友的道歉信
2014/01/12 职场文书
园林设计专业毕业生求职信
2014/03/23 职场文书
赔偿协议书范本
2014/04/15 职场文书
捐资助学感谢信
2015/01/21 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
2015年创先争优工作总结
2015/05/23 职场文书