es7 fetch解决异步嵌套问题

xiaoqibTn 发布于2019-08-20 18:12 / 1933人阅读

摘要：解决异步嵌套问题我们昨天学习了和，知道他是为了解决浏览器异步获取的的但是我们用的话方法会更加的简单和解决异步嵌套姓名年龄我们需要创建函数来进行操作，如果我们用解决的话，会更加的方便姓名年龄不用创建，直接调用是不是比上边更加的简单结合处理异步

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姓名${name},年龄${age}
            `
        }
        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姓名${name},年龄${age}
                `
            }
            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姓名${name},年龄${age}
            `
        }
        uldom.innerHTML=html;
        }
    main()

感觉是不是很简单！比上一种方法更加的简单。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84198.html

JavaScript 异步进化史

摘要：签订协议的两方分别是异步接口和。在异步函数中，使用异常捕获的方案，代替了的异常捕获的方案。需要注意的是，在异步函数中使异步函数用时要使用，不然异步函会被同步执行。同步与异步通常，代码是由上往下依次执行的。如果有多个任务，就必需排队，前一个任务完成，后一个任务才会执行。这种执行模式称之为：同步（synchronous）。新手容易把计算机用语中的同步，和日常用语中的同步弄混淆。如，...

luzhuqun 2019-08-22 10:34 评论0 收藏0
传统 Ajax 已死，Fetch 永生

摘要：结果证明，对于以上浏览器，在生产环境使用是可行的。后面可以跟对象，表示等待才会继续向下执行，如果被或抛出异常则会被外面的捕获。，，都是现在和未来解决异步的标准做法，可以完美搭配使用。这也是使用标准一大好处。只允许外部传入成功或失败后的回调。 showImg(https://cloud.githubusercontent.com/assets/948896/10188666/bc9a53...

fai1017 2019-08-21 10:41 评论0 收藏0
谈谈JavaScript异步代码优化

摘要：异步问题回调地狱首先，我们来看下异步编程中最常见的一种问题，便是回调地狱。同时使用也是异步编程最基础和核心的一种解决思路。基于，目前也被广泛运用，其是异步编程的一种解决方案，比传统的回调函数解决方案更合理和强大。关于微信公众号：前端呼啦圈（Love-FED）我的博客：劳卜的博客知乎专栏：前端呼啦圈前言在实际编码中，我们经常会遇到Javascript代码异步执行的场景...

chnmagnus 2019-08-22 17:08 评论0 收藏0
js基础进阶--从ajax到fetch的理解

摘要：使用它可以让页面请求少量的数据，而不用刷新整个页面。基于什么答它基于的是。的库答基于上面的原因，各种库引用而生，然而最有名的就是的中的。它的一个优势异步操作，但的异步操作是基于事件的异步模型，没有那么友好。欢迎访问我的个人博客：http://www.xiaolongwu.cn 基本知识 1. Ajax是什么？答：Ajax是一种可以在浏览器和服务器之间使用异步数据传输（HTTP请求）...

SoapEye 2019-08-23 14:44 评论0 收藏0
记一次小程序开发中如何使用async-await并封装公共异步请求

摘要：实现方案首先小程序目前还是不支持的和的，那么如何让它支持呢点击下载，并把下载好的文件夹放到自己小程序的目录下，包总共才多，体积很小的。如果想使用这些新的对象和方法，必须使用，为当前环境提供一个垫片。用于实现浏览器并不支持的原生的代码。前言在平常的项目开发中肯定会遇到同步异步执行的问题，还有的就是当执行某一个操作依赖上一个执行所返回的结果，那么这个时候你会如何解决这个问题呢； 1.是...

why_rookie 2019-08-23 14:49 评论0 收藏0