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,并将返回结果以数组的形式输出。

  • 相关阅读:
    AJAX 大全
    has value '1.8', but '1.7' is required
    VS2010官方下载地址
    win10桌面显示我的电脑
    使用 CAST
    for循环+canvas实现黑客帝国矩形阵
    C# Lambda
    win7系统部分便笺的元数据已被损坏怎么恢复
    SQL查询所有表,所有列
    truncate和delete之间有什么区别
  • 原文地址:https://www.cnblogs.com/RainyBear/p/9337983.html
Copyright © 2011-2022 走看看