JS 中的异步发展由 callback -> Promise -> Generator -> async/await，具体处理可以分为并行和串行两种，具体的使用可以自由组合。

异步的需要注意（主要就是单一功能原则，流程清晰）：

  • 不要嵌套功能。给他们姓名并将他们放在程序的顶层

  • 利用函数提升来利用你的优势来移动函数

  • 处理每个回调中的每一个错误。使用标准来帮助你

  • 创建可重用的函数并将它们放在模块中以减少理解代码所需的认知负载。将代码分割成小块这样也可以帮助您处理错误，编写测试，强制您为您的代码创建稳定且文档化的公共API，并有助于重构

回调函数( Callback )

回调函数是将将代码的执行权限给予调用方，当调用方执行完成条件后调用此函数将权限交回到被调用方。

缺点在与容易形成回调地狱(回调层层嵌套，不能清晰的查看代码运行逻辑)。

  1. // 定时器是典型的回调
  2. function doSomething(data){
  3.     console.log("回调完成",data)
  4. }
  5. setTimeout(()=>{
  6.   doSomething("test callback");
  7. });
  8. function errHandle(err,data){
  9.     if(err) return console.log(err);
  10.     console.log(data);
  11. }
  12. function read(params,callback){
  13.     let err,data;
  14.     //...处理参数拿到数据
  15.     //回调数据
  16.     callback(err,data);
  17. }
  18. read({key:"value"},errHandle);
  19. // 回调地狱,需要在前一次回调完成的时进行下一次调用
  20. read({},(err,data) =>{
  21.    if(err)return console.log(err);
  22.    read({data:data},(err,data1) => {
  23.        if(err)return console.log(err);    
  24.        read({data1:data1},(err,data2) => {
  25.            if(err)return console.log(err);    
  26.                //...可以嵌套多层，越多越难调试
  27.            }); 
  28.    });
  29. });
  30. // 需要自己注意代码整洁和模块化，流程化，不然还是会出现回调地狱
  31. const getData1 = () => Promise.resolve("data1");
  32. const getData2 = (data1) => Promise.resolve(data1+",data2");
  33. const getData3 = (data2) => Promise.resolve(data2+",data3");
  34. getData1().then((resData1) => {
  35.   getData2(resData1).then((resData2) => {
  36.     getData3(resData2).then((resData3)=>{
  37.       console.log('resData3:', resData3)
  38.     })
  39.   });
  40. });

Promise

因为 Promise.prototype.then 和 Promise.prototype.catch 方法返回的是 promise， 所以它们可以被链式调用。

  1. 并行

    • 一个成功，返回成功结果，全部失败，返回失败
    • 一个失败，返回失败结果，全部成功，返回成功
    • 等待全部完成，返回成功或失败结果数组

  2. 串行

    • 一个失败就失败
    • 失败后处理错误，继续执行
  1. //# 1. 简单调用
  2. // 成功的回调函数
  3. function successCallback(result) {
  4.   console.log('成功: ' + result);
  5. }
  7. // 失败的回调函数
  8. function failureCallback(error) {
  9.   console.log('失败: ' + error);
  10. }
  11. function createPromsie() {
  12.   return new Promise((resolve, reject) => {
  13.     setTimeout(function () {
  14.       resolve('aaaaaa');
  15.     }, 2000);
  16.   });
  17. }
  18. createPromsie().then(successCallback, failureCallback);
  20. //# 2. 链式调用,最后捕捉错误，适合遇到错误就停止链式执行的情况
  21. //链式调用如果没有返回值，则返回值是 undefined
  22. function createPromsie(str) {
  23.   return new Promise((resolve, reject) => {
  24.     setTimeout(function () {
  25.       resolve(str);
  26.     }, 2000);
  27.   });
  28. }
  29. createPromsie('11111')
  30.   .then(res => {
  31.     console.log('1. ', res);
  32.     return createPromsie(res + ',22222');
  33.   })
  34.   .then(res => {
  35.     console.log('2. ', res);
  36.     return createPromsie(res + ',33333');
  37.   })
  38.   .then(res => {
  39.     console.log('3. ', res);
  40.     return Promise.reject('错误');
  41.   })
  42.   .catch(err => {
  43.     console.log(err);
  44.   });
  46. // 1.  11111
  47. // 2.  11111,22222
  48. // 3.  11111,22222,33333
  49. // 错误
  50. function createPromsie(str) {
  51.   return new Promise((resolve, reject) => {
  52.     setTimeout(function () {
  53.       reject(str);
  54.     }, 2000);
  55.   });
  56. }
  57. createPromsie('11111')
  58.   .then(res => {
  59.     console.log('1. ', res);
  60.     return createPromsie(res + ',22222');
  61.   })
  62.   .then(res => {
  63.     console.log('2. ', res);
  64.     return createPromsie(res + ',33333');
  65.   })
  66.   .then(res => {
  67.     console.log('3. ', res);
  68.     return Promise.reject('错误');
  69.   })
  70.   .catch(err => {
  71.     console.log(err);
  72.   });
  74. //11111
  76. //# 3. 这种适合单独处理错误，并且不会因为错误而中断执行的时候使用
  77. function createPromsie(str) {
  78.   return new Promise((resolve, reject) => {
  79.     setTimeout(function () {
  80.       reject(str);
  81.     }, 2000);
  82.   });
  83. }
  84. createPromsie('11111')
  85.   .then(
  86.     res => {
  87.       console.log('1. ', res);
  88.       return createPromsie(res + ',22222');
  89.     },
  90.     err => {
  91.       console.log('err1', err);
  92.       return err + ',44444';
  93.     }
  94.   )
  95.   .then(
  96.     res => {
  97.       console.log('2. ', res);
  98.       return res + ',33333';
  99.     },
  100.     err => {
  101.       console.log('err2', err);
  102.       return err + ',55555';
  103.     }
  104.   );
  106. // err1 11111
  107. // 2.  11111,44444
  109. //# 4. 和上边的形式相同
  110. function createPromsie(str) {
  111.   return new Promise((resolve, reject) => {
  112.     setTimeout(function () {
  113.       reject(str);
  114.     }, 2000);
  115.   });
  116. }
  117. createPromsie('11111')
  118.   .then(res => {
  119.     console.log('1. ', res);
  120.     return createPromsie(res + ',22222');
  121.   })
  122.   .catch(err => {
  123.     console.log('err1', err);
  124.     return err + ',44444';
  125.   })
  126.   .then(res => {
  127.     console.log('2. ', res);
  128.     return res + ',33333';
  129.   })
  130.   .catch(err => {
  131.     console.log('err2', err);
  132.     return err + ',55555';
  133.   });
  134. // err1 11111
  135. // 2.  11111,44444
  137. //# 5. 最终直接一次
  138. function createPromsie(str) {
  139.   return new Promise((resolve, reject) => {
  140.     setTimeout(function () {
  141.       reject(str);
  142.     }, 2000);
  143.   });
  144. }
  145. createPromsie('11111')
  146.   .then(res => {
  147.     console.log('1. ', res);
  148.     return createPromsie(res + ',22222');
  149.   })
  150.   .catch(err => {
  151.     console.log('err1', err);
  152.     return err + ',44444';
  153.   })
  154.   .then(res => {
  155.     console.log('2. ', res);
  156.     return res + ',33333';
  157.   })
  158.   .catch(err => {
  159.     console.log('err2', err);
  160.     return err + ',55555';
  161.   })
  162.   .finally(res=>console.log(res))

全局事件

  1. /* 当 Promise 被拒绝时，会有下文所述的两个事件之一被派发到全局作用域（通常而言，就是window；如果是在 web worker 中使用的话，就是 Worker 或者其他 worker-based 接口）。这两个事件如下所示：
  3. rejectionhandled
  4. 当 Promise 被拒绝、并且在 reject 函数处理该 rejection 之后会派发此事件。
  5. unhandledrejection
  6. 当 Promise 被拒绝，但没有提供 reject 函数来处理该 rejection 时，会派发此事件。
  7. 以上两种情况中，PromiseRejectionEvent 事件都有两个属性，一个是 promise 属性，该属性指向被驳回的 Promise，另一个是 reason 属性，该属性用来说明 Promise 被驳回的原因。
  9. 因此，我们可以通过以上事件为 Promise 失败时提供补偿处理，也有利于调试 Promise 相关的问题。在每一个上下文中，该处理都是全局的，因此不管源码如何，所有的错误都会在同一个处理函数中被捕捉并处理。*/
  11. window.addEventListener("unhandledrejection", event => {
  12.   /* 你可以在这里添加一些代码，以便检查
  13.      event.promise 中的 promise 和
  14.      event.reason 中的 rejection 原因 */
  16.   event.preventDefault();
  17. }, false);

旧 API 得封装

  1. const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
  3. wait(10000).then(() => saySomething("10 seconds")).catch(failureCallback);
  4. // setTimeout 并不会reject 因此可以去掉catch
  5. wait(10000).then(() => saySomething("10 seconds"));

Promise.all

Primise.all 是并行运行的，当参数数组中所有的Promise都成功才返回成功，否则返回失败

  1. function createPromsie(str,time) {
  2.   return new Promise((resolve, reject) => {
  3.     setTimeout(function () {
  4.       resolve(str);
  5.     }, time);
  6.   });
  7. }
  8. function createPromsie1(str,time) {
  9.   return new Promise((resolve, reject) => {
  10.     setTimeout(function () {
  11.       reject(str);
  12.     }, time);
  13.   });
  14. }
  15. // 简单使用
  16. Promise.all([createPromsie('1',1000),createPromsie('2',2000),createPromsie('3',3000)])
  17. .then(([result1, result2, result3]) => { /* use result1, result2 and result3 */ });
  18. //链式
  19. // 组合
  20. const func1 = () => createPromsie('1',1000);
  21. const func2 = () => createPromsie('2',2000);
  22. const func3 = () => createPromsie('3',3000);
  23. [func1, func2, func3].reduce((p, f) => p.then(f), Promise.resolve())
  24. .then(result3 => { /* use result3 */ });
  26. Promise.resolve().then(func1).then(func2).then(func3);

Promise.race

Primise.race 也是并行运行的

  1. function createPromsie(str,time) {
  2.   return new Promise((resolve, reject) => {
  3.     setTimeout(function () {
  4.       reject(str);
  5.     }, time);
  6.   });
  7. }
  8. Promise.race([createPromsie('1',1000),createPromsie('2',2000),createPromsie('3',3000)]);

执行时机

  1. // then 中的函数被放置在一个微任务队列中异步调用，只有当事件队列全部执行结束后才会开始执行
  2. // 具体要参考 nodejs 或者 浏览器的事件循环
  3. Promise.resolve().then(() => console.log(2));
  4. console.log(1); // 1, 2
  6. const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
  8. wait().then(() => console.log(4));
  9. Promise.resolve().then(() => console.log(2)).then(() => console.log(3));
  10. console.log(1); // 1, 2, 3, 4

Promise嵌套

  1. /*嵌套 Promise 是一种可以限制 catch 语句的作用域的控制结构写法。明确来说，嵌套的 catch 仅捕捉在其之前同时还必须是其作用域的 failureres，而捕捉不到在其链式以外或者其嵌套域以外的 error。如果使用正确，那么可以实现高精度的错误修复。*/
  3. const createResolvePromise = (str, time) =>
  4.   new Promise((res, rej) => setTimeout(() => res(str), time));
  5. const createRejectPromise = (str, time) =>
  6.   new Promise((res, rej) => setTimeout(() => rej(str), time));
  7. let doSomethingCritical = () => createResolvePromise('1', 1000);
  8. let doSomethingOptional = () => createResolvePromise('2', 1000);
  9. let doSomethingExtraNice = params => createResolvePromise('3', 1000);
  10. let moreCriticalStuff = () => createResolvePromise('4', 1000);
  12. doSomethingCritical()
  13.   .then(result =>
  14.     doSomethingOptional()
  15.       .then(optionalResult => {
  16.         console.log(optionalResult);
  17.         return doSomethingExtraNice(optionalResult);
  18.       })
  19.       .catch(e => {
  20.         console.log(e);
  21.       })
  22.   ) // 即使有异常也会忽略，继续运行;(最后会输出)
  23.   .then(() => moreCriticalStuff())
  24.   .catch(e => console.log('Critical failure: ' + e)); 
  25. // 2
  27. doSomethingCritical = () => createRejectPromise('1', 1000);
  28. doSomethingCritical()
  29.   .then(result =>
  30.     doSomethingOptional()
  31.       .then(optionalResult => {
  32.         console.log(optionalResult);
  33.         return doSomethingExtraNice(optionalResult);
  34.       })
  35.       .catch(e => {
  36.         console.log(e);
  37.       })
  38.   ) // 即使有异常也会忽略，继续运行;(最后会输出)
  39.   .then(() => moreCriticalStuff())
  40.   .catch(e => console.log('Critical failure: ' + e));
  41. //1
  43. doSomethingOptional = () => createRejectPromise('1', 1000);
  44. doSomethingCritical()
  45.   .then(result =>
  46.     doSomethingOptional()
  47.       .then(optionalResult => {
  48.         console.log(optionalResult);
  49.         return doSomethingExtraNice(optionalResult);
  50.       })
  51.       .catch(e => {
  52.         console.log(e);
  53.       })
  54.   ) // 即使有异常也会忽略，继续运行;(最后会输出)
  55.   .then((res) =>{console.log(res,"aaa"); return moreCriticalStuff()})
  56.   .catch(e => console.log('Critical failure: ' + e)); 
  57. // 1
  58. // undefined "aaa"

async/await

对于 Promise 的语法糖，同步写法。

  1. /* 学习来源 https://careersjs.com/magazine/async-patterns/ */
  2. function doSomethingAsync(val) {
  3.   return new Promise.resolve(val || 3)
  4. }
  5. function doAnotherAsync(val) {
  6.   return new Promise.resolve(val || 4)
  7. }
  9. /* 比较混乱的 */
  10. function getVals1() {
  11.   return doSomethingAsync().then(function (val) {
  12.     return doAnotherAsync(val).then(function (anotherVal) {
  13.       // Here we need both val and anotherVal so we nested
  14.       return val + anotherVal
  15.     })
  16.   })
  17. }
  18. /* 稍好一点的 */
  19. function getVals2() {
  20.   let value
  22.   return doSomethingAsync().then(function (val) {
  23.     // send val to the outer scope so others can use it
  24.     value = val
  25.     return doAnotherAsync(val)
  26.   }).then(function (anotherVal) {
  27.     // Here we grab value from outside
  28.     return value + anotherVal
  29.   })
  30. }
  32. /* 箭头函数的 ,减少了代码,并没有什么实质的改变*/
  33. function getVals3() {
  34.   return doSomethingAsync().then(val => doAnotherAsync(val).then(anotherVal => val + anotherVal))
  35. }
  37. function getVals4() {
  38.   let value
  40.   return doSomethingAsync()
  41.     .then(val => (value = val, doAnotherAsync(val)))
  42.     .then(anotherVal => value + anotherVal)
  43. }
  44. /* 结构清晰的 */
  45. async function getVals5() {
  46.   let val = await doSomethingAsync()
  47.   let anotherVal = await doAnotherAsync(val)
  49.   return val + anotherVal
  50. }
  52. /* “随机”顺序异步操作,这两者的代码并没有什么区别,但是async比promise.then的可读性摇号一点 */
  53. function getVals6() {
  54.   return doSomethingAsync()
  55.     .then(val => doAnotherAsync(val))
  56.     .then(anotherVal => /* We don't need 'val' here */ 2 * anotherVal)
  57. }
  58. async function getVals7() {
  59.   let val = await doSomethingAsync()
  60.   let anotherVal = await doAnotherAsync(val)
  62.   return 2 * anotherVal
  63. }
  64. /* “随机”并行异步操作 */
  66. function getVals8() {
  67.   return Promise.all([doSomethingAsync(), doAnotherAsync()])
  68.     .then(function ([val, anotherVal]) {
  69.       return val + anotherVal
  70.     })
  71. }
  72. async function getVals9() {
  73.   let [val, anotherVal] = await Promise.all([doSomethingAsync(), doAnotherAsync()])
  74.   return val + anotherVal
  75. }
  76. /* 迭代并行异步操作 ,简单的操作async并不能提供太多的清晰度,但是一旦比较复杂就会提升较多的清晰度*/
  77. var values = [1, 2, 3, 4, 5, 6];
  78. function doAsyncToAll1(values /* array */) {
  79.   return Promise.all(values.map(doSomethingAsync))
  80. }
  81. async function doAsyncToAll2(values /* array */) {
  82.   return await Promise.all(values.map(doSomethingAsync))
  83. }
  84. function doAsyncToAll3(values /* array */) {
  85.   return Promise.all(values.map(val => {
  86.     return doSomethingAsync(val)
  87.       .then(anotherVal => doAnotherAsync(anotherValue * 2))
  88.   }))
  89. }
  90. function doAsyncToAll4(values /* array */) {
  91.   return Promise.all(values.map(async val => {
  92.     let anotherVal = await doSomethingAsync(val)
  93.     return doAnotherAsync(anotherValue * 2)
  94.   }))
  95. }
  96. /* 迭代顺序异步操作 */
  98. function doAsyncToAllSequentially1(values) {
  99.   return values.reduce((previousOperation, val) => {
  100.     return previousOperation.then(() => doSomethingAsync(val))
  101.   }, Promise.resolve())
  102. }
  103. async function doAsyncToAllSequentially2(values) {
  104.   for (let val of values) {
  105.     await doSomethingAsync(val)
  106.   }
  107. }
  108. /* 当不仅仅是使操作顺序进行,则可以继续使用 reduce */
  109. function doAsyncToAllSequentially3(values) {
  110.   return values.reduce((previousOperation, val) => {
  111.     return previousOperation.then(
  112.       total => doSomethingAsync(val).then(
  113.         newVal => total + newVal
  114.       )
  115.     )
  116.   }, Promise.resolve(0))
  117. }
  118. /* 这样会更加清晰*/
  119. async function doAsyncToAllSequentially4(values) {
  120.   let total = 0
  121.   for (let val of values) {
  122.     let newVal = await doSomethingAsync(val)
  123.     total += newVal
  124.   }
  125.   return total
  126. }
  127. /* 也可以使用 reduce */
  128. async function doAsyncToAllSequentially5(values) {
  129.   return values.reduce(async (previous, val) => {
  130.     let total = await previous
  131.     let newVal = await doSomethingAsync(val)
  133.     return total + newVal
  134.   }, Promise.resolve(0))
  135. }

错误处理

适用于同步情况，不用每个Promise去写catch，只需要在使用的时候来处理一次

  1. (async () => {
  2.     const fetchData = () => {
  3.         return new Promise((resolve, reject) => {
  4.             setTimeout(() => {
  5.                 resolve('fetch data is me')
  6.             }, 1000)
  7.         })
  8.     }
  10.     // 抽离成公共方法
  11.     const awaitWrap = (promise) => {
  12.         return promise
  13.             .then(data => [null, data])
  14.             .catch(err => [err, null])
  15.     }
  17.     const [err, data] = await awaitWrap(fetchData())
  18.     console.log('err', err)
  19.     console.log('data', data)
  20.     // err null
  21.     // data fetch data is me
  22. })()
  24. // 作者：Vincent.W
  25. // 链接：https://juejin.im/post/6844903767129718791
  1. function awaitWrap<T, U = any>(promise: Promise<T>): Promise<[U | null, T | null]> {
  2.     return promise
  3.         .then<[null, T]>((data: T) => [null, data])
  4.         .catch<[U, null]>(err => [err, null])
  5. }
  7. // 作者：Vincent.W
  8. // 链接：https://juejin.im/post/6844903767129718791

Generator

generator 中文名叫构造器,返回一个生成器对象。

  1. function* foo() {
  2.   for (let i = 1; i <= 3; i++) {
  3.     let x = yield `等我一下呗，i = ${i}`;
  4.     console.log(x);
  5.   }
  6. }
  7. setTimeout(() => {
  8.   console.log('终于轮到我了');
  9. }, 1);
  10. var a = foo();
  11. console.log(a); // foo {<closed>}
  12. var b = a.next();
  13. console.log(b); // {value: "等我一下呗，i = 1", done: false}
  14. var c = a.next();
  15. console.log(c); // {value: "等我一下呗，i = 2", done: false}
  16. var d = a.next();
  17. console.log(d); // {value: "等我一下呗，i = 3", done: false}
  18. var e = a.next();
  19. console.log(e); // {value: undefined, done: true}
  20. // 终于轮到我了
  22. //Generator.prototype.throw()
  23. function* gen() {
  24.   while(true) {
  25.     try {
  26.        yield 42;
  27.     } catch(e) {
  28.       console.log("Error caught!");
  29.     }
  30.   }
  31. }
  33. var g = gen();
  34. g.next(); // { value: 42, done: false }
  35. g.throw(new Error("Something went wrong")); // "Error caught!"
  37. //Generator.prototype.return() 返回给定的值并结束生成器。
  38. function* gen() { 
  39.   yield 1;
  40.   yield 2;
  41.   yield 3;
  42. }
  44. var g = gen();
  46. g.next();        // { value: 1, done: false }
  47. g.return("foo"); // { value: "foo", done: true }
  48. g.next();        // { value: undefined, done: true }