加入收藏 | 设为首页 | 会员中心 | 我要投稿 辽源站长网 (https://www.0437zz.com/)- 云专线、云连接、智能数据、边缘计算、数据安全!
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

JS异步编程六种方案

发布时间:2019-01-29 13:49:32 所属栏目:优化 来源:浪里行舟
导读:前言 我们知道Javascript语言的执行环境是单线程。也就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务。 这种模式虽然实现起来比较简单,执行环境相对单纯,但是只要有一个任务耗时很长,后面的任务都必须

从上例中我们看出手动迭代Generator 函数很麻烦,实现逻辑有点绕,而实际开发一般会配合 co 库去使用。co是一个为Node.js和浏览器打造的基于生成器的流程控制工具,借助于Promise,你可以使用更加优雅的方式编写非阻塞代码。

安装co库只需:npm install co

上面例子只需两句话就可以轻松实现

  1. function* r() {  
  2.   let r1 = yield read('./1.txt')  
  3.   let r2 = yield read(r1)  
  4.   let r3 = yield read(r2)  
  5.   console.log(r1)  
  6.   console.log(r2)  
  7.   console.log(r3)  
  8. }  
  9. let co = require('co')  
  10. co(r()).then(function(data) {  
  11.   console.log(data)  
  12. })  
  13. // 2.txt=>3.txt=>结束=>undefined 

我们可以通过 Generator 函数解决回调地狱的问题,可以把之前的回调地狱例子改写为如下代码:

  1. function *fetch() {  
  2.     yield ajax(url, () => {})  
  3.     yield ajax(url1, () => {})  
  4.     yield ajax(url2, () => {})  
  5. }  
  6. let it = fetch()  
  7. let result1 = it.next()  
  8. let result2 = it.next()  
  9. let result3 = it.next() 

七、async/await

1.Async/Await简介

使用async/await,你可以轻松地达成之前使用生成器和co函数所做到的工作,它有如下特点:

  •  async/await是基于Promise实现的,它不能用于普通的回调函数。
  •  async/await与Promise一样,是非阻塞的。
  •  async/await使得异步代码看起来像同步代码,这正是它的魔力所在。

一个函数如果加上 async ,那么该函数就会返回一个 Promise

  1. async function async1() {  
  2.   return "1"  
  3. }  
  4. console.log(async1()) // -> Promise {<resolved>: "1"} 

Generator函数依次调用三个文件那个例子用async/await写法,只需几句话便可实现

  1. let fs = require('fs')  
  2. function read(file) {  
  3.   return new Promise(function(resolve, reject) {  
  4.     fs.readFile(file, 'utf8', function(err, data) {  
  5.       if (err) reject(err)  
  6.       resolve(data)  
  7.     })  
  8.   })  
  9. }  
  10. async function readResult(params) {  
  11.   try {  
  12.     let p1 = await read(params, 'utf8')//await后面跟的是一个Promise实例  
  13.     let p2 = await read(p1, 'utf8')  
  14.     let p3 = await read(p2, 'utf8')  
  15.     console.log('p1', p1)  
  16.     console.log('p2', p2)  
  17.     console.log('p3', p3)  
  18.     return p3  
  19.   } catch (error) {  
  20.     console.log(error)  
  21.   }  
  22. }  
  23. readResult('1.txt').then( // async函数返回的也是个promise  
  24.   data => {  
  25.     console.log(data)  
  26.   },  
  27.   err => console.log(err)  
  28. )  
  29. // p1 2.txt  
  30. // p2 3.txt  
  31. // p3 结束  
  32. // 结束 

2.Async/Await并发请求

(编辑:辽源站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

推荐文章
    热点阅读