摘要:异步执行可以用回调函数实现。全成功也可以通过解构数组的方式,将展开赋值。可以依次拿到每个结果。放弃暂时放弃执行相当于创建了一个对象。代表是否完成,代表函数完成,已经到终点。是因为最终的结果需要在最后的时候返回最终结果
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.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
摘要:的翻译文档由的维护很多人说,阮老师已经有一本关于的书了入门,觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中,显得越来越重要。为了让编程更美好,我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书(中文版) 超详细介绍promise的gitbook,看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...
摘要:那之前的例子来使用一下的话,你会发现浏览器报错了,如图定义的变量不允许二次修改。如图箭头函数没有它自己的值,箭头函数内的值继承自外围作用域。如图这里两边的结构没有一致,如果是的话,是可以正常解构的。 前言 国庆假期已过一半,来篇干货压压惊。 ES6,并不是一个新鲜的东西,ES7、ES8已经赶脚了。但是,东西不在于新,而在于总结。每个学前端的人,身边也必定有本阮老师的《ES6标准入门》或...
摘要:它们都用于声明变量。盲目使用替换后可能会导致预期意外的结果。有鉴于此,还是建议使用字符串,布尔和数字类型的数据类型。像使用这种下划线命名约定在一个开源项目中,命名规则很难维持得一直很好,这样经常会造成一些困扰。 今天群里有小伙伴跟我聊天,问了我几个关于ES6的问题,我才意识到,大部分初学者在学习的过程中,都是学了HTML/CSS/JS之后就开始上手学习框架了,而对于ES6的重视程度却不...
摘要:常用知识总结之前总结了中的一些知识点。在年正式发布了,简称,又称为。作为构造函数的语法糖,同时有属性和属性,因此同时存在两条继承链。子类的属性,表示构造函数的继承,总是指向父类。 ES6常用知识总结 之前总结了es5中js的一些知识点。这段时间看了石川blue老师讲解的es6课程,结合阮一峰老师的es6教程,随手做了一些笔记和总结分享给大家。内容还是es6主要的知识点,基本没有什么创新...
阅读 623·2021-11-23 09:51
阅读 3559·2021-11-15 11:38
阅读 891·2021-10-14 09:42
阅读 3091·2021-09-29 09:35
阅读 2039·2021-09-03 10:33
阅读 739·2021-07-30 16:33
阅读 1529·2019-08-30 15:55
阅读 1818·2019-08-30 14:04