À propos de l'encapsulation secondaire ajax jquery

Tout le monde sait que l'encapsulation secondaire de jquery, le nom complet d'Ajax est JavaScript et XML asynchrones, javaScript et XML asynchrones, l'article suivant vous présente principalement des exemples d'encapsulation secondaire de jquery ajax, l'article le présente beaucoup à travers des exemples code Pour plus de détails, les amis qui en ont besoin peuvent jeter un œil ci-dessous. J'espère que cela pourra aider tout le monde.

Techniques impliquées dans AJax :

1. Utilisez CSS et XHTML pour le représenter.

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 basée sur XMLHttpReaquest pour la communication. 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 des projets, il présente encore quelques problèmes

Ce sont les données renvoyées par ajax en gros tous les projets maintenant. Il a également été encapsulé deux fois et ajouté des informations sur la logique métier du traitement en arrière-plan.

À partir du retour des données, cela devient｛code : 200, data:{}, err_msg:''｝

Si chaque requête ajax revient, il faut juger si le code est correct. L'ensemble du projet est trop redondant pour le traitement de la logique métier ou le rapport d'erreurs

$.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 à nouveau $.ajax, puis déterminer si c'est le cas. corrects ou non. La logique métier ou les rappels d’erreurs sont extraits et transformés en parties publiques.

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

L'utilisation de util.ajax au lieu de $.ajax peut réduire les erreurs commerciales. 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 courante, mais nous devons parfois gérer 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 :

Méthode minimaliste pour compléter l'encapsulation et l'héritage JavaScript

Simulation JavaScript trois façons de réaliser l'encapsulation Et le introduction de la différence

Un exemple d'encapsulation d'un seul fichier et de son téléchargement dans la base de données en php

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!