So implementieren Sie die sekundäre Kapselung von Jquery Ajax

Dieses Mal zeige ich Ihnen, wie Sie die sekundäre Kapselung von Jquery Ajax implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung der sekundären Kapselung von JQuery Ajax? Hier sind praktische Fälle.

Vorwort

Der vollständige Name von Ajax ist Asynchronous JavaScript and XML Asynchronous javaScript and XML

In AJax involvierte Technologien:

1. Verwenden Sie CSS und XHTML zur Darstellung.

2. Verwenden Sie das DOM-Modell für Interaktion und dynamische Anzeige.

3. Verwenden Sie XMLHttpRequest, um asynchron mit dem Server zu kommunizieren. (Kern)

4.Verwenden Sie Javascript zum Binden und Aufrufen.

Wenn unser Front-End Daten verarbeitet, ist es unvermeidlich, mit Ajax zu kommunizieren, und der Hintergrund kommuniziert mit dem Server über das XMLHttpRequest-Objekt. Die $.ajax-Methode Sehr praktisch und sehr einfach anzuwenden. Diese zweite Kapselung von Abfrage-Ajax, siehe Express, kann $.ajaxMiddleware hinzufügen, um Daten zu verarbeiten, Promise-Objekte (Defferd) zurückzugeben, Rückrufe zu reduzieren und Ajax prägnanter und eleganter zu schreiben.

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

Meistens müssen wir nur die URL und die Daten übergeben, um die gewünschten Daten zu erhalten.

Pain Points

Aber wenn

in einem Projekt verwendet wird, gibt es immer noch einige Pain Points $.ajax

Das ist im Grunde genommen so alles was es jetzt ist Die vom Ajax des Projekts zurückgegebenen Daten werden ebenfalls zweimal gekapselt und die Informationen der Geschäftslogik für die Hintergrundverarbeitung werden hinzugefügt.

hat sich von der Rückgabe von Daten zu

｛code: 200, data:{}, err_msg:''｝

geändert. Wenn jede Ajax-Anfrage zurückkommt, um festzustellen, ob der Code korrekt ist, und dann eine Geschäftslogikverarbeitung oder eine Fehlererinnerung durchzuführen, wird dies auch für das gesamte Projekt der Fall sein überflüssig.

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

Um dieses Problem zu lösen, verwenden wir eine Funktion, um

erneut zu kapseln und die Geschäftslogik oder Fehlererinnerung zu extrahieren, um festzustellen, ob sie korrekt ist oder nicht, und sie öffentlich zu machen Teil. $.ajax

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)
 }
 })
}

Versprechen

Verwenden Sie

anstelle von util.ajax, um geschäftliche Fehleinschätzungen zu reduzieren. Lassen Sie es uns noch einmal verbessern. Anstatt Rückrufe zu verwenden, verwenden Sie Versprechen zum Aufrufen, um Rückrufe zu reduzieren und den Code klarer zu machen. $.ajax

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

Dies ist eine gängige Methode, aber manchmal müssen wir uns mit Differenzierung befassen, wir beziehen uns auf die Express-Einführung Eine Middleware um das Differenzierungsproblem zu lösen.

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)
 })

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP chinesische Website!

Empfohlene Lektüre:

Ajax-Methode zur Implementierung der Formularübermittlung

Wie jQuery die Parameter von Ajax-Übermittlungsformularen überprüft

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die sekundäre Kapselung von Jquery Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!