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 ?。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。