zoukankan      html  css  js  c++  java
  • 关于ES6中Promise的应用-顺序合并Promise,并将返回结果以数组的形式输出

    1.Promise 基础知识梳理

      创建一个Promise实例

    const promise = new Promise(function(resolve, reject) {
        if (success){
        resolve(value);
      } else {
        reject(error);
      }
    });

    Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,JavaScript 引擎提供,不用自己部署。

    Promise实例生成以后,可以使用then方法分别制定resolved状态和rejected状态的回调函数。

    promise.then(value => {}, error => {})

    then方法返回的是一个新的Promise实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法。

    fetch("/posts.json").then(file=> {file.json()}).then(data => {});

    上面的代码使用then方法,依次指定了两个回调函数。第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。

    Promise.all方法用于将多个Promise实例包装成一个新的实例。

    const p = Promise.all([p1, p2, p3]);

    上面代码中,Promise.all方法接受一个数组作为参数,p1,p2,p3都是 Promise 实例,如果不是,就会先调用下面讲到的Promise.resolve方法,将参数转为Promise实例,再进一步处理。

    p的状态由p1,p2,p3决定,分成两种情况。

    (1)只有p1,p2,p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1,p2,p3的返回值组成一个数组,传递给p的回调函数。

    (2)只要p1,p2,p3之中有一个被rejected,p的状态就变成rejected,此时第一个被rejected的实例的返回值,会传递给p的回调函数。

    Promise.race方法也是用于将多个Promise实例包装成一个新的实例。

    const p = Promise.race([p1, p2, p3]);

    上面代码中,只要p1,p2,p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。

    Promise.resolve()将现有对象转为 Promise 对象。

    2. 一道关于Promise的应用示例

    const timeout = ms => new Promise((resolve) => {
        setTimeout(() => {
          resolve();
        }, ms)
      });
    
      const ajax1 = () => timeout(1000).then(() => {
        console.log('1')
        return 1;
      });
    
      const ajax2 = () => timeout(1000).then(() => {
        console.log('2')
        return 2
      });
    
      const ajax3 = () => timeout(1000).then(() => {
        console.log('3')
        return 3
      });
    
      const mergePromise = ajaxArray => {
        let result = []
        let promise = Promise.resolve()
        ajaxArray.forEach(function (item) {
          promise = promise.then(item)
          result.push(promise)
        })
        return Promise.all(result)
      };
    
      mergePromise([ajax1, ajax2, ajax3]).then(data => {
        console.log('done')
        console.log(data) //[1,2,3]
      });

    按顺序合并Promise,并将返回结果以数组的形式输出。

  • 相关阅读:
    DIY 作品 及 维修 不定时更新
    置顶,博客中所有源码 github
    openwrt PandoraBox PBR-M1 极路由4 HC5962 更新固件
    使用 squid 共享 虚拟专用网至局域网
    第一次参加日语能力测试 N5
    libx264 libfdk_aac 编码 解码 详解
    开发RTSP 直播软件 H264 AAC 编码 live555 ffmpeg
    MFC Camera 摄像头预览 拍照
    http2 技术整理 nginx 搭建 http2 wireshark 抓包分析 server push 服务端推送
    plist 图集 php 批量提取 PS 一个个切
  • 原文地址:https://www.cnblogs.com/RainyBear/p/9337983.html
Copyright © 2011-2022 走看看