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

  • 相关阅读:
    开源控件PullToRefreshGridView的使用(三)
    JS中的运算符 以及变量和输入输出
    HTML中表格
    JS中 事件冒泡与事件捕获
    JS中的循环结构
    UML类图详解
    一步一步生成图片水印
    快速生成缩略图
    ==和Equal()的区别
    屌丝程序人生(下)
  • 原文地址:https://www.cnblogs.com/huoshengmiao/p/15576780.html
Copyright © 2011-2022 走看看