javascript异步编程

1. 基本概念

异步编程是一种编程范式，用于处理在程序执行过程中无法立即完成的任务。在异步编程中，任务的执行不会阻塞程序的执行流程，而是在后台进行，并在完成后触发相应的处理。异步编程通常用于处理需要等待I/O操作（例如文件读取、网络请求等）或其他长时间运行的操作（例如计算密集型任务）的情况。通过使用异步编程，程序可以继续执行其他任务或响应用户输入，而不必等待耗时的操作完成。

2. 解决方案

对于实现异步操作在javascript中有很多方式。

1. 回调函数：回调函数是最常见的异步编程模式之一。你可以将一个函数作为参数传递给另一个函数，在异步操作完成后执行。这种方式的缺点是，当异步操作很多或者嵌套时，代码可读性和维护性会变差，形成所谓的“回调地狱”。

// 它接受一个回调函数作为参数。这个函数模拟了一个异步操作（使用 setTimeout）。
function doSomethingAsync(callback) {
// 在指定时间（1000毫秒，即1秒）后执行回调函数，并将字符串 "异步操作完成" 作为参数传给callback函数。
  setTimeout(() => {
    callback("异步操作完成");
  }, 1000);
}

doSomethingAsync(result => {
  console.log(result); // 输出: 异步操作完成
});

1. Promise对象：

它代表了一个尚未完成但预期将来会完成的操作的最终结果。 Promise 对象有三种状态：

• Pending（进行中）：初始状态，既不是成功，也不是失败。
• Fulfilled（已成功）：意味着操作成功完成。
• Rejected（已失败）：意味着操作失败。

Promise 对象可以通过 new Promise() 构造函数创建，它接受一个参数，即执行器（executor）函数。执行器函数有两个参数，分别是 resolve 和 reject 函数，当状态为Fulfilled时调用**resolve函数。当出现错误时采用reject**函数返回错误。

Promise实例采用promise.then()它接收一个回调函数作为参数。采用promise.catch()捕获执行过程中错误。

function delay(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("成功完成延时操作");
    }, ms);
  });
}

delay(1000).then(result => {
  console.log(result); // 输出: 成功完成延时操作
}).catch(error => {
  console.error(error);
});

1. Async/Await：Async/Await是ES2017中引入的异步编程语法糖，它建立在Promise之上，async 关键字用于声明一个异步函数，await 关键字可以暂停函数的执行，等待一个 Promise 解决（resolved）

async function asyncFunction() {
  const result = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("异步操作完成");
    }, 1000);
  });
  console.log(result); // 输出: 异步操作完成
}

asyncFunction();

1. 事件监听（Event Listeners）：在异步操作完成时触发一个事件，并监听该事件以执行相应的操作。

// 为id为myButton的元素添加一个监听，当被点击时只需操作
document.getElementById('myButton').addEventListener('click', function() {
    // 异步操作
    setTimeout(function() {
        console.log('Button clicked.');
    }, 1000);
});

3. 关键字

yield 是一个关键字，通常在生成器函数（Generator Function）中使用。生成器函数是一种特殊类型的函数，它可以暂停执行并在需要时恢复执行。yield 关键字用于将执行控制权返回给调用者，并返回一个值。每次调用生成器函数时，它都会执行到下一个 yield 关键字为止。

function* generatorFunction() {
    yield 1;
    yield 2;
    yield 3;
}

let generator = generatorFunction();

console.log(generator.next().value); // 输出: 1
console.log(generator.next().value); // 输出: 2
console.log(generator.next().value); // 输出: 3

4. 错误处理

在异步操作中进行错误处理是非常重要的，因为异步操作可能会失败并且可能导致程序中断或不正确的行为。以下是一些常用的异步操作中的错误处理方法：

1. 使用回调函数的错误优先风格（Error-first Callbacks）：在传统的回调函数中，通常约定第一个参数用于传递错误对象（如果有错误的话），而第二个参数用于传递结果或数据。在处理回调函数时，首先检查错误对象是否存在，然后再处理结果数据。

function fetchData(callback) {
    // 异步操作
    if (error) {
        callback(new Error('Failed to fetch data'));
    } else {
        callback(null, data);
    }
}

fetchData(function(err, result) {
    if (err) {
        console.error('Error:', err.message);
    } else {
        console.log('Data:', result);
    }
});

1. Promise对象的错误处理：使用Promise时，可以使用 catch() 方法来处理异步操作中的错误。Promise会在发生错误时自动将错误传递给 catch() 方法。

let promise = new Promise(function(resolve, reject) {
    // 异步操作
    if (error) {
        reject(new Error('Failed to fetch data'));
    } else {
        resolve(data);
    }
});

promise.then(function(result) {
    console.log('Data:', result);
}).catch(function(error) {
    console.error('Error:', error.message);
});

1. Async/Await的错误处理：在使用 async/await 时，可以使用 try...catch 块来捕获异步操作中的错误。在 async 函数内部使用 await 关键字时，如果发生错误，会抛出一个异常，可以通过 try...catch 块来捕获并处理。

async function fetchData() {
    try {
        let result = await someAsyncOperation();
        console.log('Data:', result);
    } catch (error) {
        console.error('Error:', error.message);
    }
}
fetchData();

实例讲解

1. 回调函数

假设我们有一个函数用于从服务器获取用户数据，获取成功后会调用回调函数，获取失败时会传递错误信息给回调函数。

// 回调函数的定义
function getUserDataFromServer(userId, callback) {
  setTimeout(() => {
    const userData = { id: userId, name: 'John Doe', age: 30 };
    if (userId <= 0) {
      callback(new Error('Invalid user ID'));
    } else {
      callback(null, userData);
    }
  }, 1000);
}

// 回调函数的使用
getUserDataFromServer(1, (err, userData) => {
  if (err) {
    console.error('Error:', err.message);
  } else {
    console.log('User Data:', userData);
  }
});

在这个示例中，getUserDataFromServer 函数接受一个 userId 和一个回调函数作为参数。它使用 setTimeout 模拟了一个异步操作，然后根据 userId 是否合法来调用回调函数并传递相应的数据或错误信息。

2. Promise

假设我们有一个函数用于从服务器获取用户数据，并返回一个Promise对象。

// Promise的创建和使用
function getUserDataFromServer(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const userData = { id: userId, name: 'John Doe', age: 30 };
      if (userId <= 0) {
        reject(new Error('Invalid user ID'));
      } else {
        resolve(userData);
      }
    }, 1000);
  });
}

// Promise实例的使用
getUserDataFromServer(1)
  .then(userData => {
    console.log('User Data:', userData);
  })
  .catch(error => {
    console.error('Error:', error.message);
  });

在这个示例中，getUserDataFromServer 函数返回一个 Promise 对象，用于处理异步操作。在异步操作完成时，通过调用 resolve 或 reject 方法来指示操作的成功或失败。然后，我们使用 then() 方法来处理成功的情况，使用 catch() 方法来处理失败的情况。

3. Async/Await

假设我们使用async/await语法糖来简化异步操作的处理。

// 使用async/await处理异步操作
async function fetchUserData() {
  try {
    const userData = await getUserDataFromServer(1);
    console.log('User Data:', userData);
  } catch (error) {
    console.error('Error:', error.message);
  }
}

fetchUserData();

在这个示例中，fetchUserData 函数使用 async 关键字声明为异步函数。在函数内部，我们使用 await 关键字来等待 getUserDataFromServer 函数返回的 Promise 对象的解析。这使得异步代码看起来更像同步代码，更易于理解。

4. 事件监听

假设我们有一个按钮，当用户点击按钮时，会触发一个事件。

htmlCopy code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Event Listener Example</title>
</head>
<body>
  <button id="myButton">Click me</button>
  <script>
    // 事件监听的使用
    document.getElementById('myButton').addEventListener('click', function() {
      console.log('Button clicked.');
    });
  </script>
</body>
</html>

在这个示例中，我们使用 addEventListener 方法为按钮元素添加了一个点击事件监听器。当用户点击按钮时，触发点击事件，执行匿名函数内的代码，控制台将输出 'Button clicked.'。

总结

异步操作是编程中处理非即时任务的一种机制，它允许程序在等待一个长时间运行的操作（如网络请求、文件读写等）完成时继续执行其他任务。在JavaScript中，异步操作通常通过Promise对象、async/await语法以及回调函数来实现。这些方法提供了一种管理异步任务的方式，使得代码逻辑更加清晰，避免了回调地狱，并且能够更好地处理错误和异常。异步编程是现代Web开发中不可或缺的一部分，它提高了应用程序的响应性和用户体验。

实践作业

任务要求：

1. 创建一个模拟的用户登录函数，用于验证用户身份。
2. 使用不同的异步编程方法实现该登录函数：回调函数、Promise、Async/Await。
3. 在每种方法中实现错误处理，处理无效用户。

参考答案：

1. 使用回调函数

javascriptCopy code
// 模拟用户登录函数（使用回调函数）
function loginWithCallback(username, password, callback) {
  setTimeout(() => {
    if (username === 'user' && password === 'password') {
      callback(null, '登录成功');
    } else {
      callback(new Error('用户名或密码错误'), null);
    }
  }, 1000);
}

// 使用示例
loginWithCallback('user', 'password', (err, message) => {
  if (err) {
    console.error('Error:', err.message);
  } else {
    console.log('Message:', message);
  }
});

1. 使用Promise

javascriptCopy code
// 模拟用户登录函数（使用Promise）
function loginWithPromise(username, password) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (username === 'user' && password === 'password') {
        resolve('登录成功');
      } else {
        reject(new Error('用户名或密码错误'));
      }
    }, 1000);
  });
}

// 使用示例
loginWithPromise('user', 'password')
  .then(message => {
    console.log('Message:', message);
  })
  .catch(error => {
    console.error('Error:', error.message);
  });

1. 使用Async/Await

javascriptCopy code
// 模拟用户登录函数（使用Async/Await）
async function loginWithAsyncAwait(username, password) {
  try {
    const message = await loginWithPromise(username, password);
    console.log('Message:', message);
  } catch (error) {
    console.error('Error:', error.message);
  }
}

// 使用示例
loginWithAsyncAwait('user', 'password');