Beispiele für die sekundäre Kapselung der JQuery-Ajax-Methode (grafisches Tutorial)

Der vollständige Name von Ajax ist Asynchronous JavaScript and XML. Der Artikel führt Sie im Detail durch Beispielcode ein sehen.

Vorwort

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

AJax beinhaltet Erhaltene Technologie:

1. Verwenden Sie CSS und XHTML zum Ausdrucken.

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 dem Backend über das XMLHttpRequest-Objekt zu kommunizieren. Ajax kapselt die $.ajax-Methode für die Kommunikation basierend auf dem XMLHttpRequest-Objekt. Die $.ajax-Methode Sehr praktisch und sehr einfach anzuwenden. Diese zweite Kapselung von Abfrage-Ajax bezieht sich auf Express, um Middleware zum Verarbeiten von Daten hinzuzufügen, Promise-Objekte (Defferd) zurückzugeben, Rückrufe zu reduzieren und Ajax präziser 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 $.ajax in einem Projekt verwendet wird, gibt es immer noch einige Pain Points

Das ist im Grunde 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 $.ajax erneut zu kapseln und die Geschäftslogik oder Fehlererinnerung zu extrahieren, um zu beurteilen, ob sie korrekt ist oder nicht, und machen sie zu einem öffentlichen Teil .

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 util.ajax anstelle von $.ajax, um Geschäftsfehler 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.

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 Express, um eine Middleware-Software einzuführen 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 habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

ajaxPerfekte Lösung für domänenübergreifende Probleme

Detaillierte Analyse der Verwendung von Ajax in JS-Tipps

JQuery ruft Ajax auf, um Bilder zu laden

Das obige ist der detaillierte Inhalt vonBeispiele für die sekundäre Kapselung der JQuery-Ajax-Methode (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!