《Vue.js前端开发技术与实践（第二版）》 课件 第2章 Vue项目开发ES6基础-异步编程.pptx

第2章Vue项目开发ES6基础;JavaScript=ECMAScript+宿主API;二、进程与线程;每个进程都可以通过创建线程或者调用线程来完成任务。

打个比方，进程就相当于一个大学，线程就相当于大学的一个学院，一个大学可以只有一个学院也可以有多个学院，学校内部的资源学院是可以共享的。;浏览器进程;浏览器进程;浏览器的渲染进程里的线程;（1）GUI渲染线程，负责渲染浏览器页面，解析HTML、CSS，构建DOM树、构建CSSOM树、构建渲染树和绘制页面；界面需要重绘或由于某种操作引发回流时，该线程就会执行。

（2）JS引擎线程，也称为JS内核，负责解析、运行JS代码，不能和GUI渲染线程同时执行。

（3）事件触发线程，负责监听和触发事件。浏览器开启事件触发线程用来监听事件的触发，触发以后把事件处理函数里面的代码交给JS引擎线程来执行，但是JS是单线程的，事件处理函数里面的代码会添加到待处理队列的末尾，也就是等JS线程空闲以后才会执行。

（4）定时触发器线程，setInterval与setTimeout所在的线程。浏览器开启定时器线程来计时，计时时间到并触发定时，把要执行的回调函数里面的代码添加到待处理队列的末尾，等待JS线程空闲以后执行。

（5）http请求线程，在使用XMLHttpRequest对象发送http请求的时候，浏览器新开一个线程请求，检测到对象状态改变时，如果绑定了回调函数，请求线程就触发状态变更事件，将这个回调函数里面的代码添加到待处理队列的末尾。;三、JS引擎线程的单线程

;四、JS的异步编程;JavaScript=ECMAScript+宿主API;定时器（setTimeout()、setInterval()）、UI交互事件(单击、双击等)、网络请求、fs文件操作、数据库操作等;异步模式API：

不会等待这个任务的结束才开始下一个任务。

当前API的执行不会阻塞后续代码的执行。

不能从返回值中拿到API的执行结果，通过回调函数的方式拿到结果。

（代码执行顺序和返回值的方式都不同）

开启过后就立即往后执行下一个任务，后续逻辑一般会通过回调函数的方式定义。;2、代码执行顺序

;console.log(task1);

setTimeout(functiontimer1(){

??console.log(task2);

},1000);

console.log(task3);

console.log(task4);;3、获取异步API中的返回值

;constp=newPromise((resolve,reject)={

??setTimeout(()={

????letflag=false;

????if(flag){

??????//异步任务成功

??????resolve(成功的数据);

????}else{

??????//异步任务失败

??????reject(报错信息)

????}

??},1000);

});

console.log(p);;newPromise();1、Promise状态变化（未暴露）

只能改变一次

pending变为fulfilledresolve()

或

pending变为rejectedreject();p;?asyncfunctionfn(){

??????return8888

??????/*returnnewPromise((resolve,reject)={

???????????????//异步任务?????

???????????})*/

?????//throw错误信息

????}

????constp=fn()

????console.log(p);return