27 JavaScript学习：异步编程-阿里云开发者社区

异步的概念

在JavaScript中，异步编程是一项重要的概念，特别在处理用户交互、网络请求和文件读写等场景下非常常见。JavaScript是一门单线程语言，因此需要通过异步编程来避免阻塞主线程，保证程序的流畅性和响应性。

在JavaScript中实现异步编程有几种方式：

回调函数(Callbacks): 回调函数是最基本的异步编程模式，通过在一个函数执行完毕后调用另一个函数来处理结果。例如，在Ajax请求中经常使用回调函数来处理服务器端的响应。
Promise: Promise是ES6引入的一种处理异步操作的方法。使用Promise可以更清晰地表达异步操作的结果，并且可以链式调用多个操作。
Async/Await: Async/Await是ES8引入的语法糖，用于简化Promise的操作。通过async关键字定义的函数可以使用await关键字等待异步操作的结果，使代码看起来更加同步。
事件监听(Event listeners): 通过事件监听器可以实现订阅发布模式，当某个事件发生时再执行相应的操作。这种模式在处理用户交互或者计时器等场景下非常有用。
Generator函数: Generator函数也可以实现异步操作，通过yield关键字可以暂停函数的执行，然后通过.next()方法继续执行。结合Promise可以完成复杂的异步操作。

总的来说，在JavaScript中实现异步操作是为了避免阻塞主线程，提高程序的性能和响应速度。不同的异步编程方式适用于不同的场景，开发者可以根据具体需求来选择适合的方法。

异步使用场景

JavaScript中异步编程的常见使用场景包括:

网络请求: 在进行Ajax、Fetch等网络请求时,需要使用异步操作来处理响应,否则主线程将被阻塞。
文件I/O: 读写文件是一种耗时的操作,使用异步I/O可以避免阻塞主线程。
定时器: 使用setTimeout和setInterval等函数实现的定时器是异步的,它们不会阻塞主线程的执行。
事件处理: 在处理用户交互事件(点击、滚动、键盘输入等)时,需要使用事件监听的异步方式。
数据流处理: 流式数据处理(如视频、音频)通常使用异步的方式来处理数据块,以保证程序的响应性。
任务队列: 在Web Worker或Node.js中,可以把耗时的任务放到任务队列中异步执行,减轻主线程负担。
消息队列: 消息队列是一种常见的异步通信机制,用于解耦不同服务或模块之间的依赖关系。
数据库操作: 与数据库的交互通常是异步进行的,以免阻塞主线程。
机器学习/数据分析: 复杂的计算任务可以采用异步方式执行,避免影响用户体验。

总的来说,异步编程是JavaScript应对I/O密集型任务的重要手段,可以大幅提高程序的性能和响应能力。合理利用异步机制是编写高质量JavaScript应用程序的关键所在。

回调函数

回调函数是一种常见的异步编程模式，在JavaScript中被广泛使用。回调函数本质上是一个函数，作为参数传递给另一个函数，当特定事件发生或者异步操作完成时，这个回调函数会被执行。

以下是回调函数的一些重要特点和使用场景：

特点：

异步操作处理: 回调函数通常用于处理异步操作的结果，例如Ajax请求、定时器等。
事件处理: 在事件监听器中，通常也会使用回调函数来处理特定事件的触发。
数据传递: 回调函数可以接收参数，用来传递数据给回调函数进行处理。

使用场景：

Ajax请求:

function fetchData(callback) {
    // 模拟Ajax请求
    setTimeout(() => {
        const data = 'Some data';
        callback(data);
    }, 1000);
}
fetchData((data) => {
    console.log('Data received:', data);
});

事件处理:

document.getElementById('myButton').addEventListener('click', () => {
    console.log('Button clicked');
});

定时器:

setTimeout(() => {
   console.log('Timeout executed');
}, 2000);

Node.js中的文件I/O:

const fs = require('fs');
fs.readFile('data.txt', 'utf8', (err, data) => {
    if (err) throw err;
    console.log(data);
});

回调函数是一种灵活且强大的工具，能够帮助处理各种异步操作和事件。然而，过多的回调函数嵌套容易导致"回调地狱"，不利于代码的维护和阅读。因此，后续的Promise、Async/Await等方式的出现也是为了解决这一问题。

异步Ajax

异步Ajax是一种常见的前端编程技术，用于在网页中发送异步请求并处理响应，而不会阻塞页面的加载和用户交互。通过回调函数，可以在Ajax请求完成后执行特定的操作。

下面是一个使用回调函数处理异步Ajax请求的示例：

function fetchData(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                // 请求成功，调用回调函数并传递响应数据
                callback(null, xhr.responseText);
            } else {
                // 请求失败，调用回调函数并传递错误信息
                callback(new Error('Ajax request failed'));
            }
        }
    };
    xhr.open('GET', url, true);
    xhr.send();
}
// 调用fetchData函数并传入回调函数处理响应
fetchData('https://api.example.com/data', function(err, data) {
    if (err) {
        console.error('Error:', err.message);
    } else {
        console.log('Data received:', data);
    }
});

在这个例子中，fetchData函数接受一个URL和一个回调函数作为参数。当Ajax请求完成后，回调函数会被调用，根据请求的结果执行相应的操作。如果请求成功，回调函数会将错误参数设为null，并传递响应数据；如果请求失败，回调函数会将错误信息传递给第一个参数，并将数据参数设为undefined。

Promise

Promise是一种用于处理JavaScript异步操作的对象，它代表了一个异步操作的最终完成或失败，并返回相应的结果。Promise对象有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一旦Promise状态发生改变，就会执行相应的回调函数。

使用Promise可以改善回调地狱（callback hell）问题，使代码更易读、更可维护。Promise提供了链式调用的方式来处理异步操作，避免了深层嵌套的回调函数。

一个简单的Promise示例如下：

// 创建一个Promise对象
let myPromise = new Promise((resolve, reject) => {
    // 异步操作，例如Ajax请求
    setTimeout(() => {
        let data = 'Promise resolved data';
        if (data) {
            resolve(data); // 异步操作成功，调用resolve并传递数据
        } else {
            reject('Promise rejected'); // 异步操作失败，调用reject并传递错误信息
        }
    }, 2000);
});
// 处理Promise对象的状态
myPromise.then((data) => {
    console.log('Promise resolved:', data); // 异步操作成功
}).catch((error) => {
    console.error('Promise rejected:', error); // 异步操作失败
});

在上面的示例中，首先创建了一个Promise对象myPromise，在Promise的executor函数中进行了一个模拟的异步操作，并根据操作结果调用resolve或reject方法。接着通过.then()方法处理异步操作成功的情况，通过.catch()方法处理异步操作失败的情况。这样可以清晰地表示异步操作的成功和失败，并链式调用不同的操作。

Promise 的构造函数

Promise构造函数是Promise的一个内置属性，用于创建一个新的Promise对象。它接受一个参数，这个参数是一个函数，也称为"executor"。

Promise构造函数的语法如下：

new Promise(executor);

其中，executor是一个函数，它接受两个参数resolve和reject，分别是两个回调函数，用于改变Promise对象的状态。

下面是一个简单的例子:

// 创建一个Promise对象
let myPromise = new Promise((resolve, reject) => {
    // 异步操作
    if (/* 异步操作成功 */) {
        resolve('操作成功'); // 使用resolve改变Promise对象的状态为fulfilled
    } else {
        reject('操作失败'); // 使用reject改变Promise对象的状态为rejected
    }
});

在上面的例子中，executor函数中包含了一个异步操作，根据操作的结果调用resolve或reject来改变Promise对象的状态。如果异步操作成功，则调用resolve方法并传递操作成功的结果；如果异步操作失败，则调用reject方法并传递错误信息。

需要注意的是，executor函数在创建Promise对象时立即执行，并且只会执行一次。在executor函数中进行的异步操作可能需要一些时间来完成，而Promise则会立即返回一个pending状态的对象，并在异步操作完成后改变状态。

Promise 使用

当然，下面是一个使用Promise的综合示例列表：

基本示例：创建一个简单的Promise对象，根据条件决定是解决还是拒绝Promise。

const myPromise = new Promise((resolve, reject) => {
    const condition = true;
    
    if (condition) {
        resolve("操作成功");
    } else {
        reject("操作失败");
    }
});
myPromise.then((message) => {
    console.log(message);
}).catch((error) => {
    console.error(error);
});

异步示例：模拟一个异步操作，并使用Promise来处理成功和失败的情况。

const asyncOperation = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true;
            if (success) {
                resolve("异步操作成功");
            } else {
                reject("异步操作失败");
            }
        }, 2000);
    });
};
asyncOperation().then((message) => {
    console.log(message);
}).catch((error) => {
    console.error(error);
});

Promise链：使用Promise链来依次执行多个异步操作。

const firstAsyncOperation = () => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("第一个异步操作完成");
        }, 1000);
    });
};
const secondAsyncOperation = () => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("第二个异步操作完成");
        }, 1500);
    });
};
firstAsyncOperation()
    .then((message) => {
        console.log(message);
        return secondAsyncOperation();
    })
    .then((message) => {
        console.log(message);
    });

这些是一些简单的Promise示例，展示了如何创建、使用和组合Promise对象来处理异步操作。

回答常见的问题（FAQ）

Q: then、catch 和 finally 序列能否顺序颠倒？

A: 可以，效果完全一样。但不建议这样做，最好按 then-catch-finally 的顺序编写程序。

Q: 除了 then 块以外，其它两种块能否多次使用？

A: 可以，finally 与 then 一样会按顺序执行，但是 catch 块只会执行第一个，除非 catch 块里有异常。所以最好只安排一个 catch 和 finally 块。

Q: then 块如何中断？

A: then 块默认会向下顺序执行，return 是不能中断的，可以通过 throw 来跳转至 catch 实现中断。

Q: 什么时候适合用 Promise 而不是传统回调函数？

A: 当需要多次顺序执行异步操作的时候，例如，如果想通过异步方法先后检测用户名和密码，需要先异步检测用户名，然后再异步检测密码的情况下就很适合 Promise。

Q: Promise 是一种将异步转换为同步的方法吗？

A: 完全不是。Promise 只不过是一种更良好的编程风格。

Q: 什么时候我们需要再写一个 then 而不是在当前的 then 接着编程？

A: 当你又需要调用一个异步任务的时候。

异步函数

在JavaScript中，异步函数可以通过async和await关键字来定义和使用。异步函数通常与Promise对象结合使用，以便处理异步操作并获取结果。下面我将详细解释异步函数的用法，并举例说明。

异步函数的定义

在JavaScript中，使用async关键字定义一个异步函数。异步函数可以包含异步操作，并在需要时暂停执行并等待结果。例如：

async function fetchData() {
    return fetch('https://api.example.com/data');
}

异步函数的调用

要调用异步函数并等待其结果，可以使用await关键字。await只能在异步函数内部使用，用于暂停函数的执行直到异步操作完成并返回结果。例如：

async function displayData() {
    const response = await fetchData();
    const data = await response.json();
    console.log(data);
}
displayData();

异步函数的错误处理

异步函数中发生的错误可以通过try...catch语句捕获和处理。例如：

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}
fetchData();

示例：

下面是一个简单的示例，演示了如何使用异步函数从API获取数据并显示在页面上：

async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
}
async function displayData() {
    try {
        const data = await fetchData();
        document.getElementById('result').innerText = JSON.stringify(data);
    } catch (error) {
        console.error('Error fetching and displaying data:', error);
    }
}
displayData();

以上就是JavaScript中异步函数的概念、定义和用法，

27 JavaScript学习：异步编程