likes
comments
collection
share

JavaScript中的异步编程

作者站长头像
站长
· 阅读数 16

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

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

实现异步编程的方式

  • 回调函数(Callbacks) ：最基本的异步编程模式，常用于处理异步操作的结果，如Ajax请求的响应。
  • Promise：ES6引入，提供了一种更清晰的异步操作处理方式，支持链式调用。
  • Async/Await：ES8特性，简化Promise的使用，使异步代码看起来更接近同步代码。
  • 事件监听(Event listeners) ：用于响应特定事件，如用户交互或定时器触发，遵循订阅-发布模式。
  • Generator函数：通过yield关键字暂停和恢复函数执行，结合Promise可以处理复杂的异步流程。

异步编程的常见使用场景

  • 网络请求：使用异步操作处理Ajax、Fetch等网络请求，避免阻塞主线程。
  • 文件I/O：异步读写文件，提高程序性能。
  • 定时器：非阻塞执行，使用setTimeout和setInterval。
  • 事件处理：响应用户事件，如点击、滚动等，保持界面响应性。
  • 数据流处理：异步处理流式数据，如视频、音频。
  • 任务队列：在Web Worker或Node.js中异步执行耗时任务，减轻主线程负担。
  • 消息队列：用于服务间异步通信，解耦组件。
  • 数据库操作：异步进行数据库交互，避免阻塞。
  • 复杂计算：异步执行机器学习或数据分析，保障用户体验。

回调函数详解

  • 特点：

    • 异步操作处理：如Ajax请求、定时器等。
    • 事件处理：响应特定事件触发。
    • 数据传递：传递数据给回调函数进行处理。

  • 使用场景：

    • Ajax请求：使用回调函数处理服务器响应。
    • 事件处理：响应用户交互事件。
    • 定时器：执行延时操作。
    • 文件I/O：处理文件读写结果。

使用场景

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请求完成后执行特定的操作。

示例

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对象
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) => {
    // 异步操作
    const condition = true;
    if (condition) {
        resolve('操作成功'); // 使用resolve改变Promise对象的状态为fulfilled
    } else {
        reject('操作失败'); // 使用reject改变Promise对象的状态为rejected
    }
});

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

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

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对象来处理异步操作。

常见问题

  • 多次使用finally和then：可以，catch建议使用一次。
  • 中断then块：通过throw到catch实现。
  • 何时使用Promise：需要顺序执行多个异步操作时。
  • Promise的本质：不是将异步转换为同步，而是改进了异步编程的风格。
  • 何时写额外的then：当你需要调用另一个异步任务时。

异步函数

在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 应对 I/O 密集型任务的核心，通过合理选择和使用上述异步编程方式，可以显著提升应用性能和用户体验。无论是传统的回调函数，还是现代的 Promise 和 Async/Await，都是开发高效、响应式应用不可或缺的工具。

转载自:https://juejin.cn/post/7392490560273596416
评论
请登录