资讯专栏INFORMATION COLUMN

es6常用知识(三) prosime和generator

flybywind / 2463人阅读

摘要:异步执行可以用回调函数实现。全成功也可以通过解构数组的方式,将展开赋值。可以依次拿到每个结果。放弃暂时放弃执行相当于创建了一个对象。代表是否完成,代表函数完成,已经到终点。是因为最终的结果需要在最后的时候返回最终结果

prosime

在JavaScript的世界中,所有代码都是单线程执行的。
由于这个“缺陷”,导致JavaScript的所有网络操作,浏览器事件,都必须是异步执行。异步执行可以用回调函数实现。

1 promise 翻译过来是 承诺的意思。
异步:操作之间没啥关系。同时进行多个操作。
同步:同时只能做一件事情。
异步的缺点就是,代码复杂,一层套一层,如果需要执行很多个异步操作都完成在执行某个事情,那么就要嵌套很多层,代码可读性差,不好维护。如:

    // 异步
 ajax("/bannders",function(bannder_data){
     ajax("/hotItems",function(hotItems_data){
         ajax("/slides",function(slides_data){

         },function(){
             alert("读取失败")
         })
     },function(){
         alert("读取失败")
     })
 },function(){
     alert("读取失败")
 })

同步:代码简单 ,写起来方便

// 同步
    let bannder_data=ajax_async("/bannders")
    let hotItems_data=ajax_async("/hotItems")
    let slides_data=ajax_async("/slides")

可是同步虽然写法简单,但是每个步骤需要等待上一个操作结束,所以实际项目中需要的是异步(不等待)的操作。
于是prosime出现了,他的作用就是:

消除异步操作

用同步一样的方式来书写异步代码

1.Prosime到底怎么用

prosime是es6自带的。需要的用prosime的时候,可以直接new出来一个peomise对象。promise里面有一个参数,这个参数是函数,所有的异步操作代码都写在这个函数里面。这个函数有两个参数,一个是resolve(成功),另外一个是reject(失败)。例如:

var  p=new Promise(function (resolve,reject) {
   异步代码
   resolve--成功
   reject---失败
   $.ajax({
       url:"data/arr.txt",
       dataType:"json",
       success(arr){
           resolve(arr)
       },
       error(err){
           reject(err)
       }
   })
})

promise的使用:p里面的then方法的意思是然后呢?就是当peomise对象执行之后有结果了,
之后执行。then里面有两个参数,都是函数,第一个函数其实就是resolve对应的结果。
第二个函数就是reject对象的结果。

p.then(function(arr){
   console.log("成功了",arr)
},function(err){
   console.log("失败了",err)
})
2.封装两个promise
var  p1=new Promise(function (resolve,reject) {
   异步代码
   resolve--成功
   reject---失败
   $.ajax({
       url:"data/arr.txt",
       dataType:"json",
       success(arr){
           resolve(arr)
       },
       error(err){
           reject(err)
       }
   })
})


var  p2=new Promise(function (resolve,reject) {
   异步代码
   resolve--成功
   reject---失败
   $.ajax({
       url:"data/json.txt",
       dataType:"json",
       success(arr){
           resolve(arr)
       },
       error(err){
           reject(err)
       }
   })
})
promie上有一个方法all,就是全都执行完以后,all的参数是一个数组,是所以的promise对象,
之后then方法里面有两个参数,都是函数,第一个函数其实就是全都成功以后,其函数的参数就是返回所有resolve结果。,第二个函数是只是有一个失败了。:
Promise.all([p1,p2]).then(function(arr){
   alert("全成功")
   console.log(arr)
   也可以通过解构数组的方式,将arr展开赋值。可以依次拿到 每个resolve结果。
   let  [p1,p2]=arr
   console.log(p1)
   console.log(p2)
},function(){
   alert("至少有一个失败")
})


Promise的二次封装,createPromise,抽出可变的URL即可。

function createPromise(url) {
    return new Promise(function (resolve, reject) {
        // 异步代码
        // resolve--成功
        // reject---失败
        $.ajax({   
            url,//    url:url      json 值和名相同可简写,
            dataType: "json",
            success(arr) {
                resolve(arr)
            },
            error(err) {
                reject(err)
            }
        })
    })
}


// promie上有一个方法all,就是全都执行完以后,all的参数是一个数组,是所以的promise对象,
// 之后then方法里面有两个参数,都是函数,第一个函数其实就是全都成功以后,其函数的参数就是返回所有resolve结果。,第二个函数是只是有一个失败了。:
Promise.all([createPromise("data/arr.txt"), createPromise("data/json.txt")]).then(function (arr) {
    alert("全成功")
    console.log(arr)
    //    也可以通过解构数组的方式,将arr展开赋值。可以依次拿到 每个resolve结果。
    let [p1, p2] = arr
    console.log(p1)
    console.log(p2)
}, function () {
    alert("至少有一个失败!")
})



generator (生成器) 1.什么是generaor函数。

Generator函数是一个带星星函数(星号和function和函数名不能同时连接接口),而且是一个可以暂停的函数。
函数的内部通过yield来推进函数。通过定义yield后面的值来决定返回的value。
函数返回一个遍历器,这个遍历器有一个next方法,可以获取一个对象,这个对象就包含了yield定义好的参数。

    function *show(){
        alert("a")
        yield; //放弃(暂时放弃执行)
        alert("b")
    }
    let genObj=show() //相当于创建了一个generator对象。
    //这个对象里有一个很重要的东西next(),就是下一步,下一步。
    //就是踹一脚走一步。
    genObj.next() //执行一步之后,看到yield之后,就停止执行了。
    //如果想让alert(’b‘)出来就需要next两步。
    genObj.next()

普通函数 ----一路到底
generator函数---中间能停

2.yield的传参

2.1第一个next是废的,不能传参。

// yield可以传参
function *show(){
    alert("a");

    let a=yield;
    alert("b");
    alert(a);
}
let gen=show();
gen.next(12);  //通过yield传参的时候,第一个next是废的,传传不了,如果想给第一个yield传参,
//通过函数就可以传参
gen.next(5);

2.2给第一个yield传参,就直接通过函数传参就可以了

    // 给第一个yield传参,就直接通过函数传参就可以了。
    function *show(num1,num2){
        alert(`${num1},${num2}`)
        alert("a");
        
        let a=yield;
        alert("b");
        alert(a);
    }
    let gen=show(98,97);
    gen.next(12);  //通过yield传参的时候,第一个next是废的,传传不了,如果想给第一个yield传参,
    //通过函数就可以传参
    gen.next(5);

3 yield的返回值。

3.1 done代表是否完成

    function * show (){
        alert("a")
        yield 12;
        alert("b")
    }
    let gen =show()
    let res1=gen.next()
    console.log(res1)// {done:false, value:12} //done 代表是否完成,代表函数没完成,没到终点。
    let res2=gen.next()
    console.log(res2) // {done:true, value:undefind} //done 代表是否完成,true代表函数完成,已经到终点。undefind是因为最终的结果需要在
    // generator最后的时候return 返回最终结果

3.2 generator最后的return是返回最终结果

    function * show (){
        alert("a")
        yield 12; //yield返回
        alert("b")
        return 100
    }
    let gen =show()
    let res1=gen.next()
    console.log(res1)// {done:false, value:12} //done 代表是否完成,代表函数没完成,没到终点。
    let res2=gen.next()
    console.log(res2) // {done:true, value:100} //done 代表是否完成,true代表函数完成,已经到终点。undefind是因为最终的结果需要在
    // generator最后的时候return 返回最终结果

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

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

相关文章

  • ES6-7

    摘要:的翻译文档由的维护很多人说,阮老师已经有一本关于的书了入门,觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中,显得越来越重要。为了让编程更美好,我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书(中文版) 超详细介绍promise的gitbook,看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

    mudiyouyou 评论0 收藏0
  • ES6常用知识点概述

    摘要:那之前的例子来使用一下的话,你会发现浏览器报错了,如图定义的变量不允许二次修改。如图箭头函数没有它自己的值,箭头函数内的值继承自外围作用域。如图这里两边的结构没有一致,如果是的话,是可以正常解构的。 前言 国庆假期已过一半,来篇干货压压惊。 ES6,并不是一个新鲜的东西,ES7、ES8已经赶脚了。但是,东西不在于新,而在于总结。每个学前端的人,身边也必定有本阮老师的《ES6标准入门》或...

    keithyau 评论0 收藏0
  • 从0到1使用VUE-CLI3开发实战(): ES6/ES7知识储备

    摘要:它们都用于声明变量。盲目使用替换后可能会导致预期意外的结果。有鉴于此,还是建议使用字符串,布尔和数字类型的数据类型。像使用这种下划线命名约定在一个开源项目中,命名规则很难维持得一直很好,这样经常会造成一些困扰。 今天群里有小伙伴跟我聊天,问了我几个关于ES6的问题,我才意识到,大部分初学者在学习的过程中,都是学了HTML/CSS/JS之后就开始上手学习框架了,而对于ES6的重视程度却不...

    crossoverJie 评论0 收藏0
  • ES6 常用知识点总结

    摘要:常用知识总结之前总结了中的一些知识点。在年正式发布了,简称,又称为。作为构造函数的语法糖,同时有属性和属性,因此同时存在两条继承链。子类的属性,表示构造函数的继承,总是指向父类。 ES6常用知识总结 之前总结了es5中js的一些知识点。这段时间看了石川blue老师讲解的es6课程,结合阮一峰老师的es6教程,随手做了一些笔记和总结分享给大家。内容还是es6主要的知识点,基本没有什么创新...

    leap_frog 评论0 收藏0

发表评论

0条评论

flybywind

|高级讲师

TA的文章

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