JS经常使用的几种异步流程掌握

2024年5月23日 148次阅读 来源: 大海怪

JavaScript引擎是基于单线程 (Single-threaded) 事宜轮回的观点构建的，统一时刻只许可一个代码块在实行，所以须要跟踪行将运转的代码，那些代码被放在一个使命行列 (job queue) 中，每当一段代码预备实行时，都会被增加到使命行列中。每当JavaScript引擎中的一段代码完毕实行，时刻轮回 (event loop) 会实行行列中的下一个使命，它是 JavaScript 引擎中的一段顺序，担任监控代码实行并治理使命行列。

请记着，行列中的使命会从第一个一向实行到最后一个。

事宜模子

JavaScript最基本的异步编程情势（比方点击事宜、键盘事宜）
直到事宜触发时才实行处置惩罚顺序

回调形式

回调形式与事宜模子相似，异步代码都会在将来的某个时刻点实行，而这的区别是回调形式中被挪用的函数是作为参数传入的。
Node.js读取磁盘上的文件：

readFile('example.txt', function(err, contents) {
  if(err) {
    throw err
  }
  
  console.log(contents)
})

console.log('Hi!')

挪用readFile函数后，console.log(‘Hi!’)语句会马上实行，当readFile完毕实行的时刻，会向使命行列的末端增加一个新使命，该使命包括回调函数及响应的参数。

虽然这个形式运转效果很不错，然则假如嵌套了太多的回调函数，就会堕入回调地狱。

当须要跟踪多个回调函数的时刻，回调函数的局限性就体现出来了，Promise非常好的改进了这些状况。

Promise

Promise 对象是一个代办对象（代办一个值），被代办的值在Promise对象建立时多是未知的。它许可你为异步操纵的胜利和失利离别绑定响应的处置惩罚要领（handlers）。 这让异步要领能够像同步要领那样返回值，但并非马上返回终究实行效果，而是一个能代表将来涌现的效果的promise对象

一个 Promise有以下几种状况:

pending: 初始状况，既不是胜利，也不是失利状况。
fulfilled: 意味着操纵胜利完成。
rejected: 意味着操纵失利。

pending 状况的 Promise 对象能够触发fulfilled 状况并通报一个值给响应的状况处置惩罚要领，也能够触发失利状况（rejected）并通报失利信息。当个中任一种状况涌现时，Promise 对象的 then 要领绑定的处置惩罚要领（handlers ）就会被挪用（then要领包括两个参数：onfulfilled 和 onrejected，它们都是 Function 范例。当Promise状况为fulfilled时，挪用 then 的 onfulfilled 要领，当Promise状况为rejected时，挪用 then 的 onrejected 要领， 所以在异步操纵的完成和绑定处置惩罚要领之间不存在合作）。

由于 Promise.prototype.then 和 Promise.prototype.catch 要领返回promise 对象， 所以它们能够被链式挪用。

var promise1 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('foo');
  }, 300);
});

promise1.then(function(value) {
  console.log(value);
  // expected output: "foo"
});

console.log(promise1);
// expected output: [object Promise]

async/await

当挪用一个 async 函数时，会返回一个 Promise 对象。当这个 async 函数返回一个值时，Promise 的 resolve 要领会担任通报这个值；当 async 函数抛出非常时，Promise 的 reject 要领也会通报这个非常值。

async 函数中能够会有 await 表达式，这会使 async 函数停息实行，守候 Promise 的效果出来，然后恢复async函数的实行并返回剖析值（resolved）。

注重， await 关键字仅仅在 async function中有用。假如在 async function函数体外运用 await ，你只会获得一个语法错误（SyntaxError）。

async function testAsync() {
    return "Hello";
}

const testResult = testAsync();
console.log(testResult); //Promise { 'Hello' }

testAsync().then(v => {
    console.log(v);    // 输出 Hello
});

//运用await
async function testAsnync1() {
    let result = await testAsync();
    console.log(result); // Hello
}

参考

Promise() | MDN
《深切明白ES6》

    原文作者：大海怪
    原文地址: https://segmentfault.com/a/1190000018272027
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞