Javascript Callback转Promise用法及代码示例

异步编程在JavaScript通常涉及使用回调。但是，回调可能会导致回调地狱并使代码更难阅读和维护。 Promise 提供了一种更简洁的方式来处理异步操作。将现有的基于回调的代码转换为使用 Promise 可以提高可读性和可维护性。

表中的内容

使用 Promise 构造函数
使用基于承诺的自定义包装器

使用 Promise 构造函数

此方法涉及手动创建承诺围绕异步操作。它需要创建一个新的 Promise 并根据异步操作的结果解决或拒绝它。

用法:

function promisifiedFunction(arg1, arg2) {
    return new Promise((resolve, reject) => {
        myFunctionWithCallback(arg1, arg2, (error, result) => {
            if (error) {
                reject(error);
            } else {
                resolve(result);
            }
        });
    });}

例子：在此，基于 Promise 的函数用于从 API 获取数据。

function fetchDataWithCallback(url, callback) {
    setTimeout(() => {
        const data = {
            message: 'Data fetched successfully',
            url: url
        };
        callback(null, data);
    }, 1000);


    function fetchDataPromise(url) {
        return new Promise((resolve, reject) => {
            fetchDataWithCallback(url, (error, data) => {
                if (error) {
                    reject(error);
                } else {
                    resolve(data);
                }
            });
        });
    }

    fetchDataPromise('https://api.example.com/data')
        .then(data => console.log('Data:', data))
        .catch(error => console.error('Error:', error));

输出：

b8b94f70-0f0c-485f-9007-48de016a461b-ezgifcom-video-to-gif-converter

输出

使用基于承诺的自定义包装器

此方法涉及围绕现有的基于回调的函数创建自定义包装函数。
在包装函数内部，创建了一个新的 Promise，并使用打返回.
根据回调的结果解决或拒绝 Promise。

用法:

function promisifiedFunction(arg1, arg2) {
    return new Promise((resolve, reject) => {
        originalFunctionWithCallback(arg1, arg2, (error, result) => {
            if (error) {
                reject(error);
            } else {
                resolve(result);
            }
        });
    });}

例子：在此，基于 Promise 的函数用于从 API 获取数据。

function fetchDataWithCallback(url, callback) {
    setTimeout(() => {
        const data = {
            message: 'Data fetched successfully',
            url: url
        };
        callback(null, data);
    }, 1000);
}

function fetchDataPromise(url) {
    return new Promise((resolve, reject) => {
        fetchDataWithCallback(url, (error, data) => {
            if (error) {
                reject(error);
            } else {
                resolve(data);
            }
        });
    });
}

fetchDataPromise('https://api.example.com/data')
    .then(data => console.log('Data:', data))
    .catch(error => console.error('Error:', error));

输出：

输出

相关用法

注：本文由纯净天空筛选整理自strikeackr大神的英文原创作品 How to Convert Callback to Promise in JavaScript ?。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。