JavaScript 异步函数详解：获取数据的四种方式与代码实现

异步函数在JavaScript开发中应用广泛，主要用于执行非阻塞的数据处理操作。本文将探讨常见的异步函数类型，并重点解析如何从这些异步操作中获取数据。

异步函数

常规JavaScript函数按顺序依次执行，而异步函数会改变这一执行顺序。需要注意的是，异步任务必须在同步任务执行完毕后，从任务队列中依次取出并执行。

常见的异步函数主要包含以下四类：

• 回调函数
• Promise函数
• Generator函数
• Async/Await函数

1. 回调函数

回调函数通常作为参数传递给其他函数，并在函数内部被调用。常见的应用场景包括Ajax请求、setTimeout定时器和DOM事件回调等。

testA(cb) {
cb();
}
setTimeout(() => {
console.log('这是一个回调函数')
}, 100)

缺点：无法使用try...catch捕获错误，且不能直接通过return返回值。

Promise

Promise是一种特殊的异步处理对象，包含三种状态：pending（初始状态）、fulfilled/resolved（执行成功）和rejected（执行失败）。这三种状态一旦转换便不可逆转。

需要注意的是，Promise本身的执行是同步的，但其then方法中的回调内容是异步执行的：

let promiseFunc = new Promise((resolve, reject) => {
  // 执行同步代码
  resolve();
}).then((res) => {
  console.log(res)
},(err) => {
  console.log(err);
})

Generator函数

Generator函数是一种可以暂停执行（分段执行）的函数，函数名前需加星号。它本质上是一个状态机，封装了多个内部状态。

function *myTest() {
  yield 'I',
  yield 'am',
  yield 'queen'
}

Async/Await函数

在函数前添加async修饰符，该函数将返回一个Promise对象，并可链式调用then添加回调。await后跟随一个Promise或原始类型值（原始值会自动转换为立即resolved的Promise对象），程序会等待resolve的结果。若await后的Promise发生reject，整个async函数将中断，此时需使用try...catch来捕获错误。

async function myTest() {
  let val = await new Promise((resolve) => {
    resolve(1)
  });
}

如何获取异步函数的数据

从异步函数中获取数据主要采用三种方式：回调函数、Promise和Async/Await。

回调函数

使用回调函数获取数据非常简单，只需将数据作为参数传入回调函数即可。

function getData(cb) {
  let val = 'a';
  cb(val);
}

getData((data) => {
  console.log(data);   // 'a'
})

Promise

利用Promise处理异步时，主要通过resolve的成功回调和reject的失败回调来获取数据。

let promiseFunc = new Promise((resolve, reject) => {
  let n = Math.random();
  if (n >= 0.7) {
    resolve(n);
  } else {
    reject(`${n}小于0.7`)
  }
});
promiseFunc.then((data) => {
  console.log(data);   // 0.3小于0.7
})

Async/Await

async用于将函数转换为异步函数，await用于等待异步操作完成。注意await必须写在async函数内部。

async function myTest() {
  return '我是测试数据'
};
async function getData() {
  let val = await myTest();
  console.log(val);   // 我是测试数据
}

至此，关于JavaScript获取异步函数数据的实现介绍完毕。如需了解更多相关内容，请搜索本站往期文章或继续浏览后续文章，感谢支持！