日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
總結(jié)異步編程的六種方式

異步編程

眾所周知 JavaScript 是單線程工作，也就是只有一個(gè)腳本執(zhí)行完成后才能執(zhí)行下一個(gè)腳本，兩個(gè)腳本不能同時(shí)執(zhí)行，如果某個(gè)腳本耗時(shí)很長(zhǎng)，后面的腳本都必須排隊(duì)等著，會(huì)拖延整個(gè)程序的執(zhí)行。那么如何讓程序像人類一樣可以多線程工作呢？以下為幾種異步編程方式的總結(jié)，希望與君共勉。

  •  回調(diào)函數(shù)
  •  事件監(jiān)聽(tīng)
  •  發(fā)布訂閱模式
  •  Promise
  •  Generator (ES6)
  •  async (ES7)

異步編程傳統(tǒng)的解決方案：回調(diào)函數(shù)和事件監(jiān)聽(tīng)

初始示例：假設(shè)有兩個(gè)函數(shù), f1 和 f2，f1 是一個(gè)需要一定時(shí)間的函數(shù)。

 
 
 
 
      
  
  
  
  1. function f1() {  
    2.   
  
  
  
  2.     setTimeout(function(){  
    3.   
  
  
  
  3.         console.log('先執(zhí)行 f1')  
    4.   
  
  
  
  4.     },1000)  
    5.   
  
  
  
  5. }  
    6.   
  
  
  
  6. function f2() {  
    7.   
  
  
  
  7.     console.log('再執(zhí)行 f2')  
    8.   
  
  
  
  8. } 
    9.

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

因?yàn)?f1 是一個(gè)需要一定時(shí)間的函數(shù)，所以可以將 f2 寫成 f1 的回調(diào)函數(shù)，將同步操作變成異步操作，f1 不會(huì)阻塞程序的運(yùn)行，f2 也無(wú)需空空等待，例如 JQuery 的 ajax。

回調(diào)函數(shù)的demo：

 
 
 
 
      
  
  
  
  1. function f1(f2){  
    2.   
  
  
  
  2.     setTimeout(function(){  
    3.   
  
  
  
  3.         console.log('先執(zhí)行 f1')  
    4.   
  
  
  
  4.     },1000)  
    5.   
  
  
  
  5.     f2()  
    6.   
  
  
  
  6. }  
    7.   
  
  
  
  7. function f2() {  
    8.   
  
  
  
  8.     console.log('再執(zhí)行 f2')  
    9.   
  
  
  
  9. } 
    10.

效果如下：

總結(jié)：回調(diào)函數(shù)易于實(shí)現(xiàn)、便于理解，但是多次回調(diào)會(huì)導(dǎo)致代碼高度耦合

事件監(jiān)聽(tīng)

腳本的執(zhí)行不取決代碼的順序，而取決于某一個(gè)事件是否發(fā)生。

事件監(jiān)聽(tīng)的demo

 
 
 
 
      
  
  
  
  1. $(document).ready(function(){  
    2.   
  
  
  
  2.      console.log('DOM 已經(jīng) ready')  
    3.   
  
  
  
  3. }); 
    4.

發(fā)布訂閱模式

發(fā)布/訂閱模式是利用一個(gè)消息中心，發(fā)布者發(fā)布一個(gè)消息給消息中心，訂閱者從消息中心訂閱該消息，。類似于 vue 的父子組件之間的傳值。

發(fā)布訂閱模式的 demo

 
 
 
 
      
  
  
  
  1. //訂閱done事件  
    2.   
  
  
  
  2. $('#app').on('done',function(data){  
    3.   
  
  
  
  3.     console.log(data)  
    4.   
  
  
  
  4. })  
    5.   
  
  
  
  5. //發(fā)布事件  
    6.   
  
  
  
  6. $('#app').trigger('done,'haha') 
    7.

Promise

Promise 實(shí)際就是一個(gè)對(duì)象， 從它可以獲得異步操作的消息，Promise 對(duì)象有三種狀態(tài)，pending(進(jìn)行中)、fulfilled（已成功）和rejected（已失?。romise 的狀態(tài)一旦改變之后，就不會(huì)在發(fā)生任何變化,將回調(diào)函數(shù)變成了鏈?zhǔn)秸{(diào)用。

Promise 封裝異步請(qǐng)求demo

 
 
 
 
      
  
  
  
  1. export default function getMethods (url){  
    2.   
  
  
  
  2.     return new Promise(function(resolve, reject){  
    3.   
  
  
  
  3.         axios.get(url).then(res => {  
    4.   
  
  
  
  4.             resolve(res)  
    5.   
  
  
  
  5.         }).catch(err =>{  
    6.   
  
  
  
  6.             reject(err)  
    7.   
  
  
  
  7.         })  
    8.   
  
  
  
  8.     })  
    9.   
  
  
  
  9. }  
    10.   
  
  
  
  10. getMethods('/api/xxx').then(res => {  
    11.   
  
  
  
  11.     console.log(res)  
    12.   
  
  
  
  12. }, err => {  
    13.   
  
  
  
  13.     console.log(err)  
    14.   
  
  
  
  14. }) 
    15.

Generator

Generator 函數(shù)是一個(gè)狀態(tài)機(jī)，封裝了多個(gè)內(nèi)部狀態(tài)。執(zhí)行 Generator 函數(shù)會(huì)返回一個(gè)遍歷器對(duì)象，使用該對(duì)象的 next() 方法，可以遍歷 Generator 函數(shù)內(nèi)部的每一個(gè)狀態(tài)，直到 return 語(yǔ)句。

形式上，Generator 函數(shù)是一個(gè)普通函數(shù)，但是有兩個(gè)特征。一是，function關(guān)鍵字與函數(shù)名之間有一個(gè)星號(hào)；二是，函數(shù)體內(nèi)部使用yield表達(dá)式， yield是暫停執(zhí)行的標(biāo)記。

next() 方法遇到y(tǒng)ield表達(dá)式，就暫停執(zhí)行后面的操作，并將緊跟在yield后面的那個(gè)表達(dá)式的值，作為返回的對(duì)象的value屬性值。

Generator 的 demo

 
 
 
 
      
  
  
  
  1. function *generatorDemo() {  
    2.   
  
  
  
  2.   yield 'hello';  
    3.   
  
  
  
  3.   yield  1 + 2;  
    4.   
  
  
  
  4.   return 'ok';  
    5.   
  
  
  
  5. }  
    6.   
  
  
  
  6. var demo = generatorDemo()  
    7.   
  
  
  
  7. demo.next()   // { value: 'hello', done: false }   
    8.   
  
  
  
  8. demo.next()   // { value: 3, done: false }   
    9.   
  
  
  
  9. demo.next()   // { value: 'ok', done: ture }   
    10.   
  
  
  
  10. demo.next()   // { value: undefined, done: ture }  
    11.

async

async函數(shù)返回的是一個(gè) Promise 對(duì)象，可以使用 then 方法添加回調(diào)函數(shù)，async 函數(shù)內(nèi)部 return 語(yǔ)句返回的值，會(huì)成為 then 方法回調(diào)函數(shù)的參數(shù)。當(dāng)函數(shù)執(zhí)行的時(shí)候，一旦遇到await就會(huì)先返回，等到異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語(yǔ)句。

1.await命令后面返回的是 Promise 對(duì)象，運(yùn)行結(jié)果可能是rejected，所以***把a(bǔ)wait命令放在try...catch代碼塊中。

async 的 demo1

 
 
 
 
      
  
  
  
  1. async function demo() {  
    2.   
  
  
  
  2.   try {  
    3.   
  
  
  
  3.     await new Promise(function (resolve, reject) {  
    4.   
  
  
  
  4.       // something  
    5.   
  
  
  
  5.     });  
    6.   
  
  
  
  6.   } catch (err) { 
    7.   
  
  
  
  7.     console.log(err);  
    8.   
  
  
  
  8.   }  
    9.   
  
  
  
  9. }  
    10.   
  
  
  
  10. demo().then(data => {  
    11.   
  
  
  
  11.     console.log(data)  //   
    12.   
  
  
  
  12. }) 
    13.

網(wǎng)站名稱：總結(jié)異步編程的六種方式
分享URL：http://www.5511xx.com/article/djiihgs.html