Einführung in die asynchronen Programmiermethoden von Javascript

Im Prozess der JavaScript-Entwicklung werden wir unweigerlich auf einige asynchrone Programmierszenarien stoßen, sei es die Front-End-Ajax-Anfrage oder die verschiedenen asynchronen APIs des Knotens. Das Folgende ist eine Zusammenfassung der asynchronen JavaScript-Programmierung während der Arbeit und des Studiums Prozess. Eine Zusammenfassung der Verwendung gängiger Methoden

Mehrere Methoden der asynchronen Programmierung in JavaScript

Zu den Programmiermethoden im asynchronen Modus, die derzeit häufig in der Arbeit verwendet werden, gehören die folgenden Methoden

Eine Rückruffunktion

Dies ist die grundlegendste Methode der asynchronen Programmierung. Angenommen, es gibt zwei Funktionen f1 und f2. Letztere wartet auf das Ausführungsergebnis der ersteren

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

f1(. f2);//Aufruf

Mit dieser Methode wandeln wir synchrone Operationen in asynchrone Operationen um. F1 blockiert nicht die Ausführung des Programms Verzögerung der Ausführung zeitaufwändiger Vorgänge

Spezifisches Beispiel:

Da Ajax-Anfragen asynchron sind, müssen wir manchmal die Daten nach der Ajax-Anfrage abrufen, bevor wir andere Vorgänge ausführen Die Rückruffunktion hilft uns, dieses Problem zu lösen:

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) //调用二 发布／订阅 模式

Wir gehen davon aus, dass es ein „Signalzentrum“ gibt, das ein Signal an das sendet Signalzentrum und andere Aufgaben können das Signalzentrum „abonnieren“, sodass Sie wissen, wann Sie mit der Ausführung beginnen können. Dies wird als „Publish-Subscribe-Muster“ (Publish-Subscribe-Muster) oder auch als „Observer-Muster“ (Observer-Muster) bezeichnet.

Es gibt viele Implementierungen dieses Musters. Die unten verwendete ist Ben Almans Tiny Pub/Sub, ein Plug-in für jQuery.

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;
  }
}

Spezifische Aufrufe:

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() //调用

Drei Promise-Objekte

Das Promise-Objekt ist eine von der CommonJS-Arbeitsgruppe vorgeschlagene Spezifikation, um eine einheitliche Schnittstelle für die asynchrone Programmierung bereitzustellen

In Kombination mit Async und Wait von es7 lautet der Code wie folgt:

import $ from 'jquery'function getData()
{  return new Promise((resolve,reject) => {     
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;               
resolve(item)            }         },         
error:function(err){           reject("error")         }      })  })}
function getItem(data){    if(data){        //得到数据进行处理        
var url = data.moreUrl;        alert(url)    }}
const testAsync = async () => {  var data = await getData();  getItem(data); }
//调用testAsync();

Das obige ist der detaillierte Inhalt vonEinführung in die asynchronen Programmiermethoden von Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!