JS异步编程六种方案

Promise不只可以或许捕捉错误，并且也很好地办理了回调地狱的题目，可以把之前的回调地狱例子改写为如下代码：

ajax(url)  
  .then(res => {  
      console.log(res)  
      return ajax(url1)  
  }).then(res => {  
      console.log(res)  
      return ajax(url2)  
  }).then(res => console.log(res)) 

它也是存在一些弱点的，好比无法打消 Promise，错误必要通过回调函数捕捉。

六、天生器Generators/ yield

Generator 函数是 ES6 提供的一种异步编程办理方案，语法举动与传统函数完全差异，Generator 最大的特点就是可以节制函数的执行。

•  语法上，起首可以把它领略成，，Generator 函数是一个状态机，封装了多个内部状态。
•  Generator 函数除了状态机，照旧一个遍历器工具天生函数。
•  可停息函数, yield可停息，next要领可启动，每次返回的是yield后的表达式功效。
•  yield表达式自己没有返回值，可能说老是返回undefined。next要领可以带一个参数，该参数就会被看成上一个yield表达式的返回值。

我们先来看个例子：

function *foo(x) {  
  let y = 2 * (yield (x + 1))  
  let z = yield (y / 3)  
  return (x + y + z)  
}  
let it = foo(5)  
console.log(it.next())   // => {value: 6, done: false}  
console.log(it.next(12)) // => {value: 8, done: false}  
console.log(it.next(13)) // => {value: 42, done: true} 

也许功效跟你想象纷歧致，接下来我们逐行代码说明：

•  起首 Generator 函数挪用和平凡函数差异，它会返回一个迭代器
•  当执行第一次 next 时，传参会被忽略，而且函数停息在 yield (x + 1) 处，以是返回 5 + 1 = 6
•  当执行第二次 next 时，传入的参数12就会被看成上一个yield表达式的返回值，假如你不传参，yield 永久返回 undefined。此时 let y = 2 12，以是第二个 yield 便是 2 12 / 3 = 8
•  当执行第三次 next 时，传入的参数13就会被看成上一个yield表达式的返回值，以是 z = 13, x = 5, y = 24，相加便是 42

我们再来看个例子：有三个当地文件，别离1.txt,2.txt和3.txt，内容都只有一句话，下一个哀求依靠上一个哀求的功效，想通过Generator函数依次挪用三个文件

//1.txt文件  
2.txt  

//2.txt文件  
3.txt  

//3.txt文件  
竣事  

let fs = require('fs')  
function read(file) {  
  return new Promise(function(resolve, reject) {  
    fs.readFile(file, 'utf8', function(err, data) {  
      if (err) reject(err)  
      resolve(data)  
    })  
  })  
}  
function* r() {  
  let r1 = yield read('./1.txt')  
  let r2 = yield read(r1)  
  let r3 = yield read(r2)  
  console.log(r1)  
  console.log(r2)  
  console.log(r3)  
}  
let it = r()  
let { value, done } = it.next()  
value.then(function(data) { // value是个promise  
  console.log(data) //data=>2.txt  
  let { value, done } = it.next(data)  
  value.then(function(data) {  
    console.log(data) //data=>3.txt  
    let { value, done } = it.next(data)  
    value.then(function(data) {  
      console.log(data) //data=>竣事  
    })  
  })  
})  
// 2.txt=>3.txt=>竣事 

（编辑：湖南网）

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