JavaScript中的异步处理你知道哪些方法？你用对了吗？("JavaScript异步处理全解析：你掌握的方法有哪些？用得正确吗？")

原创

ithorizon 7个月前 (10-20) 阅读数 18 #后端开发

JavaScript异步处理全解析：你掌握的方法有哪些？用得正确吗？

一、JavaScript异步处理简介

JavaScript 是一门单线程语言，这意味着它一次只能执行一个任务。当遇到耗时的操作（如网络请求、定时器等）时，JavaScript 需要采用异步处理的对策来保证程序的执行效能。本文将介绍 JavaScript 中常见的异步处理方法，并分析其正确使用对策。

二、异步处理方法

1. 回调函数（Callback）

回调函数是最早出现的异步处理方法，它允许我们将一个函数作为参数传递给另一个函数，并在适当的时候执行这个函数。以下是回调函数的一个简洁示例：


function asyncOperation(callback) {
    setTimeout(() => {
        console.log('异步操作完成');
        callback();
    }, 1000);
}
asyncOperation(() => {
    console.log('回调函数执行');
});

然而，回调函数存在回调地狱（Callback Hell）的问题，即多层嵌套的回调函数会使代码难以维护和懂得。

2. Promise 对象

Promise 是 ES6 引入的一种新的异步处理方法，它描述一个异步操作的最终最终。Promise 对象有三种状态：pending（进行中）、fulfilled（已顺利）和 rejected（已未果）。以下是 Promise 的一个简洁示例：


function asyncOperation() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('异步操作完成');
            resolve('顺利最终');
        }, 1000);
    });
}
asyncOperation().then(result => {
    console.log(result);
});

Promise 解决了回调地狱的问题，但它也有一定的局限性，例如无法取消 Promise、失误处理不够灵活等。

3. async/await

async/await 是 ES7 引入的一种异步处理方法，它允许我们用同步的对策编写异步代码。async 函数返回一个 Promise 对象，而 await 用于等待一个 Promise 对象的解析。以下是 async/await 的一个简洁示例：


async function asyncOperation() {
    console.log('起初异步操作');
    const result = await new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('异步操作完成');
            resolve('顺利最终');
        }, 1000);
    });
    return result;
}
asyncOperation().then(result => {
    console.log(result);
});

async/await 令异步代码的编写更加简洁，易于懂得和维护。

4. Generator 函数

Generator 函数是 ES6 引入的一种异步处理方法，它允许我们暂停和恢复函数的执行。Generator 函数通过 yield 关键字暂停执行，并通过 next() 方法恢复执行。以下是 Generator 函数的一个简洁示例：


function* generatorFunction() {
    console.log('起初异步操作');
    yield new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('异步操作完成');
            resolve('顺利最终');
        }, 1000);
    });
}
const generator = generatorFunction();
generator.next().value.then(result => {
    console.log(result);
});

Generator 函数在某些场景下非常有用，但它不如 async/await 直观和易用。

5. Observables

Observables 是基于 RxJS 库的一种异步处理方法，它允许我们创建可观察的对象，并订阅这些对象的变化。以下是 Observables 的一个简洁示例：


import { Observable } from 'rxjs';
const observable = new Observable(subscriber => {
    setTimeout(() => {
        subscriber.next('异步操作完成');
        subscriber.complete();
    }, 1000);
});
observable.subscribe({
    next: value => console.log(value),
    complete: () => console.log('完成'),
});

Observables 在处理错综的异步操作和流式数据时非常有用，但它的学习曲线较陡峭。

三、正确使用异步处理方法

下面我们将分析一些常见场景下怎样正确使用异步处理方法。

1. 简洁异步操作

对于简洁的异步操作，如网络请求，我们可以使用 Promise 或 async/await。以下是一个使用 Promise 的示例：


function fetchData(url) {
    return fetch(url).then(response => response.json());
}
fetchData('https://api.example.com/data').then(data => {
    console.log(data);
});

使用 async/await 的示例：


async function fetchData(url) {
    const response = await fetch(url);
    return response.json();
}
fetchData('https://api.example.com/data').then(data => {
    console.log(data);
});

2. 处理多个异步操作

当需要同时处理多个异步操作时，我们可以使用 Promise.all 方法。以下是一个示例：


function fetchData(url) {
    return fetch(url).then(response => response.json());
}
Promise.all([
    fetchData('https://api.example.com/data1'),
    fetchData('https://api.example.com/data2'),
    fetchData('https://api.example.com/data3')
]).then(results => {
    console.log(results);
});

使用 async/await 的示例：


async function fetchData(url) {
    const response = await fetch(url);
    return response.json();
}
async function fetchAll(urls) {
    const results = await Promise.all(urls.map(url => fetchData(url)));
    console.log(results);
}
fetchAll([
    'https://api.example.com/data1',
    'https://api.example.com/data2',
    'https://api.example.com/data3'
]);

3. 失误处理

在异步操作中，失误处理非常重要。以下是使用 Promise 的失误处理示例：


function fetchData(url) {
    return fetch(url).then(response => {
        if (!response.ok) {
            throw new Error('请求未果');
        }
        return response.json();
    });
}
fetchData('https://api.example.com/data').then(data => {
    console.log(data);
}).catch(error => {
    console.error(error);
});

使用 async/await 的示例：


async function fetchData(url) {
    const response = await fetch(url);
    if (!response.ok) {
        throw new Error('请求未果');
    }
    return response.json();
}
async function fetchAndHandleError(url) {
    try {
        const data = await fetchData(url);
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}
fetchAndHandleError('https://api.example.com/data');

4. 链式调用

在处理多个异步操作时，我们常常需要将它们串联起来。以下是使用 Promise 的链式调用示例：


function fetchData(url) {
    return fetch(url).then(response => response.json());
}
fetchData('https://api.example.com/data1')
    .then(data1 => {
        console.log(data1);
        return fetchData('https://api.example.com/data2');
    })
    .then(data2 => {
        console.log(data2);
        return fetchData('https://api.example.com/data3');
    })
    .then(data3 => {
        console.log(data3);
    })
    .catch(error => {
        console.error(error);
    });

使用 async/await 的示例：


async function fetchData(url) {
    const response = await fetch(url);
    return response.json();
}
async function fetchChain() {
    try {
        const data1 = await fetchData('https://api.example.com/data1');
        console.log(data1);
        const data2 = await fetchData('https://api.example.com/data2');
        console.log(data2);
        const data3 = await fetchData('https://api.example.com/data3');
        console.log(data3);
    } catch (error) {
        console.error(error);
    }
}
fetchChain();