MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

JavaScript异步操作与错误处理机制

2021-01-126.6k 阅读

JavaScript异步操作概述

在JavaScript中，异步操作是处理非阻塞任务的关键机制。JavaScript是单线程语言，这意味着它在同一时间只能执行一个任务。如果没有异步操作，任何长时间运行的任务（如网络请求、文件读取等）都会阻塞主线程，导致页面冻结，用户体验极差。

异步操作允许JavaScript在等待某些操作完成（如网络响应、定时器到期）时，继续执行其他代码，而不会阻塞主线程。常见的异步操作场景包括：

  1. 网络请求：例如使用fetch获取API数据。当发送请求后，JavaScript不会等待服务器响应，而是继续执行后续代码。当响应返回时，通过回调函数或Promise等机制来处理数据。
  2. 定时器：setTimeout和setInterval函数用于在指定的时间间隔后执行代码。这使得JavaScript可以在一段时间后执行某些操作，而不影响主线程的正常运行。

异步操作的实现方式

回调函数

回调函数是JavaScript中实现异步操作最基本的方式。它将一个函数作为参数传递给另一个函数，当异步操作完成时，被传递的函数（回调函数）会被调用。

以下是一个简单的使用setTimeout结合回调函数的示例：

function doAsyncTask(callback) {
    setTimeout(() => {
        const result = 42;
        callback(result);
    }, 1000);
}

doAsyncTask((result) => {
    console.log('The result is:', result);
});

在上述代码中，doAsyncTask函数接受一个回调函数作为参数。setTimeout模拟了一个异步操作，在1秒后调用回调函数，并将结果传递给它。

然而，当有多个异步操作需要依次执行时，回调函数会导致代码变得难以阅读和维护，这种情况被称为“回调地狱”。例如：

function step1(callback) {
    setTimeout(() => {
        console.log('Step 1 completed');
        callback();
    }, 1000);
}

function step2(callback) {
    setTimeout(() => {
        console.log('Step 2 completed');
        callback();
    }, 1000);
}

function step3() {
    console.log('Step 3 completed');
}

step1(() => {
    step2(() => {
        step3();
    });
});

随着异步操作的嵌套层次增加，代码的缩进会越来越深，可读性急剧下降。

Promise

Promise是ES6引入的一种处理异步操作的更优雅的方式。它代表一个异步操作的最终完成（或失败）及其结果值。一个Promise对象有三种状态：

  1. pending：初始状态，既不是成功，也不是失败状态。
  2. fulfilled：意味着操作成功完成。
  3. rejected：意味着操作失败。

以下是一个使用Promise进行网络请求的简单示例：

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true;
            if (success) {
                resolve('Data fetched successfully');
            } else {
                reject('Error fetching data');
            }
        }, 1000);
    });
}

fetchData()
   .then((data) => {
        console.log(data);
    })
   .catch((error) => {
        console.error(error);
    });

在上述代码中，fetchData函数返回一个Promise对象。setTimeout模拟了异步操作，根据条件调用resolve（成功时）或reject（失败时）。then方法用于处理Promise成功的情况，catch方法用于捕获Promise失败的错误。

Promise还支持链式调用，这使得多个异步操作可以以更清晰的方式串联起来。例如：

function step1() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('Step 1 completed');
            resolve();
        }, 1000);
    });
}

function step2() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('Step 2 completed');
            resolve();
        }, 1000);
    });
}

function step3() {
    console.log('Step 3 completed');
}

step1()
   .then(() => step2())
   .then(() => step3());

通过链式调用，异步操作的流程更加清晰，避免了回调地狱的问题。

async/await

async/await是ES2017引入的语法糖，它基于Promise，使得异步代码看起来更像同步代码，进一步提高了代码的可读性。async函数总是返回一个Promise对象。如果async函数的返回值不是一个Promise，JavaScript会自动将其包装成一个已解决状态（resolved）的Promise。

await关键字只能在async函数内部使用。它用于暂停async函数的执行，直到Promise被解决（resolved）或被拒绝（rejected）。

以下是使用async/await重写前面网络请求的示例：

async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true;
            if (success) {
                resolve('Data fetched successfully');
            } else {
                reject('Error fetching data');
            }
        }, 1000);
    });
}

async function main() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

main();

在上述代码中，main函数是一个async函数。await fetchData()暂停main函数的执行，直到fetchData返回的Promise被解决。try...catch块用于捕获可能发生的错误。

使用async/await进行多个异步操作依次执行的示例：

async function step1() {
    await new Promise((resolve) => {
        setTimeout(() => {
            console.log('Step 1 completed');
            resolve();
        }, 1000);
    });
}

async function step2() {
    await new Promise((resolve) => {
        setTimeout(() => {
            console.log('Step 2 completed');
            resolve();
        }, 1000);
    });
}

async function step3() {
    console.log('Step 3 completed');
}

async function main() {
    await step1();
    await step2();
    step3();
}

main();

通过async/await，异步操作的代码结构更加直观，类似于同步代码的书写方式。

JavaScript错误处理机制

在JavaScript中，错误处理是确保程序健壮性的重要部分。当异步操作失败时，需要有合适的机制来捕获和处理错误，避免程序崩溃。

回调函数中的错误处理

在回调函数中，通常通过传递错误参数来处理错误。例如：

function doAsyncTask(callback) {
    setTimeout(() => {
        const success = false;
        if (success) {
            const result = 42;
            callback(null, result);
        } else {
            callback(new Error('Task failed'));
        }
    }, 1000);
}

doAsyncTask((error, result) => {
    if (error) {
        console.error(error);
    } else {
        console.log('The result is:', result);
    }
});

在上述代码中，doAsyncTask函数根据操作的结果，将错误或结果传递给回调函数。回调函数通过检查第一个参数是否为错误对象来处理错误。

Promise中的错误处理

Promise使用catch方法来捕获错误。当Promise被拒绝时，catch方法会被调用。例如：

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = false;
            if (success) {
                resolve('Data fetched successfully');
            } else {
                reject(new Error('Error fetching data'));
            }
        }, 1000);
    });
}

fetchData()
   .then((data) => {
        console.log(data);
    })
   .catch((error) => {
        console.error(error);
    });

如果在then方法中抛出错误，catch方法同样可以捕获到。例如：

function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Data fetched successfully');
        }, 1000);
    });
}

fetchData()
   .then((data) => {
        throw new Error('Custom error in then');
        console.log(data);
    })
   .catch((error) => {
        console.error(error);
    });

此外，多个then方法组成的链式调用中，如果其中一个then方法抛出错误，后续的catch方法也能捕获到。例如：

function step1() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve();
        }, 1000);
    });
}

function step2() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject(new Error('Step 2 failed'));
        }, 1000);
    });
}

function step3() {
    console.log('Step 3 completed');
}

step1()
   .then(() => step2())
   .then(() => step3())
   .catch((error) => {
        console.error(error);
    });

在上述代码中，step2返回的Promise被拒绝，catch方法捕获到了这个错误。

async/await中的错误处理

在async/await中，使用try...catch块来捕获错误。例如：

async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = false;
            if (success) {
                resolve('Data fetched successfully');
            } else {
                reject(new Error('Error fetching data'));
            }
        }, 1000);
    });
}

async function main() {
    try {
        const data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

main();

如果在async函数内部的await表达式之后抛出错误，try...catch块同样可以捕获到。例如：

async function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Data fetched successfully');
        }, 1000);
    });
}

async function main() {
    try {
        const data = await fetchData();
        throw new Error('Custom error after await');
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

main();

这种错误处理方式使得async/await代码中的错误处理更加直观和结构化，与同步代码中的错误处理方式类似。

异步操作与错误处理的最佳实践

  1. 合理使用Promise的finally：finally方法在Promise无论被解决还是被拒绝时都会执行。它可以用于清理资源等操作。例如：
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true;
            if (success) {
                resolve('Data fetched successfully');
            } else {
                reject(new Error('Error fetching data'));
            }
        }, 1000);
    });
}

fetchData()
   .then((data) => {
        console.log(data);
    })
   .catch((error) => {
        console.error(error);
    })
   .finally(() => {
        console.log('Operation completed, cleaning up...');
    });
  1. 避免在async函数中忽略错误：始终使用try...catch块来捕获async函数中的错误，否则错误可能会被忽略，导致程序出现难以调试的问题。
  2. 错误处理的粒度：在处理错误时，要根据业务需求确定合适的错误处理粒度。例如，在一个复杂的异步操作流程中，可以在每个关键步骤单独处理错误，也可以在整个流程结束后统一处理错误。例如：
async function complexOperation() {
    try {
        await step1();
        await step2();
        await step3();
    } catch (error) {
        // 统一处理整个流程的错误
        console.error('Complex operation failed:', error);
    }
}

async function step1() {
    try {
        // 执行步骤1的异步操作
        await new Promise((resolve) => {
            setTimeout(() => {
                console.log('Step 1 completed');
                resolve();
            }, 1000);
        });
    } catch (error) {
        // 单独处理步骤1的错误
        console.error('Step 1 failed:', error);
        throw error;
    }
}

async function step2() {
    // 执行步骤2的异步操作
    await new Promise((resolve) => {
        setTimeout(() => {
            console.log('Step 2 completed');
            resolve();
        }, 1000);
    });
}

async function step3() {
    // 执行步骤3的异步操作
    await new Promise((resolve) => {
        setTimeout(() => {
            console.log('Step 3 completed');
            resolve();
        }, 1000);
    });
}

complexOperation();

在上述代码中，step1函数内部单独处理了自身的错误，并重新抛出错误以便外层try...catch块统一处理整个流程的错误。 4. 错误信息的传递与记录：在捕获错误时，要确保错误信息足够详细，以便于调试。可以在错误对象中添加额外的上下文信息。例如：

async function fetchData() {
    try {
        const response = await fetch('https://example.com/api/data');
        if (!response.ok) {
            const error = new Error('Network response was not ok');
            error.context = {
                status: response.status,
                url: response.url
            };
            throw error;
        }
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error fetching data:', error, error.context);
    }
}

fetchData();

通过在错误对象中添加context属性，记录了更多与错误相关的信息，有助于快速定位问题。

异步操作与错误处理在实际项目中的应用

  1. 前端应用中的数据请求：在前端开发中，经常需要从服务器获取数据。使用fetch结合Promise或async/await进行网络请求，并处理可能出现的错误。例如：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Async Data Fetching</title>
</head>

<body>
    <button id="fetchButton">Fetch Data</button>
    <div id="result"></div>

    <script>
        async function fetchData() {
            try {
                const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const data = await response.json();
                return data;
            } catch (error) {
                console.error('Error fetching data:', error);
                return null;
            }
        }

        document.getElementById('fetchButton').addEventListener('click', async () => {
            const data = await fetchData();
            if (data) {
                document.getElementById('result').innerHTML = JSON.stringify(data);
            } else {
                document.getElementById('result').innerHTML = 'Error fetching data';
            }
        });
    </script>
</body>

</html>

在上述代码中，点击按钮时触发fetchData函数，该函数使用fetch获取数据，并处理可能出现的网络错误。根据结果更新页面显示。 2. Node.js中的文件操作：在Node.js中，文件操作通常是异步的。使用fs模块结合Promise或async/await进行文件读取、写入等操作，并处理错误。例如：

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

const readFileAsync = util.promisify(fs.readFile);
const writeFileAsync = util.promisify(fs.writeFile);

async function copyFile(source, destination) {
    try {
        const data = await readFileAsync(source, 'utf8');
        await writeFileAsync(destination, data);
        console.log('File copied successfully');
    } catch (error) {
        console.error('Error copying file:', error);
    }
}

const sourceFile = path.join(__dirname, 'source.txt');
const destinationFile = path.join(__dirname, 'destination.txt');

copyFile(sourceFile, destinationFile);

在上述代码中，copyFile函数使用readFileAsync读取源文件内容，然后使用writeFileAsync将内容写入目标文件，并处理可能出现的文件操作错误。

通过合理运用异步操作与错误处理机制，无论是前端还是后端开发，都能提高程序的稳定性和可靠性，为用户提供更好的体验。在实际项目中，要根据具体需求选择合适的异步操作方式和错误处理策略，不断优化代码结构和性能。同时，随着项目的规模扩大，要注意错误处理的一致性和可维护性，以便于团队协作开发和问题排查。