Javascript 非同期プログラミング手法の概要

JavaScript 開発のプロセスでは、フロントエンドの Ajax リクエストであれ、ノードのさまざまな非同期 API であれ、必然的にいくつかの非同期プログラミングのシナリオに遭遇します。以下は、作業中に JavaScript で一般的な非同期プログラミングの概要です。メソッドの使い方まとめ

JavaScriptの非同期プログラミングにはいくつかのメソッドがあります

現在仕事でよく使われる非同期モードプログラミングには以下のメソッドがあります

コールバック関数は1つです

これは非同期プログラミングの最も基本的なメソッドです2 つの関数があると仮定します f1 と f2 の 2 つがあり、後者は前者の実行結果を待ちます

f1();f2();
如果f1是一个很耗时的任务，可以考虑改写f1，把f2写成f1的回调函数
function f1(callback){   setTimeout(function(){       
// f1的任务代码             
//执行回调函数      callback()    },1000)}执行代码就变成下面这样：

f1(f2);//Call

このようにして、同期操作を非同期操作に変換します。操作、f1 はプログラムの実行をブロックしません。プログラムのメインロジックを最初に実行し、時間のかかる操作の実行を延期します

具体例:

ajax リクエストは非同期であるため、場合によっては、後でデータを取得する必要がある現時点では、コールバック関数がこの問題を解決するのに役立ちます。具体的なコードは次のとおりです。

import $ from 'jquery'function getData(callback){  var url="http://xxx.com/activity/v1/homepage/index";  var data={      "cityId":110100,      "type":"coupon"
  }
  $.ajax({
       url:url,
       type:'get',
       dataType:'jsonp',
       jsonp:'callback',
       data:data,
       success:function(resp){        if(resp.status==200 && resp.data){            var item = resp.data[0] && resp.data[0].coupon;            if(callback){
                callback(item) //执行回调函数            }
        }
       },
       error:function(err){
            console.log("error")
       }
  })
}function getItem(data){    if(data){        //得到数据进行处理
        var url = data.moreUrl;
        alert(url)
    }
}
 getData(getItem) //调用二 发布／订阅 模式

特定のタスクが完了したときに、シグナルはシグナル センターに「発行」され、他のタスクはシグナル センターに「発行」されて、いつ実行を開始できるかを知ることができます。これは「パブリッシュ/サブスクライブ パターン」(パブリッシュ/サブスクライブ パターン) と呼ばれ、「オブザーバー パターン」(オブザーバー パターン) とも呼ばれます。

このパターンの実装は多数あります。以下に示すのは、jQuery のプラグインである Ben Alman の Tiny Pub/Sub です。

function PubSub(){  this.handlers = {};
}
PubSub.prototype = {
  on:function(eventType,handler){    var self = this;    if(!(eventType in self.handlers)){
        self.handlers[eventType] = [];
    }
     self.handlers[eventType].push(handler);      return this;
  },
  trigger:function(eventType){    var self = this;    var handlerArgs = Array.prototype.slice.call(arguments,1);    for(var i=0;i<self.handlers[eventType].length;i++){
      self.handlers[eventType][i].apply(self,handlerArgs)
    }    return self;
  }
}

特定の呼び出し:

var pubsub=new PubSub();function getData(){  var url="xxx.com/activity/v1/homepage/index";  
var data={      "cityId":110100,      "type":"coupon"
  }
  $.ajax({
       url:url,
       type:'get',
       dataType:'jsonp',
       jsonp:'callback',
       data:data,
       success:function(resp){        if(resp.status==200 && resp.data){            
       var item = resp.data[0] && resp.data[0].coupon;
            pubsub.trigger('done',item) //发布事件        }
       },
       error:function(err){
            console.log("error")
       }
  })
}//订阅事件pubsub.on('done',function(data){
  getItem(data)
})function getItem(data){
  alert('start')
  console.log('data='+data)    if(data){        //得到数据进行处理
        var url = data.moreUrl;
        alert(url)
    }
}
 getData() //调用

3 つの Promise オブジェクト

Promise オブジェクトは、非同期プログラミングの統一インターフェイスを提供するために CommonJS ワーキング グループによって提案された仕様です

es7 によって提供される async および await と組み合わせて使用​​され、コードは次のようになります以下の通り:

そうです

以上がJavascript 非同期プログラミング手法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。