ES6的Generator和Async函数

2020-11-28  本文已影响0人  JohnYuCN

一、是用来做什么的

  1. 共性:
    都是结合Promise的进行异步编程方案的同步语法的语法糖。
  2. 区别:
    Generator是服务端的糖语法(自定义的函数内部,使用同步语法,调用时仍然使用promise调用语法)
    Async是服务端和客户端的共同糖语法(函数内部和调用都是同步语法,但在调用终结时,仍然使用promise语法)。

二、实例说明:

1. 纯Promise的语法:

可以看到,无论函数定义还是调用,都使用了Promise的语法形式

var fetch = require('node-fetch');
function raw(url){
    return new Promise((resovle,reject)=>{
        fetch(url)
        .then(resp=>resp.json())
        .then(data=>resovle(data))
    })
}

raw('https://api.github.com/users/github')
.then(info=>console.log(info))

2. Generator的语法:

可以看到,函数内部已经不见了Promise的语法形式,更加接近于同步式编程。

function* gen(url) {
    var response = yield fetch(url);
    return  response.json()  
}

 //自己完成调用

let g=gen('https://api.github.com/users/github')
g.next().value
.then(resp => g.next(resp).value)
    .then(info => console.log(info))

小插曲:前端大神TJ缩写了一个名字为co有调用库,可以完成如下形式的调用,目的就是消除调用处的Promise语法(终结处,仍然只能返回Promise对象,但已经进行了简化的工作)

//使用Tj的co库
const co = require('co')
co(gen,'https://api.github.com/users/github')
.then(info=>console.log(info))

3. Async...await的方式:

可以看到,无论函数定义还是调用,都不采用Promise的语法形式(终结处,仍然只能返回Promise对象,但已经进行了简化的工作)

async function fn(){
    let response=await fetch('https://api.github.com/users/github');
    let info=await response.json()
    return info
}
fn().then(m=>console.log(m))
上一篇 下一篇

猜你喜欢

热点阅读