zoukankan      html  css  js  c++  java
  • JS 同时获取多个异步请求数据 Promise.all() Jim

    普通接口调用写法.then() 或者 使用es6的 async/await 异步转同步

    //   function Index() {
    //       普通调用嵌套写法
    //       console.time()
    //       const p1 = new Promise((resolve, reject) => {
    //         console.log('这里是p1')
    //         setTimeout(() => {
    //           resolve('这里是p1的返回')
    //         }, 1000)
    //       }).then((r1) => {
    //         new Promise((resolve, reject) => {
    //           console.log('这里是p2')
    //           setTimeout(() => {
    //             resolve('这里是p2的返回')
    //           }, 1000)
    //         }).then((r2) => {
    //           console.log(r1)
    //           console.log(r2)
    //           console.timeEnd()
    //         })
    //       }) 
    //     }
     
    //异步转同步
    async function Index2() {
          console.time()
          const p1 =await new Promise((resolve, reject) => {
            console.log('这里是p1')
            setTimeout(() => {
              resolve('这里是p1的返回')
            }, 1000)
          })
          const p2 =await new Promise((resolve, reject) => {
            console.log('这里是p2')
            setTimeout(() => {
              resolve('这里是p2的返回')
            }, 1000)
          })
          console.log(p1)
          console.log(p2) 
          console.timeEnd()
       }
        //Index();
        Index2();

    用时2

     使用Promise.all()来实现调用

      async function Index() {
          console.time()
          const p1 = new Promise((resolve, reject) => {
            console.log('这里是p1')
            setTimeout(() => {
              resolve('这里是p1的返回')
            }, 1000)
          })
          const p2 = new Promise((resolve, reject) => {
            console.log('这里是p2')
            setTimeout(() => {
              resolve('这里是p2的返回')
            }, 1000)
          })
          Promise.all([p1, p2]).then((val) => {
            console.log(val)
            console.timeEnd()
          })
           //当然也可以使用 async/await写法
           /*   
            const p = await Promise.all([p1, p2])
            console.log(p);
            console.timeEnd(); 
            */
           //补充说明:如果我们的接口已经套上了一层 promise 便已经实现了同时执行异步的条件
           //下面这种写法耗时和Promise.all也是一样的,但是嵌套多了可能代码就不太优雅了
           /*  p1.then((r1) => {
            p2.then((r2) => {
              console.log(r1)
              console.log(r2)
              console.timeEnd()
            })
          }) */
            
        }
        Index()

    用时1s

  • 相关阅读:
    day50 初识JavaScript
    在C#中对Datatable排序【DefaultView的Sort方法】
    Windows Phone 中查找可视化树中的某个类型的元素
    抽象类(abstract)是否可以继承自实体类 ?
    C#遍历指定目录下的所有文件及文件夹
    Log4Net总结
    Firefox 与 IE 对Javascript和CSS的区别
    RSS 订阅
    Win8 URI 方案 ms-appX 用法大全
    ProgressIndicator显示进度条以及一些文字信息
  • 原文地址:https://www.cnblogs.com/huoshengmiao/p/15576780.html
Copyright © 2011-2022 走看看