puddlejumper26 commented 3 years ago

1.0 什么是 Promise

Promise 的特点

它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象
Promise是JS异步编程中的重要概念，异步抽象处理对象，是目前比较流行Javascript异步编程解决方案之一
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果
对象的状态不受外界的影响。Promise对象代表一个异步操作，有三种状态：
- - pending（进行中）、
- - fulfilled（已成功）
- - rejected（已失败）
一旦状态改变，就不会再变，任何时候都可以得到这个结果,对象的状态改变，只有两种可能：
- - pending -> fulfilled
- - pending -> rejected
状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）
如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果

Promise A+规范

核心的 Promises/A+ 规范不设计如何创建、解决和拒绝 promise，而是专注于提供一个通用的 then 方法

Promise 优点

避免了层层嵌套的回调函数
提供统一的接口

Promise 缺点

无法取消Promise，一旦新建它就会立即执行，无法中途取消
如果不设置回调函数，Promise内部抛出的错误，不会反应到外部
当处于pending状态时，无法得知目前进展到哪一个阶段

1.1 几种常见异步编程方案

回调函数 (callback)
事件监听 (event listener)
发布/订阅 (subscribe)
Promise对象

E.g. Callback function

我们用Jquery的ajax获取数据时都是以回调函数方式获取的数据

$.get(url, (data) => {
    console.log(data)
)

需要发送多个异步请求并且每个请求之间需要相互依赖那这时我们只能以嵌套方式来解决形成 "回调地狱". 这样一来，在处理越多的异步逻辑时，就需要越深的回调嵌套

$.get(url, data1 => {
    console.log(data1)
    $.get(data1.url, data2 => {
        console.log(data1)
    })
})

1.2 问题

代码逻辑书写顺序与执行顺序不一致，不利于阅读与维护。
异步操作的顺序变更时，需要大规模的代码重构。
回调函数基本都是匿名函数，bug 追踪困难。
回调函数是被第三方库代码（如上例中的 ajax ）而非自己的业务代码所调用的，造成了 IoC 控制反转。

1.3 Promise 处理多个相互关联的异步请求

const request = url => { 
    return new Promise((resolve, reject) => {
        $.get(url, data => {
            resolve(data)
        });
    })
};

// 请求data1
request(url).then(data1 => {
    return request(data1.url);   
}).then(data2 => {
    return request(data2.url);
}).then(data3 => {
    console.log(data3);
}).catch(err => throw new Error(err));

puddlejumper26 commented 3 years ago

2.0 Promise 的基本方法【then】, 【catch】, 【promise chain】

ES6规定Promise对象是一个构造函数，用来生成Promise实例

Promise 构造函数是同步执行的，promise.then 中的函数是异步执行的

const promise = new Promise(function(resolve, reject) {
// ... some code

if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});

还是使用回调函数，只不过是把回调封装在了内部，使用上一直通过 then 方法的链式调用，使得多层的回调嵌套看起来变成了同一层的，书写上以及理解上会更直观和简洁一些

2.1 Then

promise.then(onFulfilled, onRejected)

promise必须实现then方法（可以说，then就是promise的核心），而且then必须返回一个promise，同一个promise的then可以调用多次，并且回调的执行顺序跟它们被定义时的顺序一致
then可以接受另一个promise传入，也接受一个“类then”的对象或方法，即thenable对象
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数
then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

2.2 Catch

在链式写法中可以捕获前面then中发送的异常
注意这里必须是异常,

promise.catch(onRejected)
相当于
promise.then(null, onRrejected);

// 注意
// onRejected 不能捕获当前onFulfilled中的异常
promise.then(onFulfilled, onRrejected); 

// 可以写成：
promise.then(onFulfilled)
       .catch(onRrejected);

2.3 Promise Chain

promise.then方法每次调用都返回一个新的promise对象所以可以链式写法

function taskA() {
    console.log("Task A");
}
function taskB() {
    console.log("Task B");
}
function onRejected(error) {
    console.log("Catch Error: A or B", error);
}

var promise = Promise.resolve();
promise
    .then(taskA)
    .then(taskB)
    .catch(onRejected) // 捕获前面then方法中的异常

Source

puddlejumper26 commented 3 years ago

3.0 With Promise 和 Without

Without

回调函数要一层一层嵌套

//不使用Promise        
http.get('some_url', function (id) {
//do something
http.get('getNameById', id, function (name) {
    //do something
    http.get('getCourseByName', name, function (course) {
        //dong something
        http.get('getCourseDetailByCourse', function (courseDetail) {
            //do something
        })
    })
})
});

With

更简洁一些

还是使用回调函数，只不过是把回调封装在了内部，使用上一直通过 then 方法的链式调用，使得多层的回调嵌套看起来变成了同一层的，书写上以及理解上会更直观和简洁一些

//使用Promise
function getUserId(url) {
return new Promise(function (resolve) {
    //异步请求
    http.get(url, function (id) {
        resolve(id)
    })
})
}
getUserId('some_url').then(function (id) {
//do something
return getNameById(id); // getNameById 是和 getUserId 一样的Promise封装。下同
}).then(function (name) {
//do something
return getCourseByName(name);
}).then(function (course) {
//do something
return getCourseDetailByCourse(course);
}).then(function (courseDetail) {
//do something
});

puddlejumper26 commented 3 years ago

4.0 Promise 运用原理和源码的实现流程

真正的Promise涉及到microtask的概念可以看看event loop相关知识
https://zhuanlan.zhihu.com/p/101374817
https://github.com/puddlejumper26/blogs/issues/177

macrotasks: script(整体代码),setTimeout,setInterval,setImmediate,I/O,UI rendering,event listner

microtasks: process.nextTick, Promises, Object.observe, MutationObserver

Source

运作原理，从源码解释

puddlejumper26 commented 3 years ago

4.1 极简的实现

//极简的实现
class Promise {
    callbacks = [];
    constructor(fn) {
        fn(this._resolve.bind(this));
    }
    then(onFulfilled) {
        this.callbacks.push(onFulfilled);
    }
    _resolve(value) {
        this.callbacks.forEach(fn => fn(value));
    }
}

//Promise应用
let p = new Promise(resolve => {
    setTimeout(() => {
        console.log('done');
        resolve('5秒');
    }, 5000);
}).then((tip) => {
    console.log(tip);
})

代码运行的步骤

Step 1

Step 2

Step 3

Step 4

等待1秒钟 Step 5

这里console出现 done

Step 6

Step 7

Step 8

这里console出现 5秒钟

Step 9

Step 10

Step 11

Source

https://zhuanlan.zhihu.com/p/58428287

puddlejumper26 commented 3 years ago

4.2 极简的实现+链式调用

实现也简单，只需要在 then 中 return this 即可

//极简的实现+链式调用
class Promise {
    callbacks = [];
    constructor(fn) {
        fn(this._resolve.bind(this));
    }
    then(onFulfilled) {
        this.callbacks.push(onFulfilled);
        return this;                           <======
    }
    _resolve(value) {
        this.callbacks.forEach(fn => fn(value));
    }
}

let p = new Promise(resolve => {
    setTimeout(() => {
        console.log('done');
        resolve('5秒');
    }, 5000);
}).then(tip => {
    console.log('then1', tip);
}).then(tip => {
    console.log('then2', tip);
});

代码运行的步骤

Step 1

Step2

Step 3

Step 4

这里要过5秒钟 Step 5

这里出现 done

Step 6

Step 7

Step 8

这里出现 then1 5秒钟

Step 9

Step 10

Step 11

这里出现 then2 5秒钟

Step 12

Step 13

Step 14

Step 15

puddlejumper26 commented 3 years ago

4.3 极简的实现+链式调用+延迟机制

下例中的 then3 依然打印不出来。所以我们需要增加状态，并且保存 resolve 的值. 4.4 能够解决这个问题

//极简的实现+链式调用+延迟机制
class Promise {
    callbacks = [];
    constructor(fn) {
        fn(this._resolve.bind(this));
    }
    then(onFulfilled) {
        this.callbacks.push(onFulfilled);
        return this;
    }
    _resolve(value) {
        setTimeout(() => {//看这里
            this.callbacks.forEach(fn => fn(value));
        });
    }
}

let p = new Promise(resolve => {
    console.log('同步执行');
    resolve('同步执行');
}).then(tip => {
    console.log('then1', tip);
}).then(tip => {
    console.log('then2', tip);
});

setTimeout(() => {
    p.then(tip => {
        console.log('then3', tip);
    })
});

代码运行的步骤

Step 1

Step 2

Step 3

Step 4

这里出现同步执行

Step 5

Step 6

Step 7

Step 8

这里出现 then1 同步执行

Step 9

Step 10

Step 11

这里出现 then2 同步执行

Step 12

Step 13

Step 14

Step 15

Step 16

Step 17

Step 18

Source

https://zhuanlan.zhihu.com/p/58428287

puddlejumper26 commented 3 years ago

4.4 极简的实现+链式调用+延迟机制+状态

加入状态机制，也就是大家熟知的 pending, fulfilled, rejected.
当增加完状态之后，原先的_resolve中的定时器可以去掉了。当reolve同步执行时，虽然callbacks为空，回调函数还没有注册上来，但没有关系，因为后面注册上来时，判断状态为fulfilled，会立即执行回调

//极简的实现+链式调用+延迟机制+状态
class Promise {
    callbacks = [];
    state = 'pending';//增加状态
    value = null;//保存结果
    constructor(fn) {
        fn(this._resolve.bind(this));
    }
    then(onFulfilled) {
        if (this.state === 'pending') {//在resolve之前，跟之前逻辑一样，添加到callbacks中
            this.callbacks.push(onFulfilled);
        } else {//在resolve之后，直接执行回调，返回结果了
            onFulfilled(this.value);
        }
        return this;
    }
    _resolve(value) {
        this.state = 'fulfilled';//改变状态
        this.value = value;//保存结果
        this.callbacks.forEach(fn => fn(value));
    }
}
let p = new Promise(resolve => {
    console.log('同步执行');
    resolve('同步执行');
}).then(tip => {
    console.log('then1', tip);
}).then(tip => {
    console.log('then2', tip);
});

setTimeout(() => {
    p.then(tip => {
        console.log('then3', tip);
    })
});

代码运行的步骤

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

这里出现同步执行

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Step 13

Step 14

Step 15

Step 16

Step 17

这里出现 then1 同步执行

Step 18

Step 19

Step 20

Step 21

Step 22

Step 23

这里出现 then2 同步执行

Step 24

Step 25

Step 26

Step 27

Step 28

Step 29

Step 30

这里出现 then3 同步执行

Step 31

Step 32

Step 33

Step 34

Source

https://zhuanlan.zhihu.com/p/58428287

puddlejumper26 commented 3 years ago

4.5 链式调用的实现

【以上的模型的问题】 因为是同一个实例，调用再多次 then 也只能返回相同的一个结果
真正的链式 Promise 是指在当前 Promise 达到 fulfilled 状态后，即开始进行下一个 Promise
then 方法中，创建并返回了新的 Promise 实例，这是串行Promise的基础，是实现真正链式调用的根本
then 方法传入的形参 onFulfilled 以及创建新 Promise 实例时传入的 resolve 放在一起，被push到当前 Promise 的 callbacks 队列中，这是衔接当前 Promise 和后邻 Promise 的关键所在
then 返回的一定是一个新的Promise实例

let promiseCount = 1;
//完整的实现 测试Demo
class Promise {
    callbacks = [];   
    name = '';
    state = 'pending';//增加状态
    value = null;//保存结果
    constructor(fn) {
        this.name = `Promse-${promiseCount++}`;
        console.log('[%s]:constructor', this.name);
        fn(this._resolve.bind(this));
    }
    then(onFulfilled) {
        console.log('[%s]:then', this.name);
        return new Promise(resolve => {
            this._handle({
                onFulfilled: onFulfilled || null,
                resolve: resolve
            });
        });
    }
    _handle(callback) {
        console.log('[%s]:_handle', this.name, 'state=', this.state);

        if (this.state === 'pe`nding') {
            this.callbacks.push(callback);
            console.log('[%s]:_handle', this.name, 'callbacks=', this.callbacks);
            return;
        }
        //如果then中没有传递任何东西
        if (!callback.onFulfilled) {
            callback.resolve(this.value);
            return;
        }
        var ret = callback.onFulfilled(this.value);
        callback.resolve(ret);
    }
    _resolve(value) {
        console.log('[%s]:_resolve', this.name);
        console.log('[%s]:_resolve', this.name, 'value=', value);

        if (value && (typeof value === 'object' || typeof value === 'function')) {
            var then = value.then;
            if (typeof then === 'function') {
                then.call(value, this._resolve.bind(this));
                return;
            }
        }

        this.state = 'fulfilled';//改变状态
        this.value = value;//保存结果
        this.callbacks.forEach(callback => this._handle(callback));
    }
}

/**
 * 模拟异步请求
 * @param {*} url 
 * @param {*} s 
 * @param {*} callback 
 */
const mockAjax = (url, s, callback) => {
    setTimeout(() => {
        callback(url + '异步请求耗时' + s + '秒');
    }, 1000 * s)
}

new Promise(resolve => {
    mockAjax('getUserId', 1, function (result) {
        resolve(result);
    })
}).then(result => {
    console.log(result);
    //对result进行第一层加工
    let exResult = '前缀:' + result;
    return exResult;
}).then(exResult => {
    console.log(exResult);
});

20201129_010430

当第一个 Promise 成功时，resolve 方法将其状态置为 fulfilled ，并保存 resolve 带过来的value。然后取出 callbacks 中的对象，执行当前 Promise的 onFulfilled，返回值通过调用第二个 Promise 的 resolve 方法，传递给第二个 Promise。

代码运行的步骤

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

console.log -- > [Promise-1]:constructor

Step 10

Step 11

Step 12

Step 13

这一步的结果

Step 14

Step 15

增加的 --> promise.html:52 [Promse-1]:_resolve

Step 16

增加的 --> promise.html:53 [Promse-1]:_resolve value= getUserId异步请求耗时1秒

Step 17

Step 18

Step 19

Step 20

Step 21

增加了 --> promise.html:36 [Promse-1]:_handle state= fulfilled

Step 22

Step 23

Step 24

Step 25

增加了 --> promise.html:86 getUserId异步请求耗时1秒

Step 26

Step 27

Step 28

Step 29

增加了 --> promise.html:52 [Promise-2]:_resolve

Step 30

增加了 --> promise.html:53 [Promse-2]:_resolve value= 前缀:getUserId异步请求耗时1秒

Step 31

Step 32

Step 33

Step 34

Step 35

增加了 --> promise.html:36 [Promse-2]:_handle state= fulfilled

Step 36

Step 37

Step 38

Step 39

增加了 --> promise.html:91 前缀:getUserId异步请求耗时1秒

Step 40

Step 41

Step 42

增加了 --> promise.html:52 [Promise-3]:_resolve

Step 43

增加了 --> promise.html:53 [Promise-3]:_resolve value = undefined

Step 44

Step 45

Step 46

Step 47

Step 48

Step 49

Step 50

Step 51

Step 52

Step 53

Step 54

Step 55

Step 56

Console.log

Source

https://zhuanlan.zhihu.com/p/102017798

puddlejumper26 commented 3 years ago

4.5 Promise 原型方法的实现

代码运行的步骤

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Step 13

Step 14

Step 15

Step 16

Step 17

Step 18

Step 19

Step 20

Step 21

Step 22

Step 23

Step 24

Step 25

Step 26

Step 27

Step 28

Step 29

Step 30

Step 31

Step 32

Step 33

Step 34

Step 35

Step 36

Step 37

Step 38

Step 39

Step 40

Step 41

Step 42

Step 43

Step 44

Step 45

Step 46

Step 47

Step 48

Step 49

Step 50

Step 51

Step 52

Step 53

Step 54

Step 55

Step 56

Step 57

Step 58

Step 59

Step 60

puddlejumper26 commented 3 years ago

4.6 Promise 静态方法的实现

代码运行的步骤

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Step 13

Step 14

Step 15

Step 16

Step 17

Step 18

Step 19

Step 20

Step 21

Step 22

Step 23

Step 24

Step 25

Step 26

Step 27

Step 28

Step 29

Step 30

Step 31

Step 32

Step 33

Step 34

Step 35

Step 36

Step 37

Step 38

Step 39

Step 40

Step 41

Step 42

Step 43

Step 44

Step 45

Step 46

Step 47

Step 48

Step 49

Step 50

Step 51

Step 52

Step 53

Step 54

Step 55

Step 56

Step 57

Step 58

Step 59

Step 60

puddlejumper26 commented 3 years ago

5.0 Promise 练习题

以下 promise 均指代 Promise 实例

5.1

const promise = new Promise((resolve, reject) => {
  console.log(1)
  resolve()
  console.log(2)
})
promise.then(() => {
  console.log(3)
})
console.log(4)

//运行结果：
1
2
4
3

Promise 构造函数是同步执行的，promise.then 中的函数是异步执行的

5.2

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  }, 1000)
})
const promise2 = promise1.then(() => {
  throw new Error('error!!!')
})

console.log('promise1', promise1)
console.log('promise2', promise2)

setTimeout(() => {
  console.log('promise1', promise1)
  console.log('promise2', promise2)
}, 2000)

//运行结果：
promise1 Promise { <pending> }
promise2 Promise { <pending> }
Uncaught (in promise) Error: error!!!
promise1 Promise { <fulfilled>'success' }
promise2 Promise {
  <rejected> Error: error!!!
    at promise.then (...)
    at <anonymous> }

promise 有 3 种状态：pending、fulfilled 或 rejected。状态改变只能是 pending->fulfilled 或者 pending->rejected，状态一旦改变则不能再变。上面 promise2 并不是 promise1，而是返回的一个新的 Promise 实例。

5.3

5.4

5.5

5.6

5.7

5.8

5.9

5.10

5.11

5.12 Source

https://juejin.cn/post/6844903509934997511 https://www.jianshu.com/p/52fda0f4003a

puddlejumper26 / blogs

Promise 【ES6】of JS [ 原理，例子 ] #176

1.0 什么是 Promise

Promise 的特点

Promise A+规范

Promise 优点

Promise 缺点

1.1 几种常见异步编程方案

E.g. Callback function

1.2 问题

1.3 Promise 处理多个相互关联的异步请求

2.0 Promise 的基本方法【then】, 【catch】, 【promise chain】

2.1 Then

2.2 Catch

2.3 Promise Chain

Source

3.0 With Promise 和 Without

Without

With

4.0 Promise 运用原理和源码的实现流程

Source

4.1 极简的实现

代码运行的步骤

Source

4.2 极简的实现+链式调用

代码运行的步骤

4.3 极简的实现+链式调用+延迟机制

代码运行的步骤

Source

4.4 极简的实现+链式调用+延迟机制+状态

代码运行的步骤

Source

4.5 链式调用的实现

代码运行的步骤

Console.log

Source

4.5 Promise 原型方法的实现

代码运行的步骤

4.6 Promise 静态方法的实现

代码运行的步骤

5.0 Promise 练习题

5.1

5.2

5.3

5.4

5.5

5.6

5.7

5.8

5.9

5.10

5.11

5.12

Source