本篇內(nèi)容主要講解“JavaScript異步怎么理解”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“JavaScript異步怎么理解”吧!

創(chuàng)新互聯(lián)公司專注于企業(yè)營(yíng)銷型網(wǎng)站、網(wǎng)站重做改版、忻城網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5高端網(wǎng)站建設(shè)、成都做商城網(wǎng)站、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為忻城等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

導(dǎo)讀

首先，要知道JavaScript是一門單線程的語(yǔ)言，要搞明白其為何會(huì)設(shè)計(jì)成單線程，要先來說一下JavaScript的最初應(yīng)用場(chǎng)景。

其次，在單線程語(yǔ)言中如何處理多線程的任務(wù)。

再次，同步和異步的流程以及如何理解異步。

然后，在解決復(fù)雜的邏輯業(yè)務(wù)時(shí)，出現(xiàn)了什么樣的問題。

再然后，怎樣解決這一問題。

=> Promise/.then（），async/await,

最后談?wù)勎⑷蝿?wù)及宏任務(wù)

JavaScript最初的應(yīng)用場(chǎng)景

最初，JavaScript的設(shè)計(jì)是作為瀏覽器腳本語(yǔ)言實(shí)現(xiàn)用戶的交互，而為了避免多線程給我們帶來很多不必要的麻煩，比如說：一個(gè)線程在刪除一個(gè)節(jié)點(diǎn)，而另一個(gè)線程在修改這個(gè)節(jié)點(diǎn)，這時(shí)我們應(yīng)該以哪一條線程為主呢？

因此，設(shè)計(jì)者將其設(shè)計(jì)成單線程的語(yǔ)言。

在H5中規(guī)定了JS可以擁有多個(gè)子線程，但是子線程仍然是依托于主線程的，且不能夠操作節(jié)點(diǎn)。

為什么要使用多線程

單線程的缺點(diǎn)：

單線程有一個(gè)“致命”的缺點(diǎn)，就是會(huì)造成阻塞；

因?yàn)槭菃尉€程，所以在程序運(yùn)行時(shí)是按照先進(jìn)先出的原則來進(jìn)行任務(wù)處理的，也正是因如此，在主線程遇到了耗時(shí)操作后，其后的任務(wù)就進(jìn)入到了等待的狀態(tài)。如果此時(shí)CPU是被占用的，也沒什么，但是如果這個(gè)耗時(shí)任務(wù)是一個(gè)不占CPU的操作，舉個(gè)栗子：向服務(wù)端請(qǐng)求數(shù)據(jù)。這個(gè)時(shí)候CPU出入空閑狀態(tài)但是程序并沒有執(zhí)行結(jié)束，這就形成了阻塞。

啟發(fā)：

在進(jìn)行耗時(shí)操作且影響代碼正常運(yùn)行時(shí)，我們可以先不管這個(gè)操作，將其掛起。先處理后面的任務(wù)，等到主線程清空時(shí)，再來執(zhí)行這個(gè)任務(wù)。于是出現(xiàn)了同步任務(wù)和異步任務(wù)。

同步和異步及程序運(yùn)行流程

關(guān)于這一塊內(nèi)容，筆者建議從整體來看，將這一塊中的內(nèi)容結(jié)合起來讀，可能會(huì)更好理解

我們可以將同步任務(wù)理解為在主線程中執(zhí)行的任務(wù)，異步任務(wù)理解為在子線程執(zhí)行。

同步任務(wù)和異步任務(wù)的執(zhí)行過程：

同步任務(wù)正常運(yùn)行，沒有特殊情況會(huì)一直執(zhí)行完畢；

當(dāng)主線程運(yùn)行到異步任務(wù)時(shí)，會(huì)安排一個(gè)子線程去運(yùn)行異步任務(wù)，當(dāng)異步任務(wù)運(yùn)行結(jié)束后，向任務(wù)隊(duì)列發(fā)送一個(gè)事件。表示該異步任務(wù)可以進(jìn)入主線程執(zhí)行了。

當(dāng)不考慮下面講的微任務(wù)和宏任務(wù)時(shí)，我們的程序運(yùn)行時(shí)，會(huì)先執(zhí)行同步任務(wù)，執(zhí)行到異步任務(wù)后，將其發(fā)送到子線程中運(yùn)行，運(yùn)行結(jié)束會(huì)向任務(wù)隊(duì)列發(fā)送一個(gè)事件。同步任務(wù)執(zhí)行完畢即主線程清空后，主線程會(huì)向任務(wù)隊(duì)列詢問，是否有接收到事件，如果沒有，那么主線程會(huì)一直詢問，這個(gè)過程稱為event loop；如果有，就執(zhí)行這個(gè)事件。直到程序全部完成。

事件

在上文我們提到了事件這一概念，可以將事件理解為異步任務(wù)返回的一個(gè)回調(diào)函數(shù)，這個(gè)回調(diào)函數(shù)也就是事件會(huì)在主線程上運(yùn)行。異步任務(wù)必須有回調(diào)函數(shù)。

拓展：異步函數(shù)必須return一個(gè)Promise對(duì)象

關(guān)于事件，阮一峰前輩是這么寫的：

"任務(wù)隊(duì)列"中的事件，除了IO設(shè)備的事件以外，還包括一些用戶產(chǎn)生的事件（比如鼠標(biāo)點(diǎn)擊、頁(yè)面滾動(dòng)等等）。只要指定過回調(diào)函數(shù)，這些事件發(fā)生時(shí)就會(huì)進(jìn)入"任務(wù)隊(duì)列"，等待主線程讀取。

“回調(diào)地獄”

在實(shí)際開發(fā)中，為了實(shí)現(xiàn)一些邏輯需求，可能會(huì)用到多層回調(diào)函數(shù)嵌套。這個(gè)時(shí)候會(huì)導(dǎo)致代碼的可讀性很差。人們稱之為“回調(diào)地獄”

Promise對(duì)象

代表的是異步操作 最終完成或失敗

目的：將回調(diào)函數(shù)的多層嵌套形式，拆解成鏈?zhǔn)秸{(diào)用的形式。

本質(zhì)：函數(shù)返回的對(duì)象，在這個(gè)對(duì)象上綁定回調(diào)函數(shù)，避免從一開始將回調(diào)函數(shù)作為參數(shù)傳入上一層函數(shù)。

一個(gè)Promise必然會(huì)處于這幾種狀態(tài)：

待定（pending）：初始狀態(tài)，既沒有被兌現(xiàn)，也沒有被拒絕

已兌現(xiàn)（fulfilled）：意味著操作成功完成 resolve

已拒絕（rejected）：意味著操作失敗 reject

Promise的使用：一般作為函數(shù)的返回值

const fn = function（）{

    return new Promise（（resolve，reject）=>{

        if（ture）{

            resolve（a）;

        }else{

            reject（b）;

        }

    }）

}

fn（）

    .then（（res）=>{有返回值的函數(shù)}）

    .then（（res）=>{有返回值的函數(shù)}）

    .then（（res）=>{有返回值的函數(shù)}）

    …

    .then（res=>{最后的函數(shù)}）

// 如果Promise對(duì)象中的請(qǐng)求完成了，那么將resolve的值傳給then中的回調(diào)函數(shù)作為參數(shù)執(zhí)行then方法

// 可以附加 .catch（）在鏈?zhǔn)浇Y(jié)構(gòu)的末尾，來捕獲錯(cuò)誤（reject傳回的值），并且之后的then不會(huì)執(zhí)行

// 可以在最后加一個(gè) .finally（） 來執(zhí)行清理操作  并且這個(gè)方法不管請(qǐng)求成功與否都會(huì)執(zhí)行

async/await

是Promise的語(yǔ)法糖；讓繁瑣的then（），和冗長(zhǎng)的鏈?zhǔn)秸{(diào)用可讀性變得更長(zhǎng)些;

具體使用方式：

//異步函數(shù)1

function getData（data）{  

    return new Promise（（reslove）=>{

        reslove（data）

    }）

}

//異步函數(shù)2

function sayHello（data）{

    return new Promise（（reslove）=>{

        reslove（data）

    }）

}

//異步函數(shù) 

async function fn（）{

     // await相當(dāng)于。then（）    getData（）相當(dāng)于是回調(diào)函數(shù)

    // await必須在async修飾的函數(shù)體內(nèi)使用

    const promiseA = await getData（'info'）

    const promiseB = await sayHello（promiseA）;

    console.log（promiseB）

}

談?wù)勎⑷蝿?wù)和宏任務(wù)

微任務(wù)

注意：Promise對(duì)象中的代碼是同步的，then（）方法中的回調(diào)函數(shù)才是異步的

then（）中的是微任務(wù)

宏任務(wù)

定時(shí)器是宏任務(wù)

代碼執(zhí)行順序口訣：先同步后異步，先微任務(wù)后宏任務(wù)

總之，同微宏

到此，相信大家對(duì)“JavaScript異步怎么理解”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

文章標(biāo)題：JavaScript異步怎么理解
瀏覽路徑：http://www.ekvhdxd.cn/article0/pdcooo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、電子商務(wù)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)公司、手機(jī)網(wǎng)站建設(shè)、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)