Promise对象深入理解

Posted 2021-12-28 wangjie-nf

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Promise对象深入理解相关的知识，希望对你有一定的参考价值。

基本用法

Promise 对象是一个构造函数，下面的例子生成一个 promise 对象

const promise = new Promise((resolve, reject)=>
    if(true)
        resolve(‘异步操作成功了‘);
    else
        rejecte(‘异步操作失败了‘);
    
)

Promise 构造函数接受一个函数为参数，这个函数还接受两个参数，这两个参数都是函数

第一个函数用于异步成功，并将异步成功的结果以参数的形式传递出去，同时 promise 的状态改为 resolved

第二个函数用于异步失败，并将异步失败的结果以参数的形式传递出去，同时 promise 的状态改为 rejected

返回另一个 Promise 实例

通常情况 reject 函数返回的是异步错误信息，resolve 函数返回的是正常的理想值，而这个值也可以是另一个 Promise 实例，

如果返回的是另一个 Promise 的实例，那么这个实例将决定当前 Promise 实例的状态，自己本来的状态将失效

const p1 = new Promise(function (resolve, reject) 
  // ...
);

const p2 = new Promise(function (resolve, reject) 
  // ...
  setTimeout( () => resolve(p1),2000 ); // p1 的状态将决定 p2 的状态,而不是等到 2s 后
)

Promise.prototypeof.then

then 方法接受两个函数为参数，通常需要将 Promise 异步的结果作为参数传进去

第一个函数是异步成功时（resolved）执行

第一个函数是异步失败时（resolved）执行（可以不传该函数，改用 catch 方法监听异步的失败）

promise.then((res)=>
    console.log(res);
, (rej)=>
    cnosole.log(rej);
)

then 方法会将新的 Promise 对象，因此可以链式调用。如果有返回值，那么返回值将作为参数传给新的 Promise 对象

promise.then((res)=>
    console.log(res);
    return ‘newPromise‘;
, (rej)=>
    cnosole.log(rej);
).then((res => 
    console.log(res);
)

如果返回的新的 promise对象存在异步操作，例如返回一个新的 Promise 实例对象，那么后面的 then 方法会等到这个promise状态发生改变时才执行

Promise.prototype.catch

上面有说到 then 方法接收两个函数为参数，分别是成功和失败时执行的，并且建议失败的函数改用 catch 方法

catch 可以实现 then 方法第二个参数的功能，但是它可以上代码跟直观

let a = 1;
let promise = new Promise(function(resolve, reject)
    if(a==10)
        resolve(‘成功‘);
    else
        reject(‘失败‘);
    
);

promise.then(res=>
    console.log(res);
).catch(err=>  
    console.log(err);
)

promise 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。

Promise.prototype.finally()

finally 方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。

promise
.finally(() => );

Promise.resolve()

将现有对象转换为 promise 对象，分下面四种情况

1. 如果参数是 Promise 实例，那么 promise.resolve 将不做任何修改、原封不动地返回这个实例。

2. 如果参数是一个 thenable 对象。thenable 对象指的是具有 then 方法的对象，比如下面这个对象。Promise.resolve 方法会将这个对象转为 Promise 对象，然后就立即执行thenable对象的then方法。

let thenable = 
  then: function(resolve, reject) 
    resolve(42);
  
;

let p1 = Promise.resolve(thenable);
p1.then(function(value) 
  console.log(value);  // 42
);

3. 如果参数是一个原始值，或者是一个不具有then方法的对象，则 Promise.resolve 方法返回一个新的 Promise 对象，状态为 resolved。下面代码生成一个新的 Promise 对象的实例p。由于字符串 Hello 不属于异步操作（判断方法是字符串对象不具有 then 方法），返回 Promise 实例的状态从一生成就是 resolved，所以回调函数会立即执行。Promise.resolve 方法的参数，会同时传给回调函数。

const p = Promise.resolve(‘Hello‘);

p.then(function (s)
  console.log(s)
);
// Hello

4. Promise.resolve 方法允许调用时不带参数，直接返回一个 resolved 状态的 Promise 对象。需要注意的是，立即 resolve() 的 Promise 对象，是在本轮“事件循环”（event loop）的结束时执行，而不是在下一轮“事件循环”的开始时。

setTimeout(function () 
  console.log(‘three‘);
, 0); // 下一轮“事件循环”开始时执行，

Promise.resolve().then(function () 
  console.log(‘two‘);
); // 在本轮“事件循环”结束时执行

console.log(‘one‘);

// one
// two
// three

Promsie.reject()

同样也是将现有对象转换为 promise 对象，只不过 promise 对象的状态是 rejected

const p = Promise.reject(‘出错了‘);

　p.catch(rej => console.log(rej))

Promise 的执行顺序

Promise 构造函数本身是同步执行的

then 方法会被放到微任务（microtask）队列中

setTimeout 定时器会放到宏任务（macrotask）队列中

当同步任务执行完后，微任务队列中的任务依次进入主线程执行，当微任务队列为空以后，宏任务队列中的任务依次进入主线执行

setTimeout(() => 
    console.log(0);
,0)

new Promise(resolve => 
    resolve(1);
    Promise.resolve().then(t => 
        console.log(2);
    )
    console.log(3);
).then(t => 
console.log(t);
)

console.log(4);
// 3
// 4
// 2
// 1
// 0