Explication détaillée de l'utilisation d'ajax pour encapsuler deux fois les instances jquery

Cet article vous présente principalement l'utilisation d'ajax pour ré-encapsuler les instances jquery. Le nom complet d'Ajax est Asynchronous JavaScript and XML. L'article suivant vous présente principalement des exemples d'encapsulation secondaire de jquery ajax. un exemple de code est présenté de manière très détaillée. Les amis qui en ont besoin peuvent y jeter un œil ci-dessous.

Avant-propos

Le nom complet d'Ajax est JavaScript asynchrone et XML JavaScript asynchrone 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 des 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 un projet, il présente encore quelques points faibles

Les données renvoyées par ajax pour pratiquement tous les projets sont désormais également encapsulées deux fois et les informations de la logique métier du traitement en arrière-plan sont ajoutées.

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

Si chaque requête ajax revient, il est nécessaire de juger si le code est correct, puis d'effectuer un traitement de logique métier ou un rappel d'erreur . L'ensemble du projet sera également C'est trop 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, puis traiter le la logique métier après avoir jugé si elle est correcte ou non. Le rappel d'erreur est extrait et transformé en partie publique.

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 Ceci peut 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

Il s'agit d'une méthode publique, mais il y a parfois nous devons traiter de la différenciation. Nous nous référons à express pour introduire 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)
 })

Recommandations associées :

Encapsulation secondaire du composant proxy de cache ajax et ajax de jquery : explication détaillée d'AjaxCache_jquery

Introduction à trois méthodes de simulation JavaScript pour réaliser l'encapsulation et leurs différences

Une façon d'écrire un framework de mouvement d'encapsulation JS

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!