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(){},
.......
})Pain Points
Aber wenn in einem Projekt verwendet wird, gibt es immer noch einige Pain Points $.ajax
｛code: 200, data:{}, err_msg:''｝
$.ajax({
url: url,
data: data,
success: function(data){
if(data.code == 200) {
dosomething()
} else {
alert(data.err_msg);
}
}
}) 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!
