js中的promise静态/实例常用方法介绍以及async await应用

1,115 阅读4分钟

promise官方描述

一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知值的代理。它让你能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。这样使得异步方法可以像同步方法那样返回值:异步方法并不会立即返回最终的值,而是会返回一个 promise,以便在未来某个时候把值交给使用者。(暂且理解成一个可以处理异步代码的对象把)。每个promise对象都有以下三个状态:

  • 待定(pending) :初始状态,既没有被兑现,也没有被拒绝。
  • 已兑现(fulfilled) :意味着操作成功完成。
  • 已拒绝(rejected) :意味着操作失败。

promise静态方法介绍

静态方法为promise对象直接调用的方法

Promise.all([promise,promise])

用法: Promise.all()接受的是一个iterable类型(包含:Array,Map,Set),返回值是一个数组,方法需要接受的所有promise都为fulfilled状态才执行resolve的回调,结果为正序的结果数组,如果多个promise中有一个状态为rejected,那么promise.all执行对应的reject方法,回调结果为第一个报错promise的结果(哪怕只有一个rejected的结果,此时promise.all依然不会执行resolve回调,即不会触发.then)

案例

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
     setTimeout(() => {
        resolve('foo')
     }, 100);
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // 结果为:3 42 foo
});

Promise.allSettled([promise,promise])

用法: Promise.allSettled()接受的是一个iterable类型(包含:Array,Map,Set),返回值是一个数组,等待所有promise执行完毕后走resolve回调(不管每个promise实例的结果为fulfilled或是rejected),所以Promise.allSettled不会执行catch回调

案例

const promise1 = Promise.reject(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('foo')
      }, 100);
});
Promise.allSettled([promise3,promise2,promise1]).then(values => {
      console.log(values);
      /*  结果为:
          values === [
            {status: 'fulfilled', value: 'foo'}
            {status: 'fulfilled', value: 42}
            {status: 'rejected', reason: 3}
          ]
      **/
})

Promise.any([promise,promise])

用法: Promise.any()接受的是一个iterable类型(包含:Array,Map,Set),只要有任意一个promise实例的结果为fulfilled那么Promise.any()就会执行resolve的回调,并且结果为第一个成功回调的resolve的value,如果全部的promise的实例都为rejet,Promise.any才会执行catch回调

案例

const promise1 = Promise.reject('失败');
const promise2 = new Promise((resolve,reject)=> {
  setTimeout(() => {
    resolve('成功2')
  }, 200);
})
const promise3 = Promise.resolve('成功3');
Promise.any([promise1,promise2,promise3]).then(values => {
  console.log(values); // 结果为:成功3
}).catch(err => {
  console.log(err,'err');
})

Promise.race([promise,promise])

用法: Promise.race()接受的是一个iterable类型(包含:Array,Map,Set),一旦迭代器中的某个 promise 解决或拒绝,返回的 promise 就会解决或拒绝。(竞速函数,意思是不管里面的promise哪个先出结果,也不管结果是啥,只要有一个实例出结果都会直接走Promise.any的resolve或者reject回调,这个取决于最快的promise函数是fulfilled还是rejected状态)

案例

const promise1 = Promise.reject('失败');
const promise2 = new Promise((resolve,reject)=> {
  setTimeout(() => {
    resolve('成功2')
  }, 200);
})
const promise3 = Promise.resolve('成功3');
Promise.race([promise1,promise2,promise3]).then(values => {
  console.log(values); 
}).catch(err => {
  console.log(err,'err'); // 结果为:失败
})

Promise.resolve(value)

用法: 返回结果为一个promise对象

案例

const promise1 = Promise.resolve(1)
promise1.then(res =>{
  console.log(res,'成功');// 结果为 1
}).catch(err => {
  console.log(err,'失败'); 
})

Promise.reject(value)

用法: 返回结果为一个promise对象

案例

const promise1 = Promise.reject(1)
promise1.then(res =>{
  console.log(res,'成功');
}).catch(err => {
  console.log(err,'失败'); // 结果为 1
})

promise实例方法介绍

实例方法为promise对象通过new关键字生成的实例对象才能调用的方法,方法挂载在promise.prototype中

Promise.prototype.then()

用法: 返回结果为一个promise对象,它最多需要有两个参数:Promise 的成功和失败情况的回调函数。promise对象执行resolve时,执行.then回调

案例

const promise1 = new Promise((resolve, reject) => {
  resolve('Success!');
});

promise1.then((value) => {
  console.log(value);
  // expected output: "Success!"
});

Promise.prototype.catch()

用法: 返回结果为一个promise对象,它最多需要有两个参数:Promise 的成功和失败情况的回调函数。reject,执行.catch

案例

const promise1 = new Promise((resolve, reject) => {
  reject('Error!');
});

promise1.catch((value) => {
  console.log(value);
  // expected output: "Error!"
});

Promise.prototype.finally()

用法: 返回结果为一个promise对象,它最多需要有两个参数:promise对象不管执行resolve或者reject都会走finally回调

案例

const promise1 = Promise.reject(1)
promise1.then(res =>{
  console.log(res,'成功');
}).catch(err => {
  console.log(err,'失败');
}).finally(() => {
  console.log('必定会走finally');
})

async await用法介绍

介绍: async 函数是使用async关键字声明的函数。 async 函数是AsyncFunction构造函数的实例, 并且其中允许使用await关键字。asyncawait关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用promise。await必须写在async关键字内,await一般等待一个promise,如果等待的是promise,那么 await结果的值为promise中reseolve的value,如果await等待的不是一个promise,那么await等到的结果为函数中return的值,async函数的返回值为一个promise,所以支持链式调用

    const promose1 = () => {
      return new Promise((resolve,reject)=> {
        setTimeout(() => {
          resolve('Promise!!')
        }, 1000);
      })
    }
    const function1 = () => {
      console.log('Function!!');
      return 1
    }
    async function asyncTest() {
      let value = await promose1()
      console.log(value);  // Promise!!
    }
    async function asyncTest1() {
      let value = await function1()
      console.log(value); // Function!!
    }
    asyncTest()  // 此方法调用结果返回值为promise对象
    asyncTest1() // 此方法调用结果返回值为promise对象

记录一下

本文简单的介绍了一下promise以及async await的常用用法,不足之处欢迎指正,下次有时间尝试手写一篇promise源码的博客,感谢