JS常用的几种异步流程控制

Barry_Ng 发布于2019-08-23 15:29 / 935人阅读

摘要：虽然这个模式运行效果很不错，但是如果嵌套了太多的回调函数，就会陷入回调地狱。当需要跟踪多个回调函数的时候，回调函数的局限性就体现出来了，非常好的改进了这些情况。

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》

GPU云服务器云服务器 js的几种数据类型 js缓存的几种方法 js继承的几种方式最基本的几种

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102118.html

2018年5月前端面试题

摘要：在上家公司裸辞之后，经过一段时间休整，月中下旬面试了一些公司，由于本人框架使用的是，所以面试题涉及到框架的都是，现将面试题整理一下列举常用的特性。事件冒泡以及事件捕获。其他前端分页和后端分页优缺点。包含多个子节点及孙节点，遍历。在上家公司裸辞之后，经过一段时间休整，5月中下旬面试了一些公司，由于本人框架使用的是vue，所以面试题涉及到框架的都是vue，现将面试题整理一下： es6 ...

wwolf 2019-08-26 11:55 评论0 收藏0
2018年5月前端面试题

摘要：在上家公司裸辞之后，经过一段时间休整，月中下旬面试了一些公司，由于本人框架使用的是，所以面试题涉及到框架的都是，现将面试题整理一下列举常用的特性。事件冒泡以及事件捕获。其他前端分页和后端分页优缺点。包含多个子节点及孙节点，遍历。在上家公司裸辞之后，经过一段时间休整，5月中下旬面试了一些公司，由于本人框架使用的是vue，所以面试题涉及到框架的都是vue，现将面试题整理一下： es6 ...

Lavender 2019-08-02 10:35 评论0 收藏0
一名【合格】前端工程师的自检清单

摘要：在他的重学前端课程中提到到现在为止，前端工程师已经成为研发体系中的重要岗位之一。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。一基础前端工程师吃饭的家伙，深度广度一样都不能差。开篇前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。 winter在他的《重学前端》课程中提到：到现在为止，前端工程师已经成为研...

罗志环 2019-08-23 17:08 评论0 收藏0
一名【合格】前端工程师的自检清单

摘要：在他的重学前端课程中提到到现在为止，前端工程师已经成为研发体系中的重要岗位之一。大部分前端工程师的知识，其实都是来自于实践和工作中零散的学习。一基础前端工程师吃饭的家伙，深度广度一样都不能差。开篇前端开发是一个非常特殊的行业，它的历史实际上不是很长，但是知识之繁杂，技术迭代速度之快是其他技术所不能比拟的。 winter在他的《重学前端》课程中提到：到现在为止，前端工程师已经成为研发体系...

isaced 2019-05-21 19:50 评论0 收藏0
前端基础

摘要：谈起闭包，它可是两个核心技术之一异步基于打造前端持续集成开发环境本文将以一个标准的项目为例，完全抛弃传统的前端项目开发部署方式，基于容器技术打造一个精简的前端持续集成的开发环境。这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。不论你是javascript新手还是老鸟，不论是面试求职，还是日...

graf 2019-08-21 18:38 评论0 收藏0