Promise方法

114 阅读6分钟

「这是我参与2022首次更文挑战的第3天,活动详情查看:2022首次更文挑战」。

简介

Promise 是异步编程的一种解决方案。有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数(回调地狱),但promise本身不能说是异步,promise.then 是异步。

用法

创建实例时,必须传入函数作为参数

new Promise(() => {});
new Promise(); // 报错

resolve——将Promise对象的状态从pending变为resolved,将异步操作的结果,作为参数传递出去 reject——将Promise对象的状态从pending变为rejected,将异步操作报出的错误,作为参数传递出去

let promise = new Promise((resolve, reject) => {
  // do something
  if (true) {
    // 将参数返回,供then方法使用
    resolve("data");
  } else {
    // 将参数返回,供then方法使用
    reject("error");
  }
});

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

promise.then(
  value => {
    // resolved时调用,value为resolve函数返回的参数
    console.log(value);
  },
  err => {
    // rejected时调用,err为reject函数返回的参数
    console.log(err);
  }
);

如果then方法只有一个函数参数时候,此时为resolved状态的回调方法,而且只有状态为resolved时才能调用,如果返回的是rejected状态,则报错 Uncaught (in promise) error

实例

let promise = new Promise(function(resolve) {
  console.log("Promise");
  resolve();
  console.log("!!!")
});

promise.then(function() {
  console.log("resolved.");
});
console.log("Hi!");

// Promise
// !!!
// Hi!
// resolved

const p1 = new Promise((_, reject) => {
    setTimeout(() => reject('error'), 3000);
  });
  
  const p2 = new Promise(resolve => {
    setTimeout(() => resolve(p1), 1000);
  });
  
  p2.then(
    result => console.log(result),
    error => console.log(error) 
  );
  
  // error

p2 1秒之后状态改变,resolve返回 p1,p2.then方法针对resolved状态返回的回调函数,又过了 2 秒,p1变为rejected(所以then语句针对p1),导致触发catch方法指定的回调函数 error => console.log(error)

then方法

then方法是定义在原型对象Promise.prototype上,then方法的两个参数都是非必选的

  1. 当未传入参数时,then方法会返回一个新的promise(状态和原promise相同)。
const promise = new Promise(resolve => {
  resolve("resolve");
});

let p = promise.then();
console.log(promise);  // Promise { 'resolve' }
console.log(p);   // Promise { <pending> }
  1. 上一个promise未被成功调用then方法时,返回的结果如情形1
const promise = new Promise(reject => {
    reject("reject");
  });
  let a = promise.then(value => {
    console.log(value);  //Promise { <pending> }
  });
  console.log(a) //reject
  1. 上一个promise被成功调用then方法,但出现报错,返回一个reject('error')的promise
const promise = new Promise(resolve => {
    resolve("resolve");
  });
  
  let p = promise.then(value => {
    console.log(value);
    throw new Error("fail1");
  });
  console.log(p);

在这里插入图片描述

  1. 给then方法手动返回一个promise,此时会覆盖掉默认的行为,返回值为新增的promise
const promise = new Promise(resolve => {
    resolve("88888");
});

let p = promise.then(
    (value) =>
        new Promise(resolve => {
            resolve("99999");
        })
);
console.log(p);  //Promise { <pending> }
const promise = new Promise(resolve => {
    resolve("88888");
});

let p = promise.then(
    (value) =>
        new Promise(resolve => {
            resolve("99999");
        }).then(value => {
            console.log(value)  //99999 then返回上一个promise的值  
        })
);
console.log(p); // Promise { <pending> }

catch方法

catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名,用于指定发生错误时的回调函数

const promise = new Promise((_, reject) => {
    reject("i'm reject");
});

promise.then(value => {
    console.log(value);
})
    // 发生错误,或者reject时执行
    .catch(value => {
        console.log(value);  //i'm reject
    });
const promise = new Promise(resolve => {
    resolve("resolve");
  });
  promise
    .then(value => {
    console.log(value);  //resolve
    throw new Error("fail12356");
  })
    .then(() => {
    throw new Error("fail2898");
  })
    .catch(value => {
    console.log(value); //fail12356
  });

catch会优先打印打印第一个错误,当第一个错误解决之后(注释掉就ok),catch里才会打印第二个错误 catch的返回值仍是promise,返回promise的方式和then相似,因此,catch后仍然可以调用then方法

finally方法

finally()方法用于指定不管 Promise 对象最后状态如何,都会执行的操作。finally方法的回调函数不接受任何参数,与状态无关的,不依赖于 Promise 的执行结果

const promise = new Promise(resolve => {
  resolve("resolve");
});
promise.finally(() => {
  console.log(11); // 11
});

resolve方法

有时需要将现有对象转为 Promise 对象,Promise.resolve()方法就起到这个作用,且实例状态为resolve

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))
  1. 参数是一个promise实例
const promise = new Promise(resolve => {
  resolve("resolve");
});
let p = Promise.resolve(promise);
console.log(p == promise);  //true
console.log(p); //Promise { 'resolve' }
  1. 参数是一个thenable对象 thenable对象指的是具有then方法的对象,Promise.resolve()方法会将这个对象转为 Promise 对象,然后就立即执行thenable对象的then()方法
// thenable对象
let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};

let p1 = Promise.resolve(thenable);
p1.then(function (value) {
  console.log(value);  // 42
});
  1. 参数不是对象
const p = Promise.resolve('Hello');
p.then(function (s) {
  console.log(s) // Hello
});
  1. 不带参数
Promise.resolve();  
console.log(Promise.resolve(); );  //Promise { undefined }
// 相当于
new Promise(resolve => resolve(undefined))

reject方法

Promise.reject(reason)方法也会返回一个新的 Promise 实例,该实例的状态为rejected

const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))

all方法

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

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

p1、p2、p3都是 Promise 实例,p的状态由p1、p2、p3决定:

  • 只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
  • 只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。

如果作为参数的 Promise 实例,自己定义了catch方法,那么它一旦被rejected,并不会触发Promise.all()的catch方法

const p1 = new Promise(resolve => {
    resolve("hello");
  })
  .then(result => result)
  .catch(e => e);
  
  const p2 = new Promise(() => {
    throw new Error("报错了");
  })
  .then(result => result)
  .catch(e => e); // p2实际上是catch返回的promise实例
  
  Promise.all([p1, p2])
    .then(result => console.log(result))
    .catch(e => console.log(e));

在这里插入图片描述

race方法

Promise.race()方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。和all方法区别是:p1、p2、p3之中哪一个实例先改变状态,p的状态就跟着改变,对应的返回值也传递给p的回调函数。

allSettled方法

和all最像,区别在于:会把所有参数实例都返回结果

let p2 = Promise.reject(2);
let promise = Promise.allSettled([1, p2, 3]);
promise.then(value => {
  console.log(value); // [{status: "fulfilled", value: 1},{status: "rejected", reason: 2},{status: "fulfilled", value: 3}]
});
console.log(promise);

Promise.allSettled()的返回的promise实例状态只可能变成resolved,它的监听函数收到的参数是一个数组,该数组的每个成员都是一个对象,每一个对象都有status属性,该属性的值只可能是字符串fulfilled或字符串rejected。fulfilled时,对象有value属性,rejected时有reason属性,对应两种状态的返回值。

any方法

和all方法相反,只要有一个是fulfilled状态就返回fulfilled状态;但全部为rejected才会返回rejected状态

let p1 = Promise.reject(1);
let p2 = Promise.reject(2);
let promise = Promise.any([p1, p2, 3]);
promise.then(value => {
  console.log(value); // 3
});
console.log(promise);

try方法

不知道或者不想区分,函数f是同步函数还是异步操作,但是想用 Promise 来处理它。因为这样就可以不管f是否包含异步操作,都用then方法指定下一步流程,用catch方法处理f抛出的错误。一般就会采用下面的写法。

const f = () => console.log('now');
Promise.resolve().then(f);
console.log('next');
// next 
// now  then方法异步处理输出;本来f是同步函数,却放在事件循环末尾执行,于是有了try方法

const f = () => console.log('now');
Promise.try(f);
console.log('next');
// now
// next

手写Promise

来源博主——高级前端进阶

Promise 输出什么呢?(面试题)

必知必会