vue Promise.then.then详解Promise.all

直接贴代码了,具体自己去控制台感受吧!可以直接复制第3个的里面包含了全部的测试代码,自己建立个html文件,打开控制台查看!

使用场景1

每一个结果,都需要依赖于另外一个结果

以下代码测试,第一个直接foo,然后foo传入第二个,第二个等待2秒后加2,第三个等待第二个完成后3秒后+3,最后合并输出结果

  Promise.resolve('foo')
  .then(string=> {
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
        string += '2';
        resolve(string);
      }, 2000);
    });
  })
  .then(string=>{
    setTimeout(function() {
      string += '3';
      console.log(string);
    }, 3000)
    return string;
  })
  .then(string=> {
    console.log(string);
  });

使用场景2

每个场景都是独立的,但是需要执行完成,才去执行另外的

这个的话就是最后会直接输出数组  ["s1", "s2"] ,分别是第一个和第二个的结果

vue 中使用

methods: {
  c1() {
      return new Promise((resolve, reject) => {
        resolve('s1')
      })
    },
    c2() {
      return new Promise((resolve, reject) => {
        resolve('s2')
      })
    },
    c3(){
      Promise.all([this.c1, this.c2]).then(res => {
          console.log(res)
      })
    }
    }

3、js示例,自行控制台打印即可

 Promise.resolve('foo')
        .then(string => {
            return new Promise(function(resolve, reject) {
                setTimeout(function() {
                    string += '2';
                    resolve(string);
                }, 2000);
            });
        })
        .then(string => {
            setTimeout(function() {
                string += '3';
                console.log(string);
            }, 3000)
            return string;
        })
        .then(string => {
            console.log(string);
        });

    let p1 = new Promise((resolve, reject) => {
        resolve('第一个成功')
    })

    let p2 = new Promise((resolve, reject) => {
        resolve('第二个成功')
    })

    let p3 = new Promise((resolve, reject) => {
        reject('第三个失败')
    })
// 场景1
    Promise.all([p1, p2]).then((result) => {
        console.log(result) //['成功了', 'success']
    }).catch((error) => {
        console.log(error)
    })
// 场景2,如果失败,则会直接进入catah
    Promise.all([p1, p2, p3]).then((result) => {
        console.log(result) //['成功了', 'success']
    }).catch((error) => {
        console.log(error)
    })


相关内容

发表评论

验证码:
点击我更换图片

最新评论