回调地狱

time 13m56s
image.png

缺点

time 22m08s
image.png

  1. //同步并发异步代码的问题
  2. const fs=require('fs')
  3. let arr = [];
  5. function show(data) {
  6.     console.log(data)
  7. }
  9. fs.readFile('./name.txt', 'utf-8', (err, data) => {
  10.     if (data) {
  11.         arr.push(data);
  12.     }
  13.     arr.length === 3 && show(arr);
  14. })
  16. fs.readFile('./number.txt', 'utf-8', (err, data) => {
  17.     if (data) {
  18.         arr.push(data);
  19.     }
  20.     arr.length === 3 && show(arr);
  21. })
  23. fs.readFile('./score.txt', 'utf-8', (err, data) => {
  24.     if (data) {
  25.         arr.push(data);
  26.     }
  27.     arr.length === 3 && show(arr);
  28. })
  30. /*[ '90', 'number.txt', 'name.txt' ]
  31. */

jquery

time 36m32s
image.png

promise A+规范

不止jquery实现了promise，非常多不同的库也实现了promise
promise用法很简单，基于promise有各种各样的变形

promise

time 54m51s

  1. console.log(Promise);
  2. /*[Function: Promise]
  3. ƒ Promise() { [native code] }*/

系统内置构造函数

time 55m57s

  1. /*executor执行者
  2. * 里面的function函数叫做executor执行者，这个参数叫执行者*/
  3. console.log(new Promise(function (resolve, reject) {
  4. }));

time 57m43s

  1. /*executor执行者
  2. * 里面的function函数叫做executor执行者，这个参数叫执行者*/
  3. new Promise(function (resolve, reject) {
  4.     console.log('promise');
  5. });
  6. console.log('1');
  7. /*promise
  8. 1*/

promise理解

time 59m30s
promise约定，承诺，比如承诺以后什么时候结婚，承诺以后好好学习，承诺以后要完成的约定
promise是一步的操作，promise的事情时发生在以后的事情，而不是现在的事情

可以理解成一个异步的容器，存放的是以后才会结束的事件，可以理解成一步操作，本身容器里面的代码时同步执行的

例子说明
1h1m1s
KFC，给收银员10块钱，下了订单，付完款了，这个时候不会直接把汉堡给你，一般不会给，因为汉堡是先做的，还没有做出来，需要时间处理，需要时间做出来。通常会给一个小票，这就是承诺、约定。没有得到汉堡，但收银员作为代替给了一个小票，相当于给了一个承诺，我欠你一个承诺。
我不一定肯定能得到这个汉堡，可能他告诉我卖完了，但这个收据本身就是此时异步操作的一个结果，我交钱了得到收据，得到收据是一个结果，初步的结果。

想成一个容器，不好理解，举个例子好理解。

我在等汉堡时，不用干等，什么都不能干，可以发短信，打电话。我在想象拿到汉堡之后的事情，虽然没有拿到汉堡，但拿到票，拿到承诺，这本身就是一步操作，一步一步来。

promise理解成异步操作，promise本身就是一个操作，一个异步操作

三种转态

time 1h4m6s
异步操作应该有三种转态，任何一个异步操作都会有相应的三种状态
1进行中
2成功
3失败

这三种状态仅由promise代表的事项决定的
image.png

回调函数

time 1h14m44s
可以通过回调函数改变promise状态

  1.     var promise=new Promise(function (resolve,reject) {
  2.         console.log('promise');
  3.         resolve();
  4.         // reject();
  5.     })
  7.     console.log('1');
  8.     console.log(promise);

then方法

time 1h15m

  1. var promise = new Promise(function (resolve, reject) {
  2.     // console.log('promise');
  3.     // resolve();
  4.     // reject();
  5.     setInterval(function () {
  6.         // resolve();
  7.         // Math.random() * 100 > 60 ? resolve() : reject();
  9.         let n = Math.random() * 100;
  10.         console.log('n',n);
  11.         n > 60 ? resolve() : reject();
  13.     }, 30)
  14. })
  16. console.log('1');
  18. promise.then((val) => {
  19.     console.log('val',val);
  20. }, (reason) => {
  21.     console.log('reason',reason);
  22. })

image.png
一直运行下去

传值

time 1h20m

  1. var promise = new Promise(function (resolve, reject) {
  2.     // console.log('promise');
  3.     // resolve();
  4.     // reject();
  5.     setInterval(function () {
  6.         // resolve();
  7.         // Math.random() * 100 > 60 ? resolve() : reject();
  9.         let n = Math.random() * 100;
  10.         console.log('n', n);
  11.         n > 60 ? resolve('ok') : reject('no');
  13.     }, 30)
  14. })
  16. console.log('1');
  18. promise.then((val) => {
  19.     console.log('val', val);
  20. }, (reason) => {
  21.     console.log('reason', reason);
  22. })

image.png

setTimeout

time 1h33m52s

  1. setTimeout(function () {
  2.     console.log('setTime');
  3. }, 30)
  5. var promise = new Promise(function (resolve, reject) {
  6.     // console.log('promise');
  7.     // resolve();
  8.     // reject();
  9.     /*    setInterval(function () {
  10.             // resolve();
  11.             // Math.random() * 100 > 60 ? resolve() : reject();
  13.             let n = Math.random() * 100;
  14.             console.log('n', n);
  15.             n > 60 ? resolve('ok') : reject('no');
  17.         }, 30)*/
  18.     console.log(0);
  19.     resolve(1);
  20. })
  22. console.log('1');
  24. promise.then((val) => {
  25.     console.log('val', val);
  26. }, (reason) => {
  27.     console.log('reason', reason);
  28. })

image.png

宏任务 微任务

time 1h35m12s
JS异步代码中，宏任务（宏任务队列），微任务（微任务队列）：promise process.nextTick()；
js异步代码包括宏任务与微任务，调用时会把它放到相应的任务队列当中，宏任务有宏任务队列，微任务有微任务队列
微任务（微任务队列）：promise process.nextTick()；这两个是微任务
宏任务（宏任务队列）：除了那两个以外所有的

微任务先执行，在每一次事件轮询的时候，当主线程任务全部完成，这个时候要调用任务队列当中的回调函数，把它们推入到执行栈当中，这时候优先执行谁呢，优先执行微任务，微任务，宏任务是两条栈，互不影响

time 1h39m42s

time 1h42m42s

  1. Promise.resolve().then(() => {
  2.     console.log('promise1');
  3.     setTimeout(() => {
  4.         console.log('setTimeout2');
  5.     })
  6. });
  8. setTimeout(() => {
  9.     console.log('setTimeout1');
  10.     Promise.resolve().then(() => {
  11.         console.log('promise2');
  12.     })
  13. })

image.png

分析
同步任务优先执行，现在没有同步任务，现在只有异步任务，微任务先执行

链式调用

time 1h46m53s

  1. var promise = new Promise(function (resolve, reject) {
  2.     // console.log('promise');
  3.     // resolve();
  4.     // reject();
  5.     setInterval(function () {
  6.         // resolve();
  7.         // Math.random() * 100 > 60 ? resolve() : reject();
  9.         let n = Math.random() * 100;
  10.         // console.log('n', n);
  11.         n > 60 ? resolve('ok') : reject('no');
  13.     }, 30)
  14.     resolve(1);
  15. })
  17. console.log('1');
  18. console.log(promise);
  20. promise.then((val) => {
  21.     console.log('val', val);
  22. }, (reason) => {
  23.     console.log('reason', reason);
  24. }).then((val) => {
  25.     console.log('ok then2' + val);
  26. }, (reason) => {
  27.     console.log('no then2' + reason);
  28. })

image.png
undefined，因为then没有返回值

then与return

需要返回值传递给下一个return

  1. var promise = new Promise(function (resolve, reject) {
  2.     // console.log('promise');
  3.     // resolve();
  4.     // reject();
  5.     setInterval(function () {
  6.         // resolve();
  7.         // Math.random() * 100 > 60 ? resolve() : reject();
  9.         let n = Math.random() * 100;
  10.         // console.log('n', n);
  11.         n > 60 ? resolve('ok') : reject('no');
  13.     }, 30)
  14.     resolve(1);
  15. })
  17. console.log('1');
  18. console.log(promise);
  20. promise.then((val) => {
  21.     console.log('val', val);
  22.     return 3;
  23. }, (reason) => {
  24.     console.log('reason', reason);
  25.     return 2;
  26. }).then((val) => {
  27.     console.log('ok then2-' + val);
  29. }, (reason) => {
  30.     console.log('no then2-' + reason);
  31. })

image.png
第一次then的返回值作为下一次then的执行参数

  1. var promise = new Promise(function (resolve, reject) {
  2.     resolve(10);
  3. })
  5. console.log('1');
  6. console.log(promise);
  8. promise.then((val) => {
  9.     console.log('val', val);
  10.     return 3;
  11. }, (reason) => {
  12.     console.log('reason', reason);
  13.     return 2;
  14. }).then((val) => {
  15.     console.log('ok then2-' + val);
  17. }, (reason) => {
  18.     console.log('no then2-' + reason);
  19. })

image.png

return new Promise

time 1h57m46s

return promise可以控制走resolve，还是reject 

  1. var promise = new Promise(function (resolve, reject) {
  2.     // console.log('promise');
  3.     // resolve();
  4.     // reject();
  5.  /*   setInterval(function () {
  6.         // resolve();
  7.         // Math.random() * 100 > 60 ? resolve() : reject();
  9.         let n = Math.random() * 100;
  10.         // console.log('n', n);
  11.         n > 60 ? resolve('ok') : reject('no');
  13.     }, 30)*/
  14.     resolve(10);
  15. })
  17. console.log('1');
  18. console.log(promise);
  20. promise.then((val) => {
  21.     console.log('val', val);
  22.     return new Promise((resolve,reject)=>{
  23.         // resolve('newPromise ok');
  24.         reject('newPromise ok');
  25.     });
  26. }, (reason) => {
  27.     console.log('reason', reason);
  28.     return 2;
  29. }).then((val) => {
  30.     console.log('ok then2ok-' + val);
  32. }, (reason) => {
  33.     console.log('no then2no-' + reason);
  34. })

return 字符串，如果resolve valreturn字符串还会走resolve ，走不了另一个

  1. promise.then((val) => {
  2.     console.log('val', val);
  3.    /* return new Promise((resolve,reject)=>{
  4.         // resolve('newPromise ok');
  5.         reject('newPromise no');
  6.     });*/
  7.     // resolve('newPromise ok');
  8.     // reject('newPromise no');
  9.     return 'newPromise no'
  10. }, (reason) => {
  11.     console.log('reason', reason);
  12.     return 2;
  13. }).then((val) => {
  14.     console.log('ok then2ok-' + val);
  16. }, (reason) => {
  17.     console.log('no then2no-' + reason);
  18. })