我如何使用回调，承诺和异步/等待异步JavaScript工作？-js教程-PHP中文网

我如何使用回调，承诺和异步/等待异步JavaScript工作？

使用回调使用异步JavaScript

回调是处理JavaScript中异步操作的最基本方法。回调是作为参数传递给另一个函数的函数，然后在异步操作完成后执行。此“后”部分至关重要，因为异步操作不会阻止主线程。

让我们考虑一个简单的示例，说明从API获取数据：

 <code class="javascript">function fetchData(url, callback) { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onload = function() { if (xhr.status >= 200 && xhr.status  { if (err) { console.error('Error fetching data:', err); } else { console.log('Data fetched:', data); } });</code>

登录后复制

在此示例中， fetchData是一个异步函数。一旦获取数据（或发生错误），将执行callback函数。该回调会收到两个参数：错误对象（或null如果成功）（如果发生错误，则为null ）。这种模式虽然功能性，但在处理多个异步操作时，可以通过深度嵌套的回调导致“回调地狱”。

使用Promises使用异步JavaScript

承诺为处理异步操作提供了一种更加结构化和更干净的方式。承诺代表异步操作的最终结果，该结果可以是解决值或拒绝的原因（错误）。

 <code class="javascript">function fetchDataPromise(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onload = function() { if (xhr.status >= 200 && xhr.status  console.log('Data fetched:', data)) .catch(err => console.error('Error fetching data:', err));</code>

登录后复制

在这里， fetchDataPromise返回了诺言。 .then()方法处理已解决的值（成功），并且.catch()方法处理拒绝的原因（错误）。承诺使异步代码易于阅读和维护，从而避免了回调的嵌套问题。

使用异步/等待的异步JavaScript使用

异步/等待基于承诺，为编写异步代码提供了更同步的样式。 async关键字声明了异步功能，并且await关键字暂停了执行，直到承诺解决。

 <code class="javascript">async function fetchDataAsync(url) { try { const response = await fetch(url); if (!response.ok) { throw new Error(`Request failed with status ${response.status}`); } const data = await response.json(); return data; } catch (err) { console.error('Error fetching data:', err); throw err; // Re-throw the error for handling further up the call stack } } fetchDataAsync('https://api.example.com/data') .then(data => console.log('Data fetched:', data)) .catch(err => console.error('Error handling:', err));</code>

登录后复制

fetchDataAsync是一种异步功能。 await等待fetch承诺在继续前进。 try...catch块处理潜在错误。异步/等待使异步代码像同步代码一样读取，从而显着增强可读性和可维护性。

在JavaScript中处理异步操作时，回调，承诺和异步/等待异步之间的关键区别是什么？

回调是最基本的方法，由于嵌套结构而遭受“回调地狱”的困扰。 Promises使用.then()和.catch()提供更结构化的方式，从而提高了可读性。异步/等待基于承诺，使用async和await的方式提供了更清洁的，类似于同步的语法，从而进一步提高了可读性和可维护性。异步/等待不会从根本上改变异步操作的处理方式；它是在承诺之上建立的句法糖。关键区别在于代码的编写及其可读性，而不是基本机制。

如何在不同方案中管理异步JavaScript代码的最佳方法（回调，承诺或异步等待）？

回调：通常避免使用旧版代码或非常简单的方案。复杂性迅速通过多个异步操作升级。
承诺：对于大多数异步操作而言，是一个不错的选择。他们提供了一种结构化且易于管理的方法来处理异步代码，尤其是在处理多个链式操作时。
异步/等待：大多数现代JavaScript项目的首选方法。它增强了可读性，并使异步代码易于理解和维护，尤其是在复杂的情况下。但是，它依赖于引擎盖下的承诺。