资讯专栏INFORMATION COLUMN

理解javascript中异步编程Generator

williamwen1986 / 1957人阅读

摘要:是处理异步编程的一种方式,来看看和有什么不同或获取值再来看看函数,函数前面是一个然后是函数名,函数体里面是用代表但是可以返回多次使用即不处理后面的返回的是一个对象的写法更像是同步的语句,比更简洁获取值的几种方式调用可以使用获取值表示为最后一

Generator 是es6处理异步编程的一种方式,来看看和promise有什么不同
const myFirstPromise = new Promise((resolve, reject) => {
  //   resolve(someValue); // fulfilled
  // 或
  //   reject("failure reason"); // rejected
});
myFirstPromise.then(x=>x)  //获取值
再来看看Generator函数 ,函数前面是一个* 然后是函数名, 函数体里面是用yield代表return 但是可以返回多次
function* gen(){   
    yield 1
    yield 2
    return "return"  //使用return 即不处理后面的yield
}
let b=gen();
console.log(b);  //{}  返回的是一个generator对象 
console.log(b.next()) //{ value: 1, done: false }  

Generator的写法更像是同步的语句,比promise更简洁

获取generator值的几种方式

1.调用可以使用 next()获取值

console.log(b.next()) //{ value: 1, done: false }  
console.log(b.next()) //{ value: 2, done: false }
console.log(b.next()) //{ value: "return", done: true }  done==true表示为最后一步
function* foo(){
    yield "a"
    yield "b"
    yield "c"
}

2.也可以使用for...of 获取值

let f=foo();
for(let a of f ){
    console.log(a,"------")  
}

3.Array.from

console.log(Array.from(foo()),"-----from") //[ "a", "b", "c" ] "-----from"

4.扩展运算符

console.log([...foo()]);  //[ "a", "b", "c" ]

5.解构赋值

let [x,y]=foo();
console.log(x,"----x") //a
介绍下generatr常用的一些方法,next,return,throw

1.return 方法

function* bar(a,b){
    yield "1"
    yield "2"
    yield "3"
};

var barG=bar();
console.log(barG.next())  //{ value: 3, done: false }
console.log(barG.return("foo"))  //{ value: "foo", done: true } //return 后面都没有值
console.log(barG.next())  //{ value: undefined, done: true }

2.throw()方法

function* gen() {
    try {
        console.log("---")
        yield ;  //因为没有返回值
    } catch (e) {
        console.log("内部捕获", e);  //走的是这里
    }
    yield console.log("end");
};

try {
    var g = gen();
    g.next()   //console.log("---")
    g.throw("a");  //先走了异常  内部捕获 a  但是并不是yield 所以继续走 打印end 
    g.throw("b");   //因为这个异常后面已经没有yield 所以直接走的调用的catch 打印的外部捕获 b
} catch (e) { 
    console.log("外部捕获", e);
}
Generatro不是一个构造函数,只是一个遍历对象 所以里面的this都是指向window,下面看看例子
function* gener(){
    yield this.name=1;
}
console.log(gener().next()); //{ value: 1, done: false }
console.log(gener().name)   //undefined
console.log(window.name) //1

每天进步一点,希望大家喜欢,也希望喜欢的朋友点个赞,后续继续更新...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93756.html

相关文章

  • Javascript异步编程

    摘要:接下来,我们一起来看看中的异步编程,具体有哪几种。实现异步编程的方法一回调函数上面不止一次提到了回调函数。它是异步编程中,最基本的方法。四对象接下来,我们聊聊与相关的异步编程方法,对象。 showImg(https://segmentfault.com/img/bVbneWy?w=1600&h=1200); 前言 最近,小伙伴S 问了我一段代码: const funB = (value...

    wemall 评论0 收藏0
  • 夯实基础-JavaScript异步编程

    摘要:调用栈被清空,消息队列中并无任务,线程停止,事件循环结束。不确定的时间点请求返回,将设定好的回调函数放入消息队列。调用栈执行完毕执行消息队列任务。请求并发回调函数执行顺序无法确定。 异步编程 JavaScript中异步编程问题可以说是基础中的重点,也是比较难理解的地方。首先要弄懂的是什么叫异步? 我们的代码在执行的时候是从上到下按顺序执行,一段代码执行了之后才会执行下一段代码,这种方式...

    shadowbook 评论0 收藏0
  • Javascript异步编程:Callback、Promise、Generator

    摘要:异步过程控制了解异步的意义之后,我们来对比目前主流几种异步过程控制方法,探讨一下异步编程的最佳实践。结语希望本文对大家有点帮助,能更深刻的理解异步编程,能写出更优雅更高效的代码。 同步和异步(Synchronous and Asynchronous) 了解javascript的同学想必对同步和异步的概念应该都很熟悉了,如果还有不熟悉的同学,我这里举个形象的例子,比如我们早上起床后要干三...

    dadong 评论0 收藏0
  • JavascriptGenerator函数和yield关键字

    摘要:序在中,大家讨论的最多的就是异步编程的操作,如何避免回调的多次嵌套。今天所讲的和就是和异步编程有关,可以帮助我们把异步编程同步化。然而这样的方法依然需要依赖外在的库函数,于是中提出了和关键字。 序 在Javascript中,大家讨论的最多的就是异步编程的操作,如何避免回调的多次嵌套。异步操作的回调一旦嵌套很多,不仅代码会变的臃肿,还很容易出错。各种各样的异步编程解决方案也被不断提出,例...

    ZHAO_ 评论0 收藏0
  • 谈谈ES6前后的异步编程

    摘要:回调函数这是异步编程最基本的方法。对象对象是工作组提出的一种规范,目的是为异步编程提供统一接口。诞生后,出现了函数,它将异步编程带入了一个全新的阶段。 更多详情点击http://blog.zhangbing.club/Ja... Javascript 语言的执行环境是单线程的,如果没有异步编程,根本没法用,非卡死不可。 为了解决这个问题,Javascript语言将任务的执行模式分成两种...

    fizz 评论0 收藏0

发表评论

0条评论

williamwen1986

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<