JS异步执行结果获取的3种解决方式

下面我为你详细讲解“JS异步执行结果获取的3种解决方式”的完整攻略。

什么是异步执行？

异步执行是指 JavaScript 引擎在执行代码时，遇到需要等待的任务时不会阻塞当前执行流程，而是将该任务挂起，通过异步调用机制继续执行后面的代码，等待该任务完成后再返回到前面被挂起的位置继续执行。

常见的异步任务包括：Ajax，定时器，事件回调函数等。

异步执行结果获取的问题

由于异步执行的特性，导致在异步任务执行过程中，结果并不能立刻获取。如下面这段异步代码：

function getData(callback) {
  setTimeout(function() {
    callback('data');
  }, 1000);
}

var data = getData(function(result) {
  console.log(result);
});
console.log(data);

在该例子中，调用 getData 方法后，它会异步执行 setTimeout 方法，并不会阻塞后面的代码执行，所以在 .getData 方法执行完毕后，打印的数据为 undefined，console.log(result) 的内容为 data。这就是异步执行导致的结果无法立即获取的问题。

解决异步执行结果获取问题的三种方式

回调函数

回调函数是一种广泛应用的解决异步编程的方式。通过在执行异步操作时指定一个回调函数，等异步操作完成后调用该回调函数返回结果。

function getData(callback) {
  setTimeout(function() {
    callback('data');
  }, 1000);
}
getData(function(data) {
  console.log(data);
})

在这个例子中，我们将 console.log(result) 封装到了 getData 函数中，在 setTimeout 执行完后，通过传递的回调函数将结果返回。

Promise

Promise 是 ES2015 中新增的语法，它是对回调函数的一种更优雅的实现方式。Promise 实例具有 pending（等待）、fulfilled（成功）和 rejected（失败）三种状态。

function getData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('data');
    }, 1000);
  })
}
getData()
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.log(error);
  });

在这个例子中，我们创建了一个 Promise 对象，并在异步操作完成后通过 resolve 方法返回结果。在后面的调用中，通过 then 方法接收到 resolve 返回的结果，并打印出来。

async/await

async/await 是 ES2017 中新增的语法，它是一种更为优雅的异步编程方式。

async/await 结合 Promise 实际上是一个更优雅的 Promise 写法。async/await 它最大的优势是可以将异步代码写成同步形式，代码更加简洁易懂。

function getData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('data');
    }, 1000);
  })
}
async function getResult() {
  var data = await getData();
  console.log(data);
}
getResult();

在这个例子中，我们在函数前面加上了 async 关键字，并在内部通过 await 操作符等待异步操作完成，再通过打印 data 的方式获取结果。

示例说明

回调函数示例

下面的例子是一个通过 jQuery.ajax 发送异步请求，使用回调函数处理返回结果的示例：

$.ajax({
  url: 'http://example.com',
  method: 'GET',
  success: function(result) {
    console.log(result);
  },
  error: function(error) {
    console.log(error);
  }
});

在这个例子中，我们通过 $.ajax 发送了一个异步请求，指定了 success 和 error 回调函数。

async/await 示例

下面的例子是一个通过 Fetch API 发送异步请求，使用 async/await 处理返回结果的示例：

async function getData() {
  var response = await fetch('http://example.com');
  var result = await response.json();
  console.log(result);
}
getData();

在这个例子中，我们使用了 Fetch API 发送异步请求，并在内部通过使用 await 操作符等待结果，最后打印返回数据。