Die letzten Artikel beziehen sich auf die Entwicklung von WeChat-Miniprogrammen, daher fragte jemand: „Ich verstehe Miniprogramme nicht. Können Sie etwas anderes schreiben?“Tatsächlich müssen Sie der Sache mit dem „kleinen Programm“ nicht allzu viel Aufmerksamkeit schenken, da „kleines Programm“ in dem Artikel nur ein Entwicklungsszenario ist. Die Probleme, die wir tatsächlich lösen, treten nicht nur in kleinen Programmen auf , und die Mittel zur Lösung des Problems sind vollständig Es hat nichts mit Miniprogrammen zu tun!
hinterlässt ein Problem beim asynchronen Aufruf des Proxy-Kapselungs-WeChat-Applets:
ist wie wx.request() Anleitung Diese Situation kapseln, in der es einen Rückgabewert gibt?
Wenn Sie die Anfrage während des Anfrageprozesses abbrechen müssen, wird der Rückgabewert von wx.request() verwendet:
const requestTask = wx.request(...);
if (...) {
// 因为某些原因需要取消这次请求
requestTask.abort();
}Das gekapselte awx.request() gibt ein Promise-Objekt zurück, gefolgt von wx.request() Der ursprüngliche Rückgabewert hat damit nichts zu tun. Wenn Sie die Anfrage abbrechen möchten, müssen Sie den ursprünglichen Rückgabewert von wx.request() angeben.
function wxPromisify(fn) {
return async function (args) {
return new Promise((resolve, reject) => {
const originalResult = fn({
// ^^^^^^^^^^^^^^^^^^^^^^^
// 怎么把 originalResult 带出去？
...(args || {}),
success: res => resolve(res),
fail: err => reject(err)
});
});
};
}Es ist nicht zu pingelig, hier sind mehrere Optionen:
{ promise, originalResult} oder [promise, originalResult] zurück. Geben Sie den Rückgabewert über einen „Container“-Parameter wie awx.request(params, outBox = {}) ; outBoxoutBox.originalResultJS ist ein dynamischer Typ und kann das Promise-Objekt direkt ändern und ihm Attribute hinzufügen: promise.originalResult = ... (oder await awx.request() ), daher ist die erste Methode nicht optional. awaitthen()Die zweite Methode ist machbar und kann direkt verwendet werden, wenn der ursprüngliche Rückgabewert nicht benötigt wird. Wenn Sie jedoch den ursprünglichen Rückgabewert benötigen, ist dies etwas mühsam. Sie müssen zuerst ein Containerobjekt generieren und es übergeben.
Die dritte Methode sollte am unkompliziertesten zu verwenden sein. In jedem Fall wird der ursprüngliche Wert mit dem Promise-Objekt zum Vorschein gebracht, ob Sie es verwenden oder nicht, Sie können es einfach verwenden!
Nun implementieren wir die dritte Methode, die Transformation
:wxPromisify()
function wxPromisify(fn) {
return async function (args) {
const promise = new Promise((resolve, reject) => {
// ^^^^^^^^^^^^^^^^
promise.originalResult = fn({
// ^^^^^^^^^^^^^^^^^^^^^^^^^
...(args || {}),
success: res => resolve(res),
fail: err => reject(err)
});
});
return promise;
// ^^^^^^^^^^^^^^^
};
}return new Promise() und dann eine Fehlermeldung zu erhalten: TypeError: Cannot set property 'originalResult' of undefined
Dieser Fehler ist leicht zu verstehen und leicht zu beheben. . aber es ist in der Tat sehr einfach zu begehen!
Ursprünglich ging man davon aus, dass
eine lokale Variable sei, auf die direkt zugegriffen werden könne, sodass es kein Problem darstelle, sie in ihrem Unterbereich zu verwenden. Dabei wird jedoch außer Acht gelassen, dass sich dieser Subscope im Konstruktor befindet. Lassen Sie uns eine grobe Analyse durchführen:promise
heißt) als Parameter, aber zu welchem Zeitpunkt wird diese new Promise() ausgeführt? Beachten Sie, dass wir, nachdem factory eine Promise-Instanz generiert hat, niemals aktiv eine Methode dieser Instanz aufrufen, sodass wir daraus schließen können, dass factory während des Erstellungsprozesses ausgeführt wird. Mit anderen Worten: Die Promise-Instanz wurde zu diesem Zeitpunkt noch nicht generiert und new Promise() bezieht sich auf factory. promiseundefined
ruft
beim Erstellen der Promise-Instanz auf und führt factory direkt im Funktionskörper aus, und Sie können den Rückgabewert von factory sofort erhalten, also diese Promise-Instanz Konstruktion Nach Abschluss können Sie den ursprünglichen Rückgabewert erhalten. fnfnJetzt ändern wir den Code:
function wxPromisify(fn) {
return async function (args) {
let originalResult;
// ^^^^^^^^^^^^^^^^^^^
const promise = new Promise((resolve, reject) => {
originalResult = fn({
// ^^^^^^^^^^^^^^
...(args || {}),
success: res => resolve(res),
fail: err => reject(err)
});
});
promise.originalResult = originalResult;
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
return promise;
};
}Wir müssen
nach einen Wert zuweisen, und dieser „Wert“ wird dann im Prozess von new Promise() generiert Fügen Sie eine weitere lokale Variable hinzu. promise.originalResult Bringen Sie sie einfach heraus. new Promise()originalResultFertig!
Hinweis: Das Folgende ist ein Fehlerbeispiel!
function wxPromisify(fn) {
return async function (args) {
let promise = new Promise();
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
promise = new Promise((resolve, reject) => {
// ^^^^^^^^^^
promise.originalResult = fn({ ... });
// ^^^^^^^^^^^^^^^^^^^^^^
});
return promise;
};
}Dadurch wird nicht das oben genannteerzeugt, aber das von außen erhaltene Promise-Objekt trägt kein
. Der spezifische Grund ist derselbe wie beim oben genannten fehlgeschlagenen Versuch, daher werde ich nicht auf Details eingehen. Nur zur Erinnerung: Hier werden Dieses Mal wird der ursprüngliche Rückgabewert am Beispiel von Empfohlenes Tutorial: „WeChat Mini-Programm“TypeErrorZwei Promise-Objekte originalResult generiert. 6. Lassen Sie uns noch einmal darüber sprechen
wx.request() herausgebracht .abort() Methode zur Stornierungsanfrage. Dieses Anwendungsszenario ähnelt tatsächlich der Art und Weise, wie Axios mit „Stornierung“ umgeht. Sie können sich also genauso gut auf die von Axios über cancelToken implementierte Methode beziehen. Die Essenz von cancelToken ist die zweite oben erwähnte Methode – die Übergabe des „Container“-Objekts, um die benötigten Dinge herauszubringen. Das Herausbringen durch ein Promise-Objekt ist im Wesentlichen dasselbe wie das Herausbringen durch ein spezielles „Container“-Objekt, daher werde ich nicht mehr sagen.
Das obige ist der detaillierte Inhalt vonAsynchrone Kapselung verbessern: Asynchrone Aufrufe mit Rückgabewerten verarbeiten – Border City Inn. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
