Javascript的异步编程新视界，引领前端开发新格局

2024-01-12 00:45:07

Javascript的异步编程可以说在日常的前端业务开发中举足轻重，常见的异步编程有：回调函数、事件监听、Promise、Generator、Async/await。

回调函数

回调函数是指在异步操作完成后被调用的函数。回调函数通常作为参数传递给异步函数，并在异步操作完成后被调用。例如，以下代码使用回调函数来处理AJAX请求的结果：

function get_data(callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'data.json');
  xhr.onload = function() {
    if (xhr.status === 200) {
      callback(JSON.parse(xhr.responseText));
    } else {
      callback(null);
    }
  };
  xhr.send();
}

get_data(function(data) {
  if (data) {
    console.log(data);
  } else {
    console.log('Error loading data.');
  }
});

事件监听

事件监听是一种异步编程技术，用于监听特定事件的发生。当事件发生时，事件监听器函数会被调用。例如，以下代码使用事件监听器来监听按钮的点击事件：

document.getElementById('button').addEventListener('click', function() {
  console.log('Button clicked.');
});

Promise

Promise是一种异步编程技术，用于处理异步操作的结果。Promise对象可以处于三种状态之一：pending、fulfilled或rejected。当异步操作完成后，Promise对象的状态会改变，并且可以调用then()方法来处理结果。例如，以下代码使用Promise对象来处理AJAX请求的结果：

function get_data() {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'data.json');
    xhr.onload = function() {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(new Error('Error loading data.'));
      }
    };
    xhr.send();
  });
}

get_data().then(function(data) {
  console.log(data);
}, function(error) {
  console.log(error);
});

Generator

Generator是一种异步编程技术，用于创建可暂停和恢复的函数。Generator函数使用yield来暂停函数的执行，并且可以使用next()方法来恢复函数的执行。例如，以下代码使用Generator函数来生成斐波那契数列：

function* fibonacci() {
  var a = 0, b = 1;
  while (true) {
    var c = a + b;
    a = b;
    b = c;
    yield c;
  }
}

for (var n of fibonacci()) {
  if (n > 100) {
    break;
  }
  console.log(n);
}

Async/await

Async/await是一种异步编程技术，用于简化异步操作的处理。Async/await语法允许您使用同步的方式来编写异步代码。例如，以下代码使用Async/await语法来处理AJAX请求的结果：

async function get_data() {
  try {
    var response = await fetch('data.json');
    var data = await response.json();
    return data;
  } catch (error) {
    console.log(error);
  }
}

get_data().then(function(data) {
  console.log(data);
});