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

第2章Vue项目开发ES6基础JavaScript=ECMAScript+宿主API一、JS运行环境二、进程与线程简单地说进程就是运行中的程序，程序在运行时需要系统资源，如cup、内存，磁盘、网络等，进程可以申请和拥有系统资源，进程是操作系统进行资源分配的基本单位。线程：线程是进程内部的执行序列（执行路线）。一条线程指的是进程中一个单一顺序的控制流，一个进程至少要有一个线程，也可以有多个线程，每条线程并行执行不同的任务。同一个进程的所有线程共享该进程所有资源。每个进程都可以通过创建线程或者调用线程来完成任务。打个比方，进程就相当于一个大学，线程就相当于大学的一个学院，一个大学可以只有一个学院也可以有多个学院，学校内部的资源学院是可以共享的。浏览器进程单击浏览器右上角的三个点并导航到“更多工具”>“任务管理器”谷哥浏览器的架构是多进程的浏览器进程浏览器进程：主要负责界面显示、用户交互、子进程管理、存储功能网络进程：主要负责页面的网络资源加载GPU进程：网页、Chrome的UI界面都选择采用GPU来绘制渲染进程：主要负责将HTML、CSS和JS转换为用户可以与之交互的网页插件进程：负责插件的运行浏览器的渲染进程里的线程（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运行机制是单线程，JS执行环境中负责执行JS代码的线程只有一个（JS引擎线程）。单线程在同一时间只能进行一项任务。如果有多项任务的话，需要对任务进行排队，后面的任务需要等前面的任务执行完才能执行，如果前面的任务耗时过长，后面的任务就需要一直等，一些从用户角度上不需要等待的任务就会一直等待，这个从体验角度上来讲是不可接受的，所以JS中就出现了异步的概念。四、JS的异步编程JS异步能力的本质是浏览器或Node的多线程能力。运行环境提供的API是的同步或异步模式的方式工作。JavaScript=ECMAScript+宿主API一、JS运行环境定时器（setTimeout()、setInterval()）、UI交互事件(单击、双击等)、网络请求、fs文件操作、数据库操作等1、同步API与异步API异步API如：console.log()、document.getElementById()等同步API如：异步模式API：不会等待这个任务的结束才开始下一个任务。当前API的执行不会阻塞后续代码的执行。不能从返回值中拿到API的执行结果，通过回调函数的方式拿到结果。（代码执行顺序和返回值的方式都不同）开启过后就立即往后执行下一个任务，后续逻辑一般会通过回调函数的方式定义。2、同步API与异步API工作模式的区别同步API：只有当前API执行完成后，才能继续执行下一个任务。前面的代码会阻塞后面代码的执行。可以从返回值中拿到API的执行的结果。2、代码执行顺序

事件循环Eventloop

事件循环（Eventloop）只做一件事情，侦听JS主线程和待处理队列，当JS主线程当中的所有任务都结束了，事件循环就会从待处理队列当中了取出第一个函数，到

JS主线程执行。console.log('task1');setTimeout(function

timer1(){

console.log('task2');},1000);console.log('task3');console.log('task4');Console同步代码执行区（JS引擎线程）异步代码执行区（浏览器、node）待处理队列task1task4task2console.log('task1');setTimeout(timer1,1000)console.log('task3');console.log('task4');timer1(){

console.log('task2');}task3Eventloopconsole.log('task2');3、获取异步API中的返回值回调函数回调函数是一个作为变量传递给另外一个函数的函数，它在主体函数执行完之后执行。回调函数的（参数）：接收异步API执行的结果。回调函数的{函数体}：依赖异步API执行后的逻辑。（异步任务结束后应该做什么）const

p=new

Promise((resolve,reject)=>{

setTimeout(()=>{

let

flag=false;

if(flag){

//异步任务成功

resolve("成功的数据");

}else{

//异步任务失败

reject("报错信息")

}

},1000);});console.log(p);执行异步任务newPromise()setTimeout()resolve("成功的数据")成功失败

reject("报错信息")ppp未决的Promise已决的Promise1、Promise状态变化

（未暴露）只能改变一次pending变为fulfilledresolve()或pending变为rejectedreject()2、Promise的结果（值）

通过then()、catch()回调函数获取Promise对象有三个状态：pending（未决的），fulfilled（已完成（成功）），rejected（已拒绝（失败））p执行回调函数returnthrow非Promise的任意值newPromise()返回的Promise实例P.then(回调函数)新的Promise

async

function

fn(){

return

8888

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

//异步任务