javascript 异步(一)

在开始谈javascript异步编程之前,我们先抛出几个问题,针对问题回答问题,从而解决问题

1、为什么要有异步编程?

2、异步编程怎么使用?

3、异步编程的原理是什么?

        对javascript有点了解的人都知道,它是单线程的,这是js语言特性所决定的,它的作用就是用来操作DOM树的,而DOM树经过浏览器渲染后就是我们看到的可视化UI界面,同一时间只允许一个js操作命令修改DOM,若有多个命令时,浏览器不知道要渲染那个,会出现问题。比如你的主线程在给DOM的innerHtml做一个赋值操作,你的另一个线程把这个DOM结构删除了,这肯定不可以。但是由于页面的结构和资源越来越复杂多样,比如需要网络请求的图片资源、ajax、轮询、文件资源等,在单线程的情况下,必须等一个任务执行完毕之后才能进行下一项,这样非常耗时,这种情况对于下面的程序来说是一种阻塞;而且用户体验不好,这个时候如果我们在等待的时间里执行其他操作,在这个操作完成之后再告诉我们,这就是异步编程。一般我们遇到的异步操作包括callback、Promise、setTimeout 、setInterval、事件

在讲解之前假设已经了解Event Loop,同步代码放到执行栈中,异步代码放在队列当中,程序一般的执行顺序是执行栈中代码执行完毕后执行队列中的命令,而异步代码任务又分为微任务(Promise)和宏任务,所以执行代码的顺序就变为执行栈>微任务>宏任务。异步与同步相比,最难以掌控的就是异步的任务会什么时候完成和完成之后的回调问题

本节主要讲解Promise,前面提到在异步编程中,一个异步任务执行的过程中,去执行另一个没有影响的异步代码,没有影响是指这个异步任务的执行过程不依赖于前一个异步任务的结果,在前面那个异步任务执行完成后或成功或失败都发出通知,这个就是promise:promise又三种状态,pending(进行中)、resolve(已完成)、rejected(已拒绝),开始执行的时候,promise状态就是pending,任务完成了状态就变成了Resolved、没有完成失败了就变成了Rejected。

let promise = new Promise((resolve,reject)=>{

    // 接收一个callback。参数是成功函数与失败函数

    setTimeout(()=>{

        let num = parseInt(Math.random()*100);

            // 如果数字大于50就调用成功的函数,并且将状态变成Resolved

            if(num > 50){

                resolve(num);

            }else{

                // 否则就调用失败的函数,将状态变成Rejected

                reject(num)

            }

         },10000)

})

promise.then(res=>{

    console.log(res); //在构造函数中如果你执行力resolve函数就会到这一步

    },

    err=>{ // 执行了reject函数会到这一步

        console.log(err);

    }

)

then方法接收两个函数,第一个是承诺成功(状态为resolved)的回调函数,一个承诺失败(状态为rejected)的回调函数。

then方法的返回值不是一个promise对象就会被包装成一个promise对象,所以then方法支持链式调用。

还有一个promise.all和promise.race

promise.all接受一个数组,数组里都是promise对象,当所有promise对象状态变为resolved时才会变为resolved,但是若有一个时rejected,则promise.all状态就会变为rejected;该情况可以解决程序并行任务的问题,调用then方法时,回调函数是一个按顺序执行成功后结果的数组

promise.race同样也是接受一个promise对象的数组,它是一个竞速模式,不同的是当所有promise对象中,只要有一个promise对象的状态变为rejected或resolved,它的状态就会随之改变,第一个状态改变的promise对象的返回值被使用。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,826评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,968评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,234评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,562评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,611评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,482评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,271评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,166评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,608评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,814评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,926评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,644评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,249评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,866评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,991评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,063评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,871评论 2 354

推荐阅读更多精彩内容

  • 你不知道JS:异步 第三章:Promises 在第二章,我们指出了采用回调来表达异步和管理并发时的两种主要不足:缺...
    purple_force阅读 2,067评论 0 4
  • 弄懂js异步 讲异步之前,我们必须掌握一个基础知识-event-loop。 我们知道JavaScript的一大特点...
    DCbryant阅读 2,711评论 0 5
  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 8,706评论 1 56
  • title: promise总结 总结在前 前言 下文类似 Promise#then、Promise#resolv...
    JyLie阅读 12,241评论 1 21
  • 新学期即将开始,有些工作迫在眉睫需要我们立即着手,以便新学期开始就打一个胜仗。 1、保持优势 对于自己优势学习科目...
    芭蕉湾的竹林阅读 153评论 2 2