JS 中的异步和 Promise 解释

注意：所有概念都是相互关联的，因此要了解一件事，您还需要了解其他概念

阻止代码

假设您的程序中有需要数年时间才能完成的循环。现在你有两个选择，要么继续前进，要么等待。如果您选择等待，那么它将被视为阻塞代码。如果没有那么你就没有选择了？让我们看看。

//blocking code
let sum = 0;
for(let i = 1;i<Number.MAX_SAFE_INTEGER;i++){
  for(let j = 1;j<Number.MAX_SAFE_INTEGER;j++){
      sum = i+j;
}
}
console.log(sum);
// above program is dummy and does not serve any purpose

现在，如您所见，在完成之前不会让运行低于它的程序。现在要运行总和，我们必须等待数年，用户可能会错过一些重要的事情（其他功能）。

为了绕过这种情况，我们可以将 for 和 console.log(sum) 放入某个可以与我们的代码并行运行的文件中，并等到我们给它一个绿色信号。这称为异步。异步代码与主代码并行运行，并且仅在主代码完成后运行。

如果异步代码中有另一个异步代码。直到外部完成后才会运行。

作业问题

以下程序的输出是什么？

• setInterval是一个内置的JS函数，用于间隔运行程序。

// will inner ever run ? if yes then why (ask gemini/gpt)
setInterval(()=>{
  console.log("outer");
  setInterval(()=>{
    console.log("inner");
  },1000)
},1000)

非阻塞代码

setTimeout(()=>{
   console.log("outer");
   setTimeout(()=>{
     console.log("inner");
     for(let i = 1;i<1000;i++){}
     console.log("inner finished");
   },0)
   console.log("outer finishes");
},0)
console.log("i will run first");

输出

i will run first
outer
outer finishes
inner
inner finished

注意：从上面的代码中，您可以发现外部块现在充当主代码，而内部块充当异步代码。

你甚至会看到console.log(“i will run first”)写在它首先运行的主代码之后。如何 ？这称为非阻塞或异步代码。它不会妨碍程序的主要功能。让您在应用程序中进行写入和读取等操作。

异步等待

await 关键字始终包含在异步函数中，并且在完成之前不会让其下面的其他代码执行。 async 和await 是密钥对。另一件事是，await 总是放在返回 Promise 的函数之前，并且总是将其包装在 try catch 块中。

async function myPromise(){
 try{
  await doSomething(); // a function that return promise
  console.log("Your file is successfully created"); //only runs when promise is accepted
  }
  catch(err){
   console.log(err); // if promised is rejected;
  }
}
myPromise();
console.log("first");

输出

# consider promise to be successful
first
Your file is successfully created

到目前为止的理解（结论）：

1. 函数返回的 Promise 总是封装在 async-await 中。
2. async-await 齐头并进。
3. 始终将await 包裹在try-catch 块中。 （如果没有请参考我的博客）
4. 现在，异步函数之外的程序将始终运行，无论它是否得到解决或拒绝，如上所示。 （这就是美丽？）
5. 现在让我们了解承诺

现在让我们从 Promise 的应用开始

1. API 请求 - 从另一台服务器获取数据
2. 文件操作 - 读写文件
3. 数据库查询 - 获取或写入数据

您是否在所有用例中发现了一些共同点？

是的，所有应用程序都需要时间来执行。

Promise 赋予我们超能力来充分处理这种情况。再次，Promise 和 async-await 齐头并进。

Promise 有 3 种状态（如上例所示）

• 已解决（如果是这样那么我们的文件创建成功就会运行）
• 被拒绝（catch 块中的代码将运行）
• 待处理（它将等待并且不会让任何代码在函数内运行）

让我们在 JS 中创建一个自定义的 Promise

返回 Promise 的函数外部的 async 关键字纯粹是可选的。请参阅下面的代码...

获取数据

// trying to mimic as a server response
function fetchData(success=false){
  return new Promise((resolve,reject)=>{
    if(success){
      setTimeout(()=>{
        resolve("fetched successfully");
      },5000) // execute after 5 sec
    }
    else
    reject("server is not responding");
  })
}
// lets consider fetchData is in-built function

主要

/* lets consider fetchData is a in-built function that gets data from other server. We are passing success para to just mimic the server otherwise it does not serve any purpose here.
*/
async function getData(){
  try{
    let result = await fetchData(true);
    console.log(result) //fetched successfully
  }
  catch(err){
    console.log(err); // in case of rejection
  }
}
getData();
// load other code

无论是否获取数据，其他代码也将运行。它提高了性能并提高了我们代码的质量。

参考

aryan 的错误处理

以上是JS 中的异步和 Promise 解释的详细内容。更多信息请关注PHP中文网其他相关文章！