Wie konvertiere ich JavaScript-Rückrufe in Versprechen? Methodeneinführung

Vor einigen Jahren waren Rückrufe die einzige Möglichkeit, asynchronen Code in JavaScript auszuführen. Es gibt nur wenige Probleme mit Rückrufen selbst, am bemerkenswertesten ist die „Rückrufhölle“.

Eingeführt in ES6 Promise als Lösung für diese Probleme. Schließlich wird das Schlüsselwort async/await eingeführt, um ein besseres Erlebnis zu bieten und die Lesbarkeit zu verbessern. async/await  关键字来提供更好的体验并提高了可读性。

即使有了新的方法，但是仍然有许多使用回调的原生模块和库。在本文中，我们将讨论如何将 JavaScript 回调转换为 Promise。 ES6 的知识将会派上用场，因为我们将会使用 展开操作符之类的功能来简化要做的事情。

什么是回调

回调是一个函数参数，恰好是一个函数本身。虽然我们可以创建任何函数来接受另一个函数，但回调主要用于异步操作。

JavaScript 是一种解释性语言，一次只能处理一行代码。有些任务可能需要很长时间才能完成，例如下载或读取大文件等。 JavaScript 将这些运行时间很长的任务转移到浏览器或 Node.js 环境中的其他进程中。这样它就不会阻止其他代码的执行。

通常异步函数会接受回调函数，所以完成之后可以处理其数据。

举个例子，我们将编写一个回调函数，这个函数会在程序成功从硬盘读取文件之后执行。

所以需要准备一个名为 sample.txt 的文本文件，其中包含以下内容：

Hello world from sample.txt

然后写一个简单的 Node.js 脚本来读取文件：

const fs = require('fs');

fs.readFile('./sample.txt', 'utf-8', (err, data) => {
    if (err) {
        // 处理错误
        console.error(err);
          return;
    }
    console.log(data);
});

for (let i = 0; i < 10; i++) {
    console.log(i);
}

运行代码后将会输出：

0
...
8
9
Hello world from sample.txt

如果这段代码，应该在执行回调之前看到 0..9 被输出到控制台。这是因为 JavaScript 的异步管理机制。在读取文件完毕之后，输出文件内容的回调才被调用。

顺便说明一下，回调也可以在同步方法中使用。例如 Array.sort() 会接受一个回调函数，这个函数允许你自定义元素的排序方式。

接受回调的函数被称为“高阶函数”。

现在我们有了一个更好的回调方法。那么们继续看看什么是 Promise。

什么是 Promise

在 ECMAScript 2015（ES6）中引入了 Promise，用来改善在异步编程方面的体验。顾名思义，JavaScript 对象最终将返回的“值”或“错误”应该是一个 Promise。

一个 Promise 有 3 个状态：

• Pending（待处理）： 用来指示异步操作尚未完成的初始状态。
• Fulfilled（已完成）：表示异步操作已成功完成。
• Rejected（拒绝）：表示异步操作失败。

大多数 Promise 最终看起来像这样：

someAsynchronousFunction()
    .then(data => {
        // promise 被完成
        console.log(data);
    })
    .catch(err => {
        // promise 被拒绝
        console.error(err);
    });

Promise 在现代 JavaScript 中非常重要，因为它们与 ECMAScript 2016 中引入的 async/await 关键字一起使用。使用 async / await 就不需要再用回调或 then() 和 catch() 来编写异步代码。

如果要改写前面的例子，应该是这样：

try {
    const data = await someAsynchronousFunction();
} catch(err) {
    // promise 被拒绝
    console.error(err);
}

这看起来很像“一般的”同步 JavaScript。大多数流行的JavaScript库和新项目都把 Promises 与 async/await 关键字放在一起用。

但是，如果你要更新现有的库或遇到旧的代码，则可能会对将基于回调的 API 迁移到基于 Promise 的 API 感兴趣，这样可以改善你的开发体验。

来看一下将回调转换为 Promise 的几种方法。

将回调转换为 Promise

Node.js Promise

大多数在 Node.js 中接受回调的异步函数（例如 fs 模块）有标准的实现方式：把回调作为最后一个参数传递。

例如这是在不指定文本编码的情况下用 fs.readFile() 读取文件的方法：

fs.readFile('./sample.txt', (err, data) => {
    if (err) {
        console.error(err);
          return;
    }
    console.log(data);
});

注意：如果你指定 utf-8 作为编码，那么得到的输出是一个字符串。如果不指定得到的输出是 Buffer。

另外传给这个函数的回调应接受 Error，因为它是第一个参数。之后可以有任意数量的输出。

如果你需要转换为 Promise 的函数遵循这些规则，那么可以用 util.promisify ，这是一个原生 Node.js 模块，其中包含对 Promise 的回调。

首先导入ʻutil`模块：

const util = require('util');

然后用 promisify 方法将其转换为 Promise：

const fs = require('fs');
const readFile = util.promisify(fs.readFile);

现在，把新创建的函数用作 promise：

readFile('./sample.txt', 'utf-8')
    .then(data => {
        console.log(data);
    })
    .catch(err => {
        console.log(err);
    });

另外也可以用下面这个示例中给出的 async/await 关键字：

const fs = require('fs');
const util = require('util');

const readFile = util.promisify(fs.readFile);

(async () => {
    try {
        const content = await readFile('./sample.txt', 'utf-8');
        console.log(content);
    } catch (err) {
        console.error(err);
    }
})();

你只能在用 async 创建的函数中使用 await

Auch mit den neuen Methoden gibt es immer noch viele native Module und Bibliotheken, die Callbacks verwenden. In diesem Artikel besprechen wir, wie man JavaScript-Rückrufe in Promises umwandelt. Kenntnisse in ES6 werden von Nutzen sein, da wir Funktionen wie den Spread-Operator verwenden werden, um unsere Arbeit zu vereinfachen. 🎜

Was ist ein Callback

🎜Ein Callback ist ein Funktionsparameter, der zufällig selbst eine Funktion ist. Obwohl wir jede Funktion erstellen können, um eine andere Funktion zu akzeptieren, werden Rückrufe hauptsächlich für asynchrone Vorgänge verwendet. 🎜🎜JavaScript ist eine interpretierte Sprache und kann jeweils nur eine Codezeile verarbeiten. Einige Aufgaben können lange dauern, z. B. das Herunterladen oder Lesen großer Dateien usw. JavaScript verlagert diese langwierigen Aufgaben auf den Browser oder andere Prozesse innerhalb der Node.js-Umgebung. Auf diese Weise wird die Ausführung anderen Codes nicht blockiert. 🎜🎜Normalerweise akzeptieren asynchrone Funktionen Rückruffunktionen, sodass ihre Daten nach Abschluss verarbeitet werden können. 🎜🎜Zum Beispiel schreiben wir eine Rückruffunktion, die ausgeführt wird, nachdem das Programm die Datei erfolgreich von der Festplatte gelesen hat. 🎜🎜Sie müssen also eine Textdatei mit dem Namen sample.txt vorbereiten, die den folgenden Inhalt enthält: 🎜

const fs = require('fs');

const readFile = (fileName, encoding) => {
    return new Promise((resolve, reject) => {
        fs.readFile(fileName, encoding, (err, data) => {
            if (err) {
                return reject(err);
            }

            resolve(data);
        });
    });
}

readFile('./sample.txt')
    .then(data => {
        console.log(data);
    })
    .catch(err => {
        console.log(err);
    });

🎜Dann schreiben Sie ein einfaches Node.js-Skript, um die Datei zu lesen: 🎜

const getMaxCustom = (callback, ...args) => {
    let max = -Infinity;

    for (let i of args) {
        if (i > max) {
            max = i;
        }
    }

    callback(max);
}

getMaxCustom((max) => { console.log('Max is ' + max) }, 10, 2, 23, 1, 111, 20);

🎜Nach dem Ausführen von Code Gibt Folgendes aus: 🎜

const getMaxPromise = (...args) => {
    return new Promise((resolve) => {
        getMaxCustom((max) => {
            resolve(max);
        }, ...args);
    });
}

getMaxCustom(10, 2, 23, 1, 111, 20)
    .then(max => console.log(max));

🎜Wenn Sie diesen Code verwenden, sollten Sie sehen, dass 0..9 an die Konsole ausgegeben wird, bevor Sie den Rückruf ausführen. Dies liegt am asynchronen Verwaltungsmechanismus von JavaScript. Nach dem Lesen der Datei wird der Callback zur Ausgabe des Dateiinhalts aufgerufen. 🎜🎜Callbacks können übrigens auch in synchronen Methoden verwendet werden. Beispielsweise akzeptiert Array.sort() eine Rückruffunktion, mit der Sie anpassen können, wie Elemente sortiert werden. 🎜

Funktionen, die Rückrufe akzeptieren, werden „Funktionen höherer Ordnung“ genannt.

🎜Jetzt haben wir eine bessere Rückrufmethode. Schauen wir uns also weiter an, was Promise ist. 🎜

Was ist Promise

🎜Promise wurde in ECMAScript 2015 (ES6) eingeführt, um die Erfahrung der asynchronen Programmierung zu verbessern. Wie der Name schon sagt, sollte der „Wert“ oder „Fehler“, den ein JavaScript-Objekt letztendlich zurückgibt, ein Versprechen sein. 🎜🎜Ein Versprechen hat 3 Zustände: 🎜

• Pending (ausstehend): Anfangszustand, der verwendet wird, um anzuzeigen, dass der asynchrone Vorgang noch nicht abgeschlossen ist.
• Erfüllt: Zeigt an, dass der asynchrone Vorgang erfolgreich abgeschlossen wurde.
• Abgelehnt: Zeigt an, dass der asynchrone Vorgang fehlgeschlagen ist.

🎜Die meisten Promises sehen letztendlich so aus: 🎜rrreee🎜Promises sind in modernem JavaScript sehr wichtig, da sie mit dem in 🎜ECMAScript 2016🎜 eingeführten Schlüssel async/await zusammenhängen Wörter, die zusammen verwendet werden. Durch die Verwendung von async/await entfällt die Notwendigkeit von Rückrufen oder then() und catch() zum Schreiben von asynchronem Code. 🎜🎜Wenn Sie das vorherige Beispiel umschreiben würden, würde es so aussehen: 🎜rrreee🎜Das sieht sehr nach „normalem“ synchronem JavaScript aus. Die meisten gängigen JavaScript-Bibliotheken und neuen Projekte verwenden Promises mit dem Schlüsselwort async/await. 🎜🎜Wenn Sie jedoch eine vorhandene Bibliothek aktualisieren oder auf alten Code stoßen, könnten Sie daran interessiert sein, eine Callback-basierte API auf eine Promise-basierte API zu migrieren, was Ihre Entwicklungserfahrung verbessern kann. 🎜🎜Werfen wir einen Blick auf verschiedene Methoden zum Konvertieren von Rückrufen in Promise. 🎜

Rückrufe in Promise konvertieren

Node.js Promise

🎜Die meisten asynchronen Funktionen, die Rückrufe in Node.js akzeptieren (wie das fs-Modul), haben Standard Implementierung: Übergeben Sie den Rückruf als letzten Parameter. 🎜🎜So lesen Sie beispielsweise eine Datei mit fs.readFile(), ohne die Textkodierung anzugeben: 🎜rrreee🎜Hinweis: Wenn Sie utf- angeben 8 als Codierung verwenden, ist die erhaltene Ausgabe eine Zeichenfolge. Wenn nicht angegeben, ist die Ausgabe Puffer. 🎜🎜Außerdem sollte der an diese Funktion übergebene Rückruf Error akzeptieren, da es sich um den ersten Parameter handelt. Es können danach beliebig viele Ausgänge erfolgen. 🎜🎜Wenn Sie Funktionen benötigen, die in Promise konvertiert werden müssen, um diesen Regeln zu folgen, können Sie util.promisify verwenden, ein natives Node.js-Modul, das Rückrufe für Promise enthält. 🎜🎜Importieren Sie zunächst das „util“-Modul: 🎜rrreee🎜 Dann verwenden Sie die Methode promisify, um es in ein Promise umzuwandeln: 🎜rrreee🎜Nun verwenden Sie die neu erstellte Funktion als Promise: 🎜rrreee🎜 Alternativ: Sie können das folgende Schlüsselwort async/await verwenden, das in diesem Beispiel angegeben ist: 🎜rrreee🎜Sie können das Schlüsselwort await nur in Funktionen verwenden, die mit asyncerstellt wurden > , weshalb Funktions-Wrapper verwendet werden. Funktionswrapper werden auch als sofort aufgerufene Funktionsausdrücke bezeichnet. 🎜

如果你的回调不遵循这个特定标准也不用担心。 util.promisify() 函数可让你自定义转换是如何发生的。

注意： Promise 在被引入后不久就开始流行了。 Node.js 已经将大部分核心函数从回调转换成了基于 Promise 的API。

如果需要用 Promise 处理文件，可以用 Node.js 附带的库（https://nodejs.org/docs/lates...）。

现在你已经了解了如何将 Node.js 标准样式回调隐含到 Promise 中。从 Node.js 8 开始，这个模块仅在 Node.js 上可用。如果你用的是浏览器或早期版本版本的 Node，则最好创建自己的基于 Promise 的函数版本。

创建你自己的 Promise

让我们讨论一下怎样把回调转为  util.promisify() 函数的 promise。

思路是创建一个新的包含回调函数的 Promise 对象。如果回调函数返回错误，就拒绝带有该错误的Promise。如果回调函数返回非错误输出，就解决并输出 Promise。

先把回调转换为一个接受固定参数的函数的 promise 开始：

const fs = require('fs');

const readFile = (fileName, encoding) => {
    return new Promise((resolve, reject) => {
        fs.readFile(fileName, encoding, (err, data) => {
            if (err) {
                return reject(err);
            }

            resolve(data);
        });
    });
}

readFile('./sample.txt')
    .then(data => {
        console.log(data);
    })
    .catch(err => {
        console.log(err);
    });

新函数 readFile() 接受了用来读取 fs.readFile() 文件的两个参数。然后创建一个新的 Promise 对象，该对象包装了该函数，并接受回调，在本例中为 fs.readFile()。

要  reject  Promise 而不是返回错误。所以代码中没有立即把数据输出，而是先 resolve 了Promise。然后像以前一样使用基于 Promise 的 readFile() 函数。

接下来看看接受动态数量参数的函数：

const getMaxCustom = (callback, ...args) => {
    let max = -Infinity;

    for (let i of args) {
        if (i > max) {
            max = i;
        }
    }

    callback(max);
}

getMaxCustom((max) => { console.log('Max is ' + max) }, 10, 2, 23, 1, 111, 20);

第一个参数是 callback 参数，这使它在接受回调的函数中有点与众不同。

转换为 promise 的方式和上一个例子一样。创建一个新的 Promise 对象，这个对象包装使用回调的函数。如果遇到错误，就 reject，当结果出现时将会 resolve。

我们的 promise 版本如下：

const getMaxPromise = (...args) => {
    return new Promise((resolve) => {
        getMaxCustom((max) => {
            resolve(max);
        }, ...args);
    });
}

getMaxCustom(10, 2, 23, 1, 111, 20)
    .then(max => console.log(max));

在创建 promise 时，不管函数是以非标准方式还是带有许多参数使用回调都无关紧要。我们可以完全控制它的完成方式，并且原理是一样的。

总结

尽管现在回调已成为 JavaScript 中利用异步代码的默认方法，但 Promise 是一种更现代的方法，它更容易使用。如果遇到了使用回调的代码库，那么现在就可以把它转换为 Promise。

在本文中，我们首先学到了如何 在Node.js 中使用 utils.promisfy() 方法将接受回调的函数转换为 Promise。然后，了解了如何创建自己的 Promise 对象，并在对象中包装了无需使用外部库即可接受回调的函数。这样许多旧 JavaScript 代码可以轻松地与现代的代码库和混合在一起。

更多编程相关知识，请访问：编程学习！！

Das obige ist der detaillierte Inhalt vonWie konvertiere ich JavaScript-Rückrufe in Versprechen? Methodeneinführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!