promise工作中应用

promise工作中的实际应用

这周在工作开发中碰到了一个场景，就是a函数的请求参数依赖于b函数的请求返回结果

代码：

methods:{
  getId(){
    this.$http(url).then(res =>{
      console.log(res)
    }).catch(err => console.log(err))
  },
  getData(){
    this.getId()
    //相关请求
  }
}

上面代码的意思表示，getData()函数的请求参数依赖于getId()函数的返回值，但是有时候可能会发生getId()函数还在等待服务器返回数据的时候，getData()就执行了，由于没有拿到getId()返回的参数，那么你执行的getData()一定会因为缺少请求参数而请求失败

解决：

methods:{
  getId(){
    return new Promise((resolve,reject)=>{
      this.$http(url).then(res =>{
        resolve(res)
      }).catch(err => reject(err))
    })
  },
  getData(){
    this.getId(res => {
      //相关请求
    })
  } 
}

我们可以通过返回一个新的promise，来解决这个问题，这样就能够确保getId()执行完拿到我们需要的依赖参数，这样就能保证getData()请求成功。

除了这种通过.then()的形式去类似链式的请求，我们还可以async await来简化链式处理

代码：

async getData(){
  let res = await this.getId()
  //res就相当于你通过.then()出来的结果，即resolve(res)中的res
}

//由于没有了.catch()方法我们需要手动try-catch哦
async getData(){
  try {
  	let res = await this.getId()
  } catch (error) {
		console.log(error)
  }
}

那么有依赖式的请求，肯定就有并行式的请求，我们可以采用Promise.all()

代码:

// MDN 文档例子
var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
}); 

Promise.all([p1, p2, p3]).then(values => { 
  console.log(values); // [3, 1337, "foo"] 
});

但是呢，，好用的东西一般都是有坑的，那就是Promise.all()当其中并行执行的一个出错，整个请求就挂掉了。

那有什么解决办法呢？

ES11,出现了Promise.allSettled()就可以解决我们的需求了

代码

Promise.allSettled([p1,p2,p3]).then(res =>{
  console.log(res)
})

上面的res也是会输出一个数组，根据你allSettled()中传入的请求顺序，就是数组返回结果的顺序。

对于每个结果对象，都有一个 status 字符串。status一共有三个状态pending、fulfilled、rejected（未决定，履行，拒绝）,如果它的值为 fulfilled，则结果对象上存在一个 value 。如果值为 rejected，则存在一个 reason 。value（或 reason ）反映了每个 promise 决议（或拒绝）的值。