JavaScript 콜백을 약속으로 변환하는 방법은 무엇입니까? 방법 소개

몇 년 전만 해도 콜백은 JavaScript에서 비동기 코드를 실행하는 유일한 방법이었습니다. 콜백 자체에는 몇 가지 문제가 있으며 가장 주목할만한 것은 "콜백 지옥"입니다.

이러한 문제에 대한 솔루션으로 ES6 Promise에 도입되었습니다. 마지막으로 더 나은 경험을 제공하고 가독성을 높이기 위해 async/await 키워드가 도입되었습니다. 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

새로운 메서드를 사용하더라도 콜백을 사용하는 네이티브 모듈과 라이브러리는 여전히 많습니다. 이 기사에서는 JavaScript 콜백을 Promise로 변환하는 방법에 대해 설명합니다. 우리가 해야 할 일을 단순화하기 위해 스프레드 연산자와 같은 기능을 사용할 것이므로 ES6에 대한 지식이 도움이 될 것입니다. 🎜

콜백이란 무엇입니까

🎜콜백은 함수 매개변수이며, 이는 함수 자체입니다. 다른 함수를 허용하는 함수를 만들 수 있지만 콜백은 주로 비동기 작업에 사용됩니다. 🎜🎜JavaScript는 해석된 언어이며 한 번에 한 줄의 코드만 처리할 수 있습니다. 대용량 파일을 다운로드하거나 읽는 등 일부 작업은 완료하는 데 시간이 오래 걸릴 수 있습니다. JavaScript는 이러한 장기 실행 작업을 브라우저나 Node.js 환경 내의 다른 프로세스로 오프로드합니다. 이렇게 하면 다른 코드가 실행되는 것을 차단하지 않습니다. 🎜🎜보통 비동기 함수는 콜백 함수를 허용하므로 해당 데이터는 완료 후 처리될 수 있습니다. 🎜🎜예를 들어, 프로그램이 하드 디스크에서 파일을 성공적으로 읽은 후에 실행될 콜백 함수를 작성하겠습니다. 🎜🎜따라서 다음 내용이 포함된 sample.txt라는 텍스트 파일을 준비해야 합니다. 🎜

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

🎜그런 다음 간단한 Node.js 스크립트를 작성하여 파일을 읽습니다. 🎜

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

🎜실행 후 코드 출력: 🎜

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

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

🎜이 코드를 사용하면 콜백을 실행하기 전에 0..9가 콘솔에 출력되는 것을 볼 수 있습니다. 이는 JavaScript의 비동기 관리 메커니즘 때문입니다. 파일을 읽은 후 파일 내용을 출력하기 위한 콜백이 호출됩니다. 🎜🎜 그런데 콜백은 동기식 메서드에도 사용할 수 있습니다. 예를 들어 Array.sort()는 요소 정렬 방법을 사용자 정의할 수 있는 콜백 함수를 허용합니다. 🎜

콜백을 허용하는 함수를 "고차 함수"라고 합니다.

🎜이제 더 나은 콜백 방법이 생겼습니다. 그럼 계속해서 Promise가 무엇인지 살펴보겠습니다. 🎜

Promise란 무엇입니까

🎜Promise는 비동기 프로그래밍 환경을 개선하기 위해 ECMAScript 2015(ES6)에 도입되었습니다. 이름에서 알 수 있듯이 JavaScript 객체가 결국 반환할 "값" 또는 "오류"는 Promise여야 합니다. 🎜🎜Promise에는 3가지 상태가 있습니다: 🎜

• 보류(pending): 비동기 작업이 아직 완료되지 않았음을 나타내는 데 사용되는 초기 상태입니다.
• 완료: 비동기 작업이 성공적으로 완료되었음을 나타냅니다.
• 거부됨: 비동기 작업이 실패했음을 나타냅니다.

🎜대부분의 Promise는 다음과 같습니다: 🎜rrreee🎜Promise는 🎜ECMAScript 2016🎜에 도입된 async/await 키와 관련되어 있기 때문에 최신 JavaScript에서 매우 중요합니다. 함께 사용되는 단어. async /await를 사용하면 비동기 코드를 작성하기 위한 콜백이나 then() 및 catch()가 필요하지 않습니다. 🎜🎜이전 예제를 다시 작성하면 다음과 같습니다. 🎜rrreee🎜이는 "일반적인" 동기 JavaScript와 매우 비슷해 보입니다. 가장 널리 사용되는 JavaScript 라이브러리와 새 프로젝트는 async/await 키워드와 함께 Promise를 사용합니다. 🎜🎜그러나 기존 라이브러리를 업데이트하거나 오래된 코드를 발견하는 경우 콜백 기반 API를 Promise 기반 API로 마이그레이션하여 개발 경험을 향상시키는 데 관심이 있을 수 있습니다. 🎜🎜콜백을 Promise로 변환하는 여러 가지 방법을 살펴보겠습니다. 🎜

콜백을 Promise로 변환

Node.js Promise

🎜Node.js에서 콜백을 허용하는 대부분의 비동기 함수(예: fs 모듈)에는 표준이 있습니다. 구현: 콜백을 마지막 매개변수로 전달합니다. 🎜🎜예를 들어 다음은 텍스트 인코딩을 지정하지 않고 fs.readFile()을 사용하여 파일을 읽는 방법입니다. 🎜rrreee🎜참고: utf-를 지정하는 경우 8을 인코딩으로 사용하면 얻은 출력은 문자열입니다. 지정하지 않으면 출력은 Buffer입니다. 🎜🎜또한 이 함수에 전달된 콜백은 첫 번째 매개변수이므로 Error를 허용해야 합니다. 이후에는 원하는 만큼의 출력이 있을 수 있습니다. 🎜🎜이 규칙을 따르기 위해 Promise로 변환된 함수가 필요한 경우 Promise에 대한 콜백이 포함된 기본 Node.js 모듈인 util.promisify를 사용할 수 있습니다. 🎜🎜먼저 util` 모듈을 가져옵니다: 🎜rrreee🎜 그런 다음 promisify 메서드를 사용하여 이를 Promise로 변환합니다: 🎜rrreee🎜이제 새로 생성된 함수를 Promise로 사용합니다: 🎜rrreee🎜 또는, 다음 예에 제공된 async/await 키워드를 사용할 수 있습니다: 🎜rrreee🎜async로 생성된 함수에서만 await 키워드를 사용할 수 있습니다. > 함수 래퍼가 사용되는 이유입니다. 함수 래퍼는 즉시 호출되는 함수 표현식이라고도 합니다. 🎜

如果你的回调不遵循这个特定标准也不用担心。 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 代码可以轻松地与现代的代码库和混合在一起。

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

위 내용은 JavaScript 콜백을 약속으로 변환하는 방법은 무엇입니까? 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!