Exemples de méthode jquery ajax d'encapsulation secondaire (tutoriel graphique)

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. L'article le présente en détail à travers un exemple de code. Les amis qui en ont besoin peuvent le suivre. regarder.

Avant-propos

Le nom complet d'Ajax est JavaScript asynchrone et XML JavaScript asynchrone et XML

AJax implique Technologie obtenue :

1. Utiliser 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 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)
 })

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

ajaxSolution parfaite aux problèmes inter-domaines

Analyse détaillée de l'utilisation de Conseils Ajax dans JS

JQuery appelle Ajax pour charger des images

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!