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

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

新聞中心

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

異步編程

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

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

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

初始示例：假設(shè)有兩個函數(shù), f1 和 f2，f1 是一個需要一定時間的函數(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ù)

因為 f1 是一個需要一定時間的函數(shù)，所以可以將 f2 寫成 f1 的回調(diào)函數(shù)，將同步操作變成異步操作，f1 不會阻塞程序的運行，f2 也無需空空等待，例如 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ù)易于實現(xiàn)、便于理解，但是多次回調(diào)會導致代碼高度耦合

事件監(jiān)聽

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

事件監(jiān)聽的demo

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

發(fā)布訂閱模式

發(fā)布/訂閱模式是利用一個消息中心，發(fā)布者發(fā)布一個消息給消息中心，訂閱者從消息中心訂閱該消息，。類似于 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 實際就是一個對象， 從它可以獲得異步操作的消息，Promise 對象有三種狀態(tài)，pending(進行中)、fulfilled（已成功）和rejected（已失?。?。Promise 的狀態(tài)一旦改變之后，就不會在發(fā)生任何變化,將回調(diào)函數(shù)變成了鏈式調(diào)用。

Promise 封裝異步請求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ù)是一個狀態(tài)機，封裝了多個內(nèi)部狀態(tài)。執(zhí)行 Generator 函數(shù)會返回一個遍歷器對象，使用該對象的 next() 方法，可以遍歷 Generator 函數(shù)內(nèi)部的每一個狀態(tài)，直到 return 語句。

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

next() 方法遇到y(tǒng)ield表達式，就暫停執(zhí)行后面的操作，并將緊跟在yield后面的那個表達式的值，作為返回的對象的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ù)返回的是一個 Promise 對象，可以使用 then 方法添加回調(diào)函數(shù)，async 函數(shù)內(nèi)部 return 語句返回的值，會成為 then 方法回調(diào)函數(shù)的參數(shù)。當函數(shù)執(zhí)行的時候，一旦遇到await就會先返回，等到異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語句。

1.await命令后面返回的是 Promise 對象，運行結(jié)果可能是rejected，所以***把await命令放在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.

本文標題：總結(jié)異步編程的六種方式
當前URL：http://m.5511xx.com/article/djiihgs.html