zoukankan      html  css  js  c++  java
  • 数组渲染 遍历重新生成一个新数组 使用async await请求接口

      async getCourseExperimentList(id) {
        try {
          var res = await ajax.myGet(
            "/course/experiment/get?course_id=" + parseInt(id)
          );
          var data = [];
          if (res.status == "OK") {
            this.setState({ classNamw: res.course_experments[0].course_title });
            for (var i = 0; i < res.course_experments.length; i++) {
              //循环 每次添加一个 就校验下 有就不添加了 没有添加
              var elem = {
                key: i,
                soft: i + 1,
                end_time: res.course_experments[i].end_time,
                experiment_id: res.course_experments[i].experiment_id,
                max_training_times: res.course_experments[i].max_training_times,
                start_time: res.course_experments[i].start_time,
                experiment_title: res.course_experments[i].experiment_title,
                status: res.course_experments[i].status,
                ctrl: {
                  end_time: res.course_experments[i].end_time,
                  id: res.course_experments[i].id,
                  max_training_times: res.course_experments[i].max_training_times,
                  start_time: res.course_experments[i].start_time,
                  status: res.course_experments[i].status,
                  experiment_title: res.course_experments[i].experiment_title
                }
              };
              data.push(elem);
              // this.setState(datassss: elem);
            }
            this.setState({ dataSource: data });
            if (this.state.dataSource.length == 2) {
              // this.setState({ experimentId: [] });     //这个没起作用 本来就是空数组
              // this.getExperimentList();
            } else if (this.state.dataSource.length == 1) {
            }
          }
        } catch (e) {
          console.log(e);
        }
      }
    

      

    一、async
      async其实是ES7才有有的关键字,async的意思是异步,顾名思义是有关异步的操作
    
      async用于声明一个函数是异步的。
    
      通常情况下async、await都是跟随promise一起使用,因为async返回值都是一个promise对象,async适用于任何类型的函数上

    二、基本使用
      使用async其实很简单,只需要在函数前面加一个async即可,这个函数的返回值是一个promise
    //用来声明一个函数是异步的
    async function fn(){
        return 123;
    }
    
    //返回值是一个promise
    console.log(fn())
    /*
    Promise
        __proto__: Promise
        [[PromiseStatus]]: "resolved"
        [[PromiseValue]]: 123
    
    */
    
    //可以通过.then拿到返回值
    fn().then((data)=>{
        console.log(data);//123
    })

    三、await
      await关键字不能够单独使用,必须在async中进行使用
      await等待异步执行返回结果后才会执行下面的代码,其实await就是阻止主函数的运行
    function fn(){ return new Promise((resolve)=>{ setTimeout(()=>{ console.log(1111); resolve() },2000) }) } async function fn1(){ await fn(); setTimeout(()=>{ console.log(2222); },1000) } fn1()

    四、如何实现多个异步同步执行
    function fn(){
        return new Promise((resolve)=>{
            setTimeout(()=>{
                   console.log(1111);
                   resolve()
            },3000)
        })
        
    }
    
    function fn1(){
        return new Promise((resolve)=>{
            setTimeout(()=>{
                   console.log(2222);
                   resolve()
            },2000)
        })
    }
    
    function fn2(){
        return new Promise((resolve)=>{
            setTimeout(()=>{
                   console.log(3333);
                   resolve()
            },1000)
        })
    }
    
    async function fn3(){
        await fn();
        await fn1();
        await fn2();
    }
    
    fn3()

    五、总结
      async函数完全可以看作多个异步操作,包装成的一个 Promise 对象,而await命令就是内部then命令的语法糖。
      因此如果需要实现多个异步同步执行必须每次await后都返回一个新的promise
    

      

  • 相关阅读:
    Atitit.php  nginx页面空白 并返回500的解决
    Atitit.php  nginx页面空白 并返回500的解决
    Atitit .linux 取回root 密码q99
    Atitit .linux 取回root 密码q99
    atitit.农历的公式与原理以及农历日期运算
    atitit.农历的公式与原理以及农历日期运算
    Atitit.用户权限服务 登录退出功能
    Atitit.用户权限服务 登录退出功能
    atitit.atiOrm.js v2 q61 版本新特性.docx
    Atitit.报名模块的管理
  • 原文地址:https://www.cnblogs.com/zhanglanzuopin/p/12758962.html
Copyright © 2011-2022 走看看