Introduction aux méthodes de programmation asynchrone Javascript

Dans le processus de développement JavaScript, nous rencontrerons inévitablement des scénarios de programmation asynchrone, qu'il s'agisse de la requête Ajax frontale ou des différentes API asynchrones du nœud. Voici un résumé de la programmation asynchrone JavaScript pendant le travail et l'étude. processus. Un résumé de l'utilisation des méthodes courantes

Plusieurs méthodes de programmation asynchrone en JavaScript

Les méthodes de programmation en mode asynchrone couramment utilisées dans le travail incluent actuellement les méthodes suivantes

Une fonction de rappel

C'est la méthode la plus basique de programmation asynchrone Supposons qu'il y ait deux fonctions f1 et f2, cette dernière attend le résultat de l'exécution de la première

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

f1(. f2);//Call

En utilisant cette méthode, nous transformons les opérations synchrones en opérations asynchrones. F1 ne bloquera pas l'exécution du programme. Cela équivaut à exécuter d'abord la logique principale du programme et. retarder l'exécution d'opérations chronophages

Exemple spécifique :

Étant donné que les requêtes ajax sont asynchrones, nous devons parfois récupérer les données après la requête ajax avant d'effectuer d'autres opérations à ce moment-là. La fonction de rappel nous aidera à résoudre ce problème. Le code spécifique est le suivant :

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

Nous supposons qu'il existe un "centre de signal". Lorsqu'une tâche est terminée, elle "publie" un signal au le centre de signal et d'autres tâches peuvent « s'abonner » au signal du centre afin que vous sachiez quand vous pouvez commencer à exécuter. C'est ce qu'on appelle le « modèle de publication-abonnement » (modèle de publication-abonnement), également connu sous le nom de « modèle d'observateur » (modèle d'observateur).

Il existe de nombreuses implémentations de ce modèle. Celle utilisée ci-dessous est Tiny Pub/Sub de Ben Alman, qui est un plug-in pour 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;
  }
}

Appels spécifiques :

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

Trois objets Promise

L'objet Promise est une spécification proposée par le groupe de travail CommonJS pour fournir une interface unifiée pour la programmation asynchrone

Utilisé en combinaison avec async et wait fournis par es7, le code est le suivant :

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();

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!