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

现在分析上面的代码

1. 遇到定时器，将它放到宏任务队列中（这是第一个宏任务）

2. 同步执行构造函数

3. 在构造函数中遇到一个 then 方法，将他放到微任务队列中（这是第一个微任务）

4. console.log(3) 执行，打印出 3

5. 遇到第二个 then 方法，将他放到微任务队列的末尾

6. console.log(4) 执行，打印出 4

7. 读取微任务队列中的任务，依次打印出 2 1

8. 读取宏任务队列中的任务，打印出 0

posted on 2019-06-07 17:48 盗将行阅读(711) 评论(0) 编辑收藏举报

刷新页面返回顶部

盗将行