Comment implémenter l'encapsulation secondaire de jquery ajax

Cette fois, je vais vous montrer comment implémenter l'encapsulation secondaire de jquery ajax. Quelles sont les précautions pour implémenter l'encapsulation secondaire de jquery ajax. Voici des cas pratiques, jetons un coup d'œil.

Avant-propos

Le nom complet d'Ajax est Asynchrone JavaScript et XML Asynchrone javaScript et XML

Technologies impliquées dans AJax :

1. Utilisez CSS et XHTML pour exprimer.

2. Utilisez le modèle DOM pour l'interaction et l'affichage dynamique.

3. Utilisez XMLHttpRequest pour communiquer de manière asynchrone avec le serveur. (Core)

4.Utilisez javascript pour vous lier et appeler.

Lorsque notre front-end traite des données, il est inévitable de communiquer avec le backend via ajax. Ajax communique avec le serveur via l'objet XMLHttpRequest encapsule la méthode $.ajax de communication basée sur l'objet XMLHttpRequest. La méthode $.ajax Très pratique et très simple à utiliser. Cette deuxième encapsulation de requête ajax, fait référence à express pour ajouter un middleware pour traiter les données, renvoyer les objets Promise (Defferd), réduire les rappels et écrire ajax de manière plus concise et élégante.

$.ajax({
 url: url,
 data: data,
 dataType: 'json',
 type: 'get',
 success: new Function(){},
 error: new Function(){},
 .......
})

La plupart du temps, il suffit de transmettre l'URL et les données pour obtenir les données souhaitées.

Points douloureux

Mais lors de l'utilisation de $.ajax dans le projet, il y a encore quelques points douloureux

C'est essentiellement tout est maintenant Les données renvoyées par l'ajax du projet sont également encapsulées deux fois et les informations en arrière-plan lors du traitement de la logique métier sont ajoutées.

est passé du renvoi de données à ｛code: 200, data:{}, err_msg:''｝

Si chaque requête ajax revient pour déterminer si le code est correct, puis effectue un traitement de logique métier ou un rappel d'erreur, l'ensemble du projet le sera également redondant.

$.ajax({
 url: url,
 data: data,
 success: function(data){
 if(data.code == 200) {
  dosomething()
 } else {
 alert(data.err_msg);
 }
 }
})

Afin de résoudre ce problème, nous utilisons une fonction pour encapsuler $.ajax à nouveau, et extrayons la logique métier ou le rappel d'erreur pour déterminer s'il est correct ou non et le rendre public. partie.

util.ajax = function(obj, successFn){
 $.ajax({
 url: obj.url || '/interface',
 data: obj.data || {},
 dataType: obj.dataType || 'json',
 type: obj.type || 'get',
 success: function(data){
  if (data.code != 200) {
  alert(data.err_msg);
  } else {
  successFn(data.data)
  }
 },
 error: function(err){
  alert(err)
 }
 })
}

promesse

Utilisez util.ajax au lieu de $.ajax pour réduire les erreurs de jugement des entreprises. Améliorons-le encore, au lieu d'utiliser des rappels, utilisons des promesses d'appel, réduisant ainsi les rappels et rendant le code plus clair.

util.ajax = function(obj) {
 var deferred = $.Deferred();
 $.ajax({
  url: obj.url || '/interface',
  data: obj.data || {},
  dataType: obj.dataType || 'json',
  type: obj.type || 'get',
 }).success(function (data) {
  if (data.code != 200) {
   deferred.reject(data.err_msg);
  } else {
   deferred.resolve(data.data)
  }
 }).error(function (err) {
  deferred.reject('接口出错，请重试');
 })
 return deferred.fail(function (err) {
  alert(err)
 });
}
// 调用
var obj = {
 url: '/interface',
 data: {
  interface_name: 'name',
  interface_params: JSON.stringify({})
 }
};
util.ajax(obj)
 .done(function(data){
  dosomething(data)
 })

Middleware

C'est une méthode courante, mais parfois nous devons faire face à la différenciation, nous nous référons à l'introduction expresse Un middleware pour résoudre le problème de différenciation.

util.ajax = function(obj, middleware) {
 var deferred = $.Deferred();
 $.ajax({
  url: obj.url || '/interface',
  data: obj.data || {},
  dataType: obj.dataType || 'json',
  type: obj.type || 'get',
 }).success(function (data) {
  if (data.code != 200) {
   deferred.reject(data.err_msg);
  } else {
   deferred.resolve(data.data)
  }
 }).error(function (err) {
  deferred.reject('接口出错，请重试');
 })
 // 添加中间件
 if(!middleware) {
  middleware = function(){};
 }
 return deferred.done(middleware).fail(function (err) {
  message({
   content: err,
   type: 'error',
   showLeftIcon: true,
   duration: 5000
  });
 });
}
// 调用
// 调用
var obj = {
 url: '/interface',
 data: {
  interface_name: 'name',
  interface_params: JSON.stringify({})
 }
};
var middleware = function(data) {
 data.forEach(function(item){
  item.fullName = item.firstName + item.lastName
 })
}
util.ajax(obj, middleware)
 .done(function(data){
  console.log(data.fullName)
 })

Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le sujet. Site Web chinois PHP !

Lecture recommandée :

Méthode Ajax pour implémenter la soumission du formulaire de formulaire

Comment jQuery vérifie les paramètres du formulaire de soumission Ajax

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!