当前位置：首页 > JavaScript

js原生实现异步

2026-04-07 15:59:54JavaScript

原生 JavaScript 实现异步的方法

回调函数（Callback）

回调函数是 JavaScript 中最基础的异步实现方式。通过将函数作为参数传递给另一个函数，在异步操作完成后调用该回调函数。

function fetchData(callback) {
  setTimeout(() => {
    callback('Data fetched');
  }, 1000);
}

fetchData((data) => {
  console.log(data); // 输出: Data fetched
});

Promise

Promise 是 ES6 引入的异步解决方案，比回调函数更易于管理和避免回调地狱。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 1000);
  });
}

fetchData()
  .then((data) => {
    console.log(data); // 输出: Data fetched
  })
  .catch((error) => {
    console.error(error);
  });

async/await

async/await 是 ES8 引入的语法糖，基于 Promise，使异步代码看起来像同步代码。

async function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 1000);
  });
}

async function main() {
  try {
    const data = await fetchData();
    console.log(data); // 输出: Data fetched
  } catch (error) {
    console.error(error);
  }
}

main();

事件监听（Event Listeners）

通过事件监听实现异步，常用于 DOM 事件或自定义事件。

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

setTimeout 和 setInterval

setTimeout 和 setInterval 是 JavaScript 内置的定时器函数，用于延迟执行或周期性执行代码。

setTimeout(() => {
  console.log('Executed after 1 second');
}, 1000);

setInterval(() => {
  console.log('Executed every 1 second');
}, 1000);

XMLHttpRequest

XMLHttpRequest 是早期的 AJAX 实现方式，用于与服务器交互。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

Fetch API

Fetch API 是现代浏览器提供的更简洁的 AJAX 实现方式，基于 Promise。

fetch('https://api.example.com/data')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

Web Workers

Web Workers 允许在后台线程中运行脚本，避免阻塞主线程。

js原生实现异步

const worker = new Worker('worker.js');
worker.onmessage = (event) => {
  console.log('Message from worker:', event.data);
};
worker.postMessage('Start working');