美文网首页
Promise初级教程3:解析流程

Promise初级教程3:解析流程

作者: 胖乎乎的萝卜 | 来源:发表于2016-01-27 17:35 被阅读849次

接上篇,下面的序号是为了与规范中一致。

2.3. Promise 解析流程

这里主要是根据规范来看,要注意哈,搬运工又来了。

Promise 解析过程 是以一个 promise 和一个值 x 做为参数的抽象过程,可表示为 [[Resolve]](promise, x), 过程如下:

2.3.1 如果 promise 和 x 指向相同的值, 使用 TypeError 做为原因将 promise 拒绝,如下:
var promise = Promise.resolve('done').then(function () {
    return promise;
});

promise.then(null, function (reason) {
    console.log('error', reason);
});
// error TypeError: Chaining cycle detected for promise #<Promise>
2.3.2 如果 x 是一个 promise , 采用其状态:
  • 2.3.2.1 如果 x 是 pending 状态,promise 必须保持 pending 走到 x fulfilled 或 rejected。
  • 2.3.2.2 如果 x 是 fulfilled 状态,将 x 的值用于 fulfill promise。
  • 2.3.2.3 如果 x 是 rejected 状态, 将 x 的原因用于 reject promise。

如下:

var dummy = { dummy: "dummy" };

// 2.3.2.1,x 是 pending 状态
function xFactory() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve(1000);
        }, 1000);
    });
}

var promise = Promise.resolve(dummy).then(function () {
    return xFactory();
});

promise.then(
    function (val) {
        console.log('resolve', val);
    },
    function (e) {
        console.log('reject', e);
    }
);
// resolve 1000

// 2.3.2.2,x 是 fulfilled 状态
var promise = Promise.resolve(dummy).then(function () {
    return Promise.resolve('done');
});

promise.then(
    function (val) {
        console.log('resolve', val);
    },
    function (e) {
        console.log('reject', e);
    }
);
// resolve done

// 2.3.2.3,x 是 rejected 状态
var promise = Promise.resolve(dummy).then(function () {
    return Promise.reject('error');
});

promise.then(
    function (val) {
        console.log('resolve', val);
    },
    function (e) {
        console.log('reject', e);
    }
);
// reject error
2.3.3 如果 x 是一个对象或一个函数:

2.3.3.1 将 then 赋为 x.then

// 1. 当 x 为没有原型的对象时
var numberOfTimesThenWasRetrieved = 0;

function xFactory() {
    return Object.create(null, {
        then: {
            get: function () {
                ++numberOfTimesThenWasRetrieved;
                return function thenMethodForX(onFulfilled) {
                    onFulfilled();
                };
            }
        }
    });
}

var promise = Promise.resolve(dummy).then(function onBasePromiseFulfilled() {
    return xFactory();
});

console.log(promise);
// Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}

promise.then(function () {
    console.log(numberOfTimesThenWasRetrieved);
});
// 1

// 2. 当 x 为有基本原型的对象,修改如下
function xFactory() {
    return Object.create(Object.prototype, {
        then: {
            get: function () {
                ++numberOfTimesThenWasRetrieved;
                return function thenMethodForX(onFulfilled) {
                    onFulfilled();
                };
            }
        }
    });
}
// 1

// 3. 当 x 为函数时
function xFactory() {
    function x() { }

    Object.defineProperty(x, "then", {
        get: function () {
            ++numberOfTimesThenWasRetrieved;
            return function thenMethodForX(onFulfilled) {
                onFulfilled();
            };
        }
    });

    return x;
}
// 1

2.3.3.2 如果在取 x.then 值时抛出了异常,则以这个异常做为原因将 promise 拒绝

// 取 x.then 的时候,出现错误
function xFactory() {
    return Object.create(Object.prototype, {
        then: {
            get: function () {
                throw Error('error');
            }
        }
    });
}
promise_catch_1.png

2.3.3.3 如果 then 是一个函数, 以 x 为 this 调用 then 函数,且第一个参数是 resolvePromise,第二个参数是 rejectPromise,且:

  • 2.3.3.3.1 当 resolvePromise 被以 y 为参数调用, 执行 [[Resolve]](promise, y)
  • 2.3.3.3.2 当 rejectPromise 被以 r 为参数调用, 则以 r 为原因将 promise 拒绝。
  • 2.3.3.3.3 如果 resolvePromise 和 rejectPromise 都被调用了,或者被调用了多次,则只第一次有效,后面的忽略。
  • 2.3.3.3.4 如果在调用 then 时抛出了异常,则。
    • 2.3.3.3.4.1 如果 resolvePromise 或 rejectPromise 已经被调用了,则忽略它。
    • 2.3.3.3.4.2 否则, 以 e 为 reason 将 promise 拒绝。

这个有点绕,看测试代码也挺复杂。这里就不贴代码了(测试代码900多行),有兴趣直接看 这里

所以,回到之前的问题:

promise_resolve_4.png

这个看 2.3.3.4,因为请求错误的接口,在调用 then 时抛出了异常,所以会进入到 Rejected 状态。

哎,感觉这个流程还是有点问题,再琢磨琢磨。

相关文章

  • Promise初级教程3:解析流程

    接上篇,下面的序号是为了与规范中一致。 2.3. Promise 解析流程 这里主要是根据规范来看,要注意哈,搬运...

  • Promise原理解析

    Promise原理解析 标签(空格分隔): Node.js Promise原理解析 简介 Promise 对象用于...

  • 12306之下单流程解析

    前言 本套教程共分3章: 12306之登录流程解析 12306之余票查询解析 12306之下单流程解析 本套内容主...

  • 12306之余票查询流程解析

    前言 本套教程共分3章: 12306之登录流程解析 12306之余票查询解析 12306之下单流程解析 本套内容主...

  • 12306之登录流程解析

    前言 本套教程共分3章: 12306之登录流程解析 12306之余票查询解析 12306之下单流程解析 本套内容主...

  • promise

    原始方法 promise实现 promise源码 (内涵注释) 流程图

  • OkHttp3源码解析(整体流程)

    转载自OkHttp3源码解析(整体流程) 今天主要讲一下 OkHttp3 源码解析(整体流程),主要分为四大块: ...

  • Promise对象原理解析

    Promise对象原理解析 ES6 原生提供了 Promise 对象。所谓 Promise,就是一个对象,用来传递...

  • JavaScript面试:什么是Promises ?

    什么是promise? promise是将来可能会产生单个值的对象 :已解析的值或未解析的原因(例如,发生网络错误...

  • ES6 Primise异步编程

    异步操作流程化的手段 #Promise处理异步操作 Promise,使异步操作变得流程化的手段之一,例如“异步A ...

网友评论

      本文标题:Promise初级教程3:解析流程

      本文链接:https://www.haomeiwen.com/subject/ioodkttx.html