《Vue.js前端開發(fā)技術(shù)與實(shí)踐（第二版）》 課件 第2章 Vue項(xiàng)目開發(fā)ES6基礎(chǔ)-異步編程

第2章Vue項(xiàng)目開發(fā)ES6基礎(chǔ)JavaScript=ECMAScript+宿主API一、JS運(yùn)行環(huán)境二、進(jìn)程與線程簡單地說進(jìn)程就是運(yùn)行中的程序，程序在運(yùn)行時(shí)需要系統(tǒng)資源，如cup、內(nèi)存，磁盤、網(wǎng)絡(luò)等，進(jìn)程可以申請(qǐng)和擁有系統(tǒng)資源，進(jìn)程是操作系統(tǒng)進(jìn)行資源分配的基本單位。線程：線程是進(jìn)程內(nèi)部的執(zhí)行序列（執(zhí)行路線）。一條線程指的是進(jìn)程中一個(gè)單一順序的控制流，一個(gè)進(jìn)程至少要有一個(gè)線程，也可以有多個(gè)線程，每條線程并行執(zhí)行不同的任務(wù)。同一個(gè)進(jìn)程的所有線程共享該進(jìn)程所有資源。每個(gè)進(jìn)程都可以通過創(chuàng)建線程或者調(diào)用線程來完成任務(wù)。打個(gè)比方，進(jìn)程就相當(dāng)于一個(gè)大學(xué)，線程就相當(dāng)于大學(xué)的一個(gè)學(xué)院，一個(gè)大學(xué)可以只有一個(gè)學(xué)院也可以有多個(gè)學(xué)院，學(xué)校內(nèi)部的資源學(xué)院是可以共享的。瀏覽器進(jìn)程單擊瀏覽器右上角的三個(gè)點(diǎn)并導(dǎo)航到“更多工具”>“任務(wù)管理器”谷哥瀏覽器的架構(gòu)是多進(jìn)程的瀏覽器進(jìn)程瀏覽器進(jìn)程：主要負(fù)責(zé)界面顯示、用戶交互、子進(jìn)程管理、存儲(chǔ)功能網(wǎng)絡(luò)進(jìn)程：主要負(fù)責(zé)頁面的網(wǎng)絡(luò)資源加載GPU進(jìn)程：網(wǎng)頁、Chrome的UI界面都選擇采用GPU來繪制渲染進(jìn)程：主要負(fù)責(zé)將HTML、CSS和JS轉(zhuǎn)換為用戶可以與之交互的網(wǎng)頁插件進(jìn)程：負(fù)責(zé)插件的運(yùn)行瀏覽器的渲染進(jìn)程里的線程（1）GUI渲染線程，負(fù)責(zé)渲染瀏覽器頁面，解析HTML、CSS，構(gòu)建DOM樹、構(gòu)建CSSOM樹、構(gòu)建渲染樹和繪制頁面；界面需要重繪或由于某種操作引發(fā)回流時(shí)，該線程就會(huì)執(zhí)行。（2）JS引擎線程，也稱為JS內(nèi)核，負(fù)責(zé)解析、運(yùn)行JS代碼，不能和GUI渲染線程同時(shí)執(zhí)行。（3）事件觸發(fā)線程，負(fù)責(zé)監(jiān)聽和觸發(fā)事件。瀏覽器開啟事件觸發(fā)線程用來監(jiān)聽事件的觸發(fā)，觸發(fā)以后把事件處理函數(shù)里面的代碼交給JS引擎線程來執(zhí)行，但是JS是單線程的，事件處理函數(shù)里面的代碼會(huì)添加到待處理隊(duì)列的末尾，也就是等JS線程空閑以后才會(huì)執(zhí)行。（4）定時(shí)觸發(fā)器線程，setInterval與setTimeout所在的線程。瀏覽器開啟定時(shí)器線程來計(jì)時(shí)，計(jì)時(shí)時(shí)間到并觸發(fā)定時(shí)，把要執(zhí)行的回調(diào)函數(shù)里面的代碼添加到待處理隊(duì)列的末尾，等待JS線程空閑以后執(zhí)行。（5）http請(qǐng)求線程，在使用XMLHttpRequest對(duì)象發(fā)送http請(qǐng)求的時(shí)候，瀏覽器新開一個(gè)線程請(qǐng)求，檢測(cè)到對(duì)象狀態(tài)改變時(shí)，如果綁定了回調(diào)函數(shù)，請(qǐng)求線程就觸發(fā)狀態(tài)變更事件，將這個(gè)回調(diào)函數(shù)里面的代碼添加到待處理隊(duì)列的末尾。三、JS引擎線程的單線程

JS運(yùn)行機(jī)制是單線程，JS執(zhí)行環(huán)境中負(fù)責(zé)執(zhí)行JS代碼的線程只有一個(gè)（JS引擎線程）。單線程在同一時(shí)間只能進(jìn)行一項(xiàng)任務(wù)。如果有多項(xiàng)任務(wù)的話，需要對(duì)任務(wù)進(jìn)行排隊(duì)，后面的任務(wù)需要等前面的任務(wù)執(zhí)行完才能執(zhí)行，如果前面的任務(wù)耗時(shí)過長，后面的任務(wù)就需要一直等，一些從用戶角度上不需要等待的任務(wù)就會(huì)一直等待，這個(gè)從體驗(yàn)角度上來講是不可接受的，所以JS中就出現(xiàn)了異步的概念。四、JS的異步編程JS異步能力的本質(zhì)是瀏覽器或Node的多線程能力。運(yùn)行環(huán)境提供的API是的同步或異步模式的方式工作。JavaScript=ECMAScript+宿主API一、JS運(yùn)行環(huán)境定時(shí)器（setTimeout()、setInterval()）、UI交互事件(單擊、雙擊等)、網(wǎng)絡(luò)請(qǐng)求、fs文件操作、數(shù)據(jù)庫操作等1、同步API與異步API異步API如：console.log()、document.getElementById()等同步API如：異步模式API：不會(huì)等待這個(gè)任務(wù)的結(jié)束才開始下一個(gè)任務(wù)。當(dāng)前API的執(zhí)行不會(huì)阻塞后續(xù)代碼的執(zhí)行。不能從返回值中拿到API的執(zhí)行結(jié)果，通過回調(diào)函數(shù)的方式拿到結(jié)果。（代碼執(zhí)行順序和返回值的方式都不同）開啟過后就立即往后執(zhí)行下一個(gè)任務(wù)，后續(xù)邏輯一般會(huì)通過回調(diào)函數(shù)的方式定義。2、同步API與異步API工作模式的區(qū)別同步API：只有當(dāng)前API執(zhí)行完成后，才能繼續(xù)執(zhí)行下一個(gè)任務(wù)。前面的代碼會(huì)阻塞后面代碼的執(zhí)行?？梢詮姆祷刂抵心玫紸PI的執(zhí)行的結(jié)果。2、代碼執(zhí)行順序

事件循環(huán)Eventloop

事件循環(huán)（Eventloop）只做一件事情，偵聽JS主線程和待處理隊(duì)列，當(dāng)JS主線程當(dāng)中的所有任務(wù)都結(jié)束了，事件循環(huán)就會(huì)從待處理隊(duì)列當(dāng)中了取出第一個(gè)函數(shù)，到

JS主線程執(zhí)行。console.log('task1');setTimeout(function

timer1(){

console.log('task2');},1000);console.log('task3');console.log('task4');Console同步代碼執(zhí)行區(qū)（JS引擎線程）異步代碼執(zhí)行區(qū)（瀏覽器、node）待處理隊(duì)列task1task4task2console.log('task1');setTimeout(timer1,1000)console.log('task3');console.log('task4');timer1(){

console.log('task2');}task3Eventloopconsole.log('task2');3、獲取異步API中的返回值回調(diào)函數(shù)回調(diào)函數(shù)是一個(gè)作為變量傳遞給另外一個(gè)函數(shù)的函數(shù)，它在主體函數(shù)執(zhí)行完之后執(zhí)行?；卣{(diào)函數(shù)的（參數(shù)）：接收異步API執(zhí)行的結(jié)果?；卣{(diào)函數(shù)的{函數(shù)體}：依賴異步API執(zhí)行后的邏輯。（異步任務(wù)結(jié)束后應(yīng)該做什么）const

p=new

Promise((resolve,reject)=>{

setTimeout(()=>{

let

flag=false;

if(flag){

//異步任務(wù)成功

resolve("成功的數(shù)據(jù)");

}else{

//異步任務(wù)失敗

reject("報(bào)錯(cuò)信息")

}

},1000);});console.log(p);執(zhí)行異步任務(wù)newPromise()setTimeout()resolve("成功的數(shù)據(jù)")成功失敗

reject("報(bào)錯(cuò)信息")ppp未決的Promise已決的Promise1、Promise狀態(tài)變化

（未暴露）只能改變一次pending變?yōu)閒ulfilledresolve()或pending變?yōu)閞ejectedreject()2、Promise的結(jié)果（值）

通過then()、catch()回調(diào)函數(shù)獲取Promise對(duì)象有三個(gè)狀態(tài)：pending（未決的），fulfilled（已完成（成功）），rejected（已拒絕（失?。﹑執(zhí)行回調(diào)函數(shù)returnthrow非Promise的任意值newPromise()返回的Promise實(shí)例P.then(回調(diào)函數(shù))新的Promise

async

function

fn(){

return

8888

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

//異步任務(wù)