生成器和promise推导async和await

x33g5p2x  于2022-03-11 转载在 其他  
字(2.5k)|赞(0)|评价(0)|浏览(449)

一、写在前面
Promise异步处理,我们通常使用awaitasync来进行处理。下面我们将深入探究一下awaitasync的原理。我们使用一个例子进行说明。
二、例子
我们现在模拟一个场景,当我们先请求完一个请求之后,拿到返回值,再加上-----去继续发起请求。然后再次拿到返回值之后,再加上+++++去发起请求。
一、最基本的写法

  1. function RequestData(url) {
  2. return new Promise((resolve, reject) => {
  3. setTimeout(() => {
  4. resolve(url)
  5. }, 2000)
  6. })
  7. }
  8. RequestData("hello").then(res => {
  9. RequestData(res + '-----').then(res => {
  10. RequestData(res + "+++++").then(res => {
  11. console.log(res)
  12. })
  13. })
  14. })
  15. //hello-----+++++

上面是最基本的写法,就是使用then嵌套,拿到上一个结果的值,然后再进行拼接参数,再次发起请求。
二、稍微优化一波

  1. function RequestData(url) {
  2. return new Promise((resolve, reject) => {
  3. setTimeout(() => {
  4. resolve(url)
  5. }, 2000)
  6. })
  7. }
  8. RequestData("hello")
  9. .then(res => res + '-----')
  10. .then(res => res + '+++++')
  11. .then(res => console.log(res))
  12. //hello-----+++++

如上述代码所示,就要比第一个简单一些,使用的是then()return之后的值,会被包裹一层Promsie
三、进一步优化

  1. function RequestData(url) {
  2. return new Promise((resolve, reject) => {
  3. setTimeout(() => {
  4. resolve(url)
  5. }, 2000)
  6. })
  7. }
  8. function* generator(url) {
  9. const res1 = yield RequestData(url)
  10. const res2 = yield RequestData(res1)
  11. const res3 = yield RequestData(res2)
  12. }
  13. let gener = generator("hello")
  14. gener.next().value.then(res => {
  15. gener.next(res + '-----').value.then(res => {
  16. gener.next(res + '+++++').value.then(res => {
  17. console.log(res)
  18. })
  19. })
  20. })
  21. //hello-----+++++

上面代码我们使用迭代器,当上一个执行出现结果是,然后我们将其作为参数传入下一个操作中。
四、再进一步优化,使用递归来代替上述代码

  1. function RequestData(url) {
  2. return new Promise((resolve, reject) => {
  3. setTimeout(() => {
  4. resolve(url)
  5. }, 2000)
  6. })
  7. }
  8. function* generator(url) {
  9. const res1 = yield RequestData(url)
  10. const res2 = yield RequestData(res1 + '-----')
  11. const res3 = yield RequestData(res2 + '+++++')
  12. console.log(res3)
  13. }
  14. function createGen(generator) {
  15. let gener = generator('hello')
  16. function exact(res) {
  17. let result = gener.next(res)
  18. if(result.done) {
  19. return result.value
  20. }
  21. result.value.then(res => {
  22. exact(res)
  23. })
  24. }
  25. exact()
  26. }
  27. createGen(generator)
  28. //hello-----+++++

5、也可以使用co这个库来解决

  1. const { co } = require("co")
  2. function RequestData(url) {
  3. return new Promise((resolve, reject) => {
  4. setTimeout(() => {
  5. resolve(url)
  6. }, 2000)
  7. })
  8. }
  9. function* generator(url) {
  10. const res1 = yield RequestData(url)
  11. const res2 = yield RequestData(res1 + '-----')
  12. const res3 = yield RequestData(res2 + '+++++')
  13. console.log(res3)
  14. }
  15. co(generator('hello'))

6、第五个比较像await/async了

  1. const { co } = require("co")
  2. function RequestData(url) {
  3. return new Promise((resolve, reject) => {
  4. setTimeout(() => {
  5. resolve(url)
  6. }, 2000)
  7. })
  8. }
  9. async function generator(url) {
  10. const res1 = await RequestData(url)
  11. const res2 = await RequestData(res1 + '------')
  12. const res3 = await RequestData(res2 + "+++++++")
  13. console.log(res3)
  14. }
  15. generator("hello")
  16. //hello----+++++

此时是不是对await和async有了更深刻的认识了。

相关文章