前端原理_異步與單線程

NoraXie 發(fā)布于2019-08-23 12:22 / 2178人閱讀

摘要：單線程什么是單線程語言的執(zhí)行環(huán)境是單線程所謂單線程，就是指一次只能完成一件任務(wù)。如果有多個任務(wù)，就必須排隊，前面一個任務(wù)完成，再執(zhí)行后面一個任務(wù)，以此類推。

單線程

什么是單線程？

Javascript語言的執(zhí)行環(huán)境是"單線程"（single thread）

所謂"單線程"，就是指一次只能完成一件任務(wù)。
如果有多個任務(wù)，就必須排隊，前面一個任務(wù)完成，再執(zhí)行后面一個任務(wù)，以此類推。

執(zhí)行JS代碼的是JS引擎（JS引擎就是單線程，所以叫JS引擎線程）

單線程的好處與產(chǎn)生的問題

好處：
實現(xiàn)起來比較簡單，執(zhí)行環(huán)境相對單純

產(chǎn)生問題：
只要有一個任務(wù)耗時很長，后面的任務(wù)都必須排隊等著，會拖延整個程序的執(zhí)行。

常見的瀏覽器無響應(yīng)（假死），往往就是因為某一段Javascript代碼長時間運行（比如死循環(huán)），
導(dǎo)致整個頁面卡在這個地方，其他任務(wù)無法執(zhí)行。

單線程解決方案

為了單線程（JS引擎線程）不卡死，所以出現(xiàn)“異步 ”這個解決方案

異步

前端中有哪些操作屬于異步操作？

1、定時器
2、ajax請求
3、io操作

共性：一些耗時操作一般使用異步

注意：事件綁定不屬于異步操作，只是采用了異步編程處理方式（回調(diào)函數(shù)）而已

異步編程處理方式

1、回調(diào)函數(shù)
2、Promise
3、await/async  （最好解決方案）

回調(diào)函數(shù)

最早出現(xiàn)的處理異步編程的方式（兼容性最好，但不推薦）回調(diào)函數(shù)方式最大的問題是：回調(diào)地獄
回調(diào)地獄是代碼閱讀性差，項目維護性差

setTimeout(function (name) {
  var catList = name + ",";

  setTimeout(function (name) {
    catList += name + ",";

    setTimeout(function (name) {
      catList += name + ",";
      
    }, 1, "Lynx");
    
  }, 1, "Jaguar");

}, 1, "Panther");

如果當(dāng)前網(wǎng)絡(luò)請求需要依賴前一個網(wǎng)絡(luò)請求，以此類推，這就叫回調(diào)地獄

Promise

ES6出現(xiàn)的處理異步編程的方式，主要是為了解決回調(diào)地獄問題

三種狀態(tài)

1、pending：初始狀態(tài)，后面then（）的傳參函數(shù)不會執(zhí)行
2、resolved：成功狀態(tài)
3、rejected：失敗狀態(tài)

基本用法

通過Promise構(gòu)建函數(shù)，創(chuàng)建一個處理異步任務(wù)的對象

箭頭函數(shù)方式：
const p = new Promise((resolve, reject)=>{ });

傳統(tǒng)方式
const p = new Promise(function(resolve, reject){})

注意：
1、傳參函數(shù)的函數(shù)體會馬上執(zhí)行，而且是同步的
2、傳參函數(shù)的內(nèi)部沒有調(diào)用resolve()或reject()方法，那么Promise對象的狀態(tài)依舊是pending，后面then()不會執(zhí)
3、傳參函數(shù)的函數(shù)體內(nèi)，主要放的是異步操作代碼
4、傳參函數(shù)的函數(shù)體內(nèi)，調(diào)用resolve()時，Promise實例的狀態(tài)將由pending轉(zhuǎn)resolved
5、傳參函數(shù)的函數(shù)體內(nèi)，調(diào)用reject()時，Promise實例的狀態(tài)將由pending轉(zhuǎn)rejected
6、resolve()或者reject()，只能傳一個參數(shù)

實例方法 then

用法：
const p = new Promise((resolve, reject)=>{ });
p.then(data=>{ }).then(data=>{ })

then函數(shù)的返回值：
是一個全新的Promise對象，與調(diào)用then()的Promise對象不同

1、p為resolved狀態(tài)下，then傳遞的函數(shù)中，如果沒有返回值：
const pp = p.then(data=>{
    console.log("go");
});

那么pp的狀態(tài)繼承p是resolved，而攜帶的參數(shù)為undefined

2、p為resolved狀態(tài)下，then傳遞的函數(shù)中，如果有返回值是非Promise對象：
const pp = p.then(data=>{
    return "你好";
});

那么pp的狀態(tài)繼承p是resolved，而攜帶的參數(shù)為"你好"

3、p為resolved狀態(tài)下，then傳遞的函數(shù)中，如果有返回值是Promise對象：
const pp = p.then(data=>{
    return new Promise((resolve, reject)=>{
        reject();
    });
});

那么pp的狀態(tài)是rejected(狀態(tài)可以修改)，而攜帶的參數(shù)為undefined

4、p為rejected狀態(tài)下，then傳遞的函數(shù)中沒有傳遞第二個函數(shù)時：
const pp = p.then(data=>{ });

那么pp的狀態(tài)繼承p是rejected，而攜帶的參數(shù)也繼承p

注意：
1、如果調(diào)用resolve()或者reject()方法時，沒有傳一個參數(shù)，那么then()中傳的函數(shù)就沒有接收參數(shù)，data為undefined
2、只要Promise狀態(tài)不是pending，那么then中傳的函數(shù)就會執(zhí)行，一般只傳一個函數(shù)作為參數(shù)
3、調(diào)用then()時，只要不傳函數(shù)作為參數(shù)，那么生成的新Promise對象，狀態(tài)繼承，參數(shù)也繼承

實例方法 catch

主要用于處理 rejected失敗狀態(tài) 的

.catch(error=>{ })只是一個then的別名

等同于
then(null, error=>{ }) 或 then(undefined, error=>{ })

catch的返回值：
也是一個全新的Promise對象，該對象的狀態(tài)和攜帶參數(shù) 與 then四種情況一樣

當(dāng)沒有返回值時，狀態(tài)繼承是rejected，而攜帶的參數(shù)為undefined

靜態(tài)方法 all

多個Promise對象并行執(zhí)行，最后所有的Promise對象執(zhí)行完成后，再執(zhí)行最后的Promise對象

靜態(tài)方法 race

await/async

ES7出現(xiàn)的處理異步編程的方式（強烈推薦）

JS異步實現(xiàn)原理

瀏覽器中的JS引擎是單線程的（解析JS是單線程的），但瀏覽器是多進程的

任務(wù)類別

GPU云服務(wù)器云服務(wù)器異步調(diào)用線程 java線程異步調(diào)用異步調(diào)用和多線程 java線程池原理

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98403.html

發(fā)表評論

登陸后可評論

0條評論

NoraXie

男|高級講師

我要關(guān)注我要私信

TA的文章

博鰲云：馬來西亞vps服務(wù)器,1核1G10M帶寬,cn2+bgp線路,僅100元/月起

閱讀 1465·2021-09-10 11:27
CSS半透明效果的屬性和場景

閱讀 2414·2019-08-30 15:53
基于狀態(tài)機模型的斗地主游戲（NodeJs&SocketIO）

閱讀 1333·2019-08-30 13:10
過渡和動畫

閱讀 2981·2019-08-30 11:09
input實現(xiàn)文字超出省略號功能

閱讀 1092·2019-08-29 17:23
偶然發(fā)現(xiàn)了另一種跨域方式，不知道有沒有人這么玩過

閱讀 672·2019-08-29 17:05
css基礎(chǔ)多欄布局

閱讀 2951·2019-08-29 15:10
css系列之line-height 與 vertical-align

閱讀 2349·2019-08-29 13:22

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端原理_異步與單線程

相關(guān)文章

Javag工程師成神之路（2019正式版）

入門架構(gòu)——單機高性能

你和阿里資深架構(gòu)師之間，差的不僅僅是年齡（進階必看）

前端面試題大集合：來自真實大廠的532道面試題(只有題，沒有答案)

前端面試題大集合：來自真實大廠的532道面試題(只有題，沒有答案)

發(fā)表評論

0條評論

NoraXie

男|高級講師

TA的文章

博鰲云：馬來西亞vps服務(wù)器,1核1G10M帶寬,cn2+bgp線路,僅100元/月起

CSS半透明效果的屬性和場景

基于狀態(tài)機模型的斗地主游戲（NodeJs&SocketIO）

過渡和動畫

input實現(xiàn)文字超出省略號功能

偶然發(fā)現(xiàn)了另一種跨域方式，不知道有沒有人這么玩過

css基礎(chǔ)多欄布局

css系列之line-height 與 vertical-align

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端原理_異步與單線程

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！