Promise、Generator和Async的差异是什么

本篇内容主要讲解“Promise、Generator和Async的差异是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Promise、Generator和Async的差异是什么”吧!我们知道Promise与Async/await函数都是用来解决JavaScript中的异步问题的，从最开始的回调函数处理异步，到Promise处理异步，到Generator处理异步，再到Async/await处理异步，每一次的技术更新都使得JavaScript处理异步的方式更加优雅，从目前来看，Async/await被认为是异步处理的终极解决方案，让JS的异步处理越来越像同步任务。异步编程的最高境界，就是根本不用关心它是不是异步。1.回调函数从早期的Javascript代码来看，在ES6诞生之前，基本上所有的异步处理都是基于回调函数函数实现的，你们可能会见过下面这种代码：没错，在ES6出现之前，这种代码可以说是随处可见。它虽然解决了异步执行的问题，可随之而来的是我们常听说的回调地狱问题：没有顺序可言：嵌套函数执行带来的是调试困难，不利于维护与阅读耦合性太强：一旦某一个嵌套层级有改动，就会影响整个回调的执行所以，为了解决这个问题，社区最早提出和实现了Promise，ES6将其写进了语言标准，统一了用法。2.PromisePromise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它就是为了解决回调函数产生的问题而诞生的。有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。所以上面那种回调函数的方式我们可以改成这样：(前提是ajax已用Promise包装)通过使用Promise来处理异步，比以往的回调函数看起来更加清晰了，解决了回调地狱的问题，Promise的then的链式调用更能让人接受，也符合我们同步的思想。但Promise也有它的缺点：Promise的内部错误使用try catch捕获不到，只能只用then的第二个回调或catch来捕获Promise一旦新建就会立即执行，无法取消之前写过一篇，讲解了Promise如何使用以及内部实现原理。对Promise还不太理解的同学可以看看～从如何使用到如何实现一个Promisehttps://juejin.cn/post/70513643171191193963.GeneratorGenerator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。Ge免费云主机、域名nerator 函数将 JavaScript 异步编程带入了一个全新的阶段。声明与函数声明类似，不同的是function关键字与函数名之间有一个星号，以及函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。执行调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是遍历器对象（Iterator Object）。下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。所以上面的回调函数又可以写成这样：由于 Generator 函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。遍历器对象的next方法的运行逻辑如下。（1）遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。（2）下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。（3）如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。（4）如果该函数没有return语句，则返回的对象的value属性值为undefined。yield表达式本身没有返回值，或者说总是返回undefined。next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值。怎么理解这句话？我们来看下面这个例子：由于yield没有返回值，所以（yield（x+1））执行后的值是undefined，所以在第二次执行a.next()是其实是执行的2*undefined，所以值是NaN，所以下面b的例子中，第二次执行b.next()时传入了12，它会当成第一次b.next()的执行返回值，所以b的例子中能够正确计算。这里不能把next执行结果中的value值与yield返回值搞混了，它两不是一个东西yield与return的区别相同点:都能返回语句后面的那个表达式的值都可以暂停函数执行区别:一个函数可以有多个 yield,但是只能有一个 returnyield 有位置记忆功能,return 没有4.Async/awaitAsync/await其实就是上面Generator的语法糖，async函数其实就相当于funciton *的作用，而await就相当与yield的作用。而在async/await机制中，自动包含了我们上述封装出来的spawn自动执行函数。所以上面的回调函数又可以写的更加简洁了：async函数对Generator函数的改进，体现在以下四点：内置执行器：async函数执行与普通函数一样，不像Generator函数，需要调用next方法，或使用co模块才能真正执行语意化更清晰：async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。适用性更广：co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）。返回值是Promise：async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。async函数async函数的返回值为Promise对象，所以它可以调用then方法await表达式await 右侧的表达式一般为 promise 对象, 但也可以是其它的值如果表达式是 promise 对象, await 返回的是 promise 成功的值如果表达式是其它值, 直接将此值作为 await 的返回值await后面是Promise对象会阻塞后面的代码，Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果所以这就是await必须用在async的原因，async刚好返回一个Promise对象，可以异步执行阻塞后三种方案都是为解决传统的回调函数而提出的，所以它们相对于回调函数的优势不言而喻。而async/await又是Generator函数的语法糖。Promise的内部错误使用try catch捕获不到，只能只用then的第二个回调或catch来捕获，而async/await的错误可以用try catch捕获Promise一旦新建就会立即执行，不会阻塞后面的代码，而async函数中await后面是Promise对象会阻塞后面的代码。async函数会隐式地返回一个promise，该promise的reosolve值就是函数return的值。使用async函数可以让代码更加简洁，不需要像Promise一样需要调用then方法来获取返回值，不需要写匿名函数处理Promise的resolve值，也不需要定义多余的data变量，还避免了嵌套代码。解析：打印顺序应该是： script start -> async2 end -> Promise -> script end -> async1 end -> promise1 -> promise2 -> setTimeout老规矩，全局代码自上而下执行，先打印出script start，然后执行async1(),里面先遇到await async2(),执行async2,打印出async2 end，然后await后面的代码放入微任务队列，接着往下执行new Promise，打印出Promise,遇见了resolve，将第一个then方法放入微任务队列，接着往下执行打印出script end，全局代码执行完了，然后从微任务队列中取出第一个微任务执行，打印出async1 end,再取出第二个微任务执行，打印出promise1,然后这个then方法执行完了，当前Promise的状态为fulfilled,它也可以出发then的回调，所以第二个then这时候又被加进了微任务队列，然后再出微任务队列中取出这个微任务执行，打印出promise2,此时微任务队列为空，接着执行宏任务队列，打印出setTimeout。解题技巧：无论是then还是catch里的回调内容只要代码正常执行或者正常返回，则当前新的Promise实例为fulfilled状态。如果有报错或返回Promise.reject()则新的Promise实例为rejected状态。fulfilled状态能够触发then回调rejected状态能够触发catch回调执行async函数，返回的是Promise对象await相当于Promise的then并且同一作用域下await下面的内容全部作为then中回调的内容异步中先执行微任务，再执行宏任务到此，相信大家对“Promise、Generator和Async的差异是什么”有了更深的了解，不妨来实际操作一番吧！这里是云技术网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: CSS中的线性渐变linear-gradient怎么用

这篇文章给大家介绍CSS中的线性渐变linear-gradient怎么用，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。在CSS3出现之前，渐变效果只能通过图形软件设计图片来实现，可拓展性差，还影响性能。如今已经进入CSS3标准的渐变可以很…