您正在使用JavaScript吗?知道何时会异步
#javascript #promises #callback #asyncawait

您好,编码狂热者! ð如果您阅读本文,您很可能会听到JavaScript中使用的同步和异步。

但是它们到底是什么意思?它们如何塑造JavaScript的行为方式?它们如何影响我们编写代码的方式?我们如何优先考虑在代码中使用哪一个?这篇文章的目的是回答所有这些问题,

我们将在JavaScript中一起学习同步和异步编程,了解什么是回调和承诺,并探索它们如何帮助我们控制JavaScript的异步行为。

无论您是初学者还是掌握其JavaScript技能的人,我希望本文能够帮助您获得有关同步和异步编程的全面知识!所以让我们开始。

同步JavaScript

Synchronous JavaScript code.

JavaScript是一种单线程语言。这意味着它只能按照它们出现的顺序执行一个语句。此行为简单地称为同步编程。

这是一个基本示例:

console.log('First');
console.log('Second');
console.log('Third');

在此代码中,首先始终在第二次之前记录,第二次在第三章之前一直记录下来。这是同步JavaScript!

的示例

同步编程的局限性

同步编程更易于理解和使用,但它具有局限性。同步JavaScript具有显着的缺点 -

这是什么意思? ð¶如果一个操作(例如从API获取数据,查询数据库或读取文件)需要很长时间才能完成,那么它在其之后的一切都必须等待它完成。

想象一下排队等待轮到您。这就是JavaScript代码的工作原理。这可能会大大减慢您的代码执行并导致差的用户体验。

此外,网络请求,用户交互和计时器在现代网络上本质上是异步的。坚持同步编程可能会阻止您完全使用JavaScript的事件驱动性质。

异步JavaScript

在这种情况下,异步JavaScript可以大大节省我们的时间!异步JavaScript允许我们开始耗时的操作,继续执行下一个任务,然后返回原始操作。

为什么以及何时需要异步JavaScript?

JavaScript中的异步编程由于几个原因至关重要。首先,由于其事件驱动的性质,JavaScript本质上是异步的。这意味着诸如点击,鼠标运动和键盘按下等事件都不同步处理。

此外,诸如网络请求,阅读或写入文件系统之类的操作以及可能需要大量时间的大量计算也被异步处理。

在这些情况下,使用异步编程技术可以使您的应用程序在等待这些操作完成时继续处理其他任务。

以下是一些场景,在JavaScript中的异步编程将是有益的:

1 –拨打API调用:从API获取数据时,您不想在等待返回数据时阻止其余的代码。异步编程使您可以启动API调用,然后执行其他代码。从API返回数据后,您可以在应用程序中使用它。

就像您打开社交媒体帖子时一样,您不希望用户等到所有注释都可以查看帖子之前。一种异步方法允许帖子立即显示,并在重新获取时实时加载评论。

2 - 读取/写入数据库或文件系统:与API呼叫类似,涉及数据库或文件系统的操作可能需要一段时间才能完成。使用异步编程可以使您的应用程序在等待这些操作完成时继续运行其他任务。

考虑电子商务网站的产品页面。您需要立即加载主要产品详细信息,而基于用户行为或相关产品的建议可以异步加载,提供无缝的购物体验。

3图图像处理或重型计算:如果您执行重型计算或处理大图像,则异步编程可以防止这些操作阻止JavaScript应用程序。

4个事件驱动的编程: JavaScript中的许多事件,例如点击,鼠标移动,键盘按下等。这样,即使一个事件处理程序仍在处理,您的应用程序仍保持响应迅速,并准备处理其他用户操作。

回调

JavaScript Callback Code.

在JavaScript中,回调函数是作为参数传递给另一个函数的函数,并在完成某些操作后将执行。这是一个简单的例子:

function fetchData(callback) {
   // Simulate delay using setTimeout
   setTimeout(function() {
    console.log('Data fetched');
    callback();
   }, 2000);
  }

 function processData() {
   console.log('Processing data');
  }
  // Data fetched (after 2 seconds) -> Processing data
  fetchData(processData);

在此片段中,fetchData需要很长时间才能运行(2秒)。但是JavaScript不会停止。它继续前进,只有在完成fetchdata时才能运行processData。因此,我们不必等待fetchData在继续前进之前完成。这就是带有回调的异步JavaScript的力量!

但是,当您在回调内有回调时,回调可能会变得凌乱,这种情况幽默地称为“回调地狱”。幸运的是,JavaScript具有一种更干净的方式来处理这些情况。

承诺

JavaScript promises code example.

JavaScript中的承诺是代表可能尚不可用但将来某个时候解决或直接拒绝的对象。

从某种意义上说,承诺就像是在途中的交付 - 它可以成功到达(解决)或在运输中迷路(被拒绝)。

这里是一个例子:

let deliveryPromise = new Promise(function(resolve, reject) {
   // Simulate a delivery delay
   setTimeout(function() {
    let packageLost = false;
    if (!packageLost) {
     resolve('Package delivered!');
    } else {
     reject('Package lost');
    }
   }, 2000);
  });

  deliveryPromise.then(function(message) {
   console.log(message); // Package delivered! (after 2 seconds)
  }).catch(function(error) {
   console.log(error); // Package lost (if packageLost is true)
  });

在这个片段中,deliveryPromise是一个承诺。 2秒钟后,如果packageLost变量为false,则承诺通过发送的消息解决了!

如果packageLosttrue,它将被丢失的消息拒绝。我们使用then方法(用于分辨率)和catch方法(用于拒绝)来处理这些结果。

无论承诺得到解决还是拒绝,该怎么办?有finally方法。

deliveryPromise.finally(function() {
   console.log('End of delivery attempt');
 });

在这里,无论是解决还是拒绝deliveryPromise,邮件的结束尝试都将被记录。

锁定承诺

Chaining promises code example.

诺言的优点之一就是可以束缚它们。这意味着您可以链接多个诺言,并且它们将被一个接一个地执行。这是一个例子:

let cleanRoom = function() {
   return new Promise(function(resolve, reject) {
    resolve('Room cleaned');
   });
  };


  let removeGarbage = function(message) {
   return new Promise(function(resolve, reject) {
    resolve(message + ', garbage removed');
   });
  };


  let winIcecream = function(message) {
   return new Promise(function(resolve, reject) {
    resolve(message + ', won ice cream');
   });
  };


  cleanRoom().then(function(result){
   return removeGarbage(result);
  }).then(function(result){
   return winIcecream(result);
  }).then(function(result){
   console.log(result + ', finished');
  });

在此片段中,cleanRoomremoveGarbagewinIcecream是承诺。他们每个人都取决于之前的一个。注意我们如何保持可读性并避免臭名昭著的回调地狱。

异步/等待语法

JavaScript Async Await Example.

异步/等待语法 - 一种更简单的与JavaScript合作的方式。

为了进一步简化异步代码,ES2017引入了异步函数和等待的关键字。它提供了一种更加同步的方式来处理承诺。

这里是一个例子:

async function makeDelivery() {
   let message = await deliveryPromise;
   console.log(message);
 }
 makeDelivery(); // Package delivered! (after 2 seconds)

在此片段中,makeDelivery是一个异步函数。在其中,我们使用await关键字暂停函数执行,直到解决或拒绝deliveryPromise为止。如果解决了承诺,message将获得分辨率值。如果被拒绝,则会丢弃错误。

同步与异步编程

Synchronous Vs Asynchronous Programming

结论

JavaScript的力量不仅在于其功能,还在于其多功能性。

在理解异步编程,回调和承诺的情况下,您现在拥有编写非阻滞,有效的JavaScript代码的关键。请记住,实践是完美的。

因此,请继续尝试这些概念,并且您很快就会掌握JavaScript中异步性的艺术!

随时可以在TwitterLinkedIn上与我建立联系。

读下一篇