javascript 异步编程

Nino 发布于2019-08-23 18:33 / 338人阅读

摘要：执行栈清空后，检查微任务队列，将可执行的微任务全部执行。对象的错误具有冒泡性质，会一直向后传递，直到被捕获为止。返回的遍历器对象，可以依次遍历函数内部的每一个状态。表示函数里有异步操作，表示紧跟在后面的表达式需要等待结果。

javascript 是单线程执行的，由js文件自上而下依次执行。即为同步执行，若是有网络请求或者定时器等业务时，不能让浏览器傻傻等待到结束后再继续执行后面的js吧！所以js设计了异步模式！

下面是一个常见的定时器与promise的问题：

setTimeout(() => {
    console.log("我是第一个宏任务");
    Promise.resolve().then(() => {
        console.log("我是第一个宏任务里的第一个微任务");
    });
    Promise.resolve().then(() => {
        console.log("我是第一个宏任务里的第二个微任务");
    });
}, 0);

setTimeout(() => {
    console.log("我是第二个宏任务");
}, 0);

Promise.resolve().then(() => {
    console.log("我是第一个微任务");
});

console.log("执行同步任务");

执行结果如下：

为什么是这种执行结果？

这就要说到js的执行机制：事件循环（event loop）！

当JS解析执行时，会被引擎分为两类任务，同步任务（synchronous） 和 异步任务（asynchronous）。

对于同步任务来说，会被推到执行栈按顺序去执行这些任务。
对于异步任务来说，当其可以被执行时，会被放到一个任务队列（task queue）里等待JS引擎去执行。

当执行栈中的所有同步任务完成后，JS引擎才会去任务队列里查看是否有任务存在，并将任务放到执行栈中去执行，执行完了又会去任务队列里查看是否有已经可以执行的任务。这种循环检查的机制，就叫做事件循环(Event Loop)。

对于任务队列，其实是有更细的分类。其被分为微任务（microtask）队列 & 宏任务（macrotask）队列
宏任务: setTimeout、setInterval等，会被放在宏任务（macrotask）队列。
微任务: Promise的then、Mutation Observer等，会被放在微任务（microtask）队列。
1.首先执行执行栈里的任务。
2.执行栈清空后，检查微任务（microtask）队列，将可执行的微任务全部执行。
3.取宏任务（macrotask）队列中的第一项执行。
4.回到第二步。

现在我们知道了为什么定时器会晚于promise执行了。下面我们讨论一下微任务的几种实现情况：Promsie、Generator、async/await。

===Promsie===

Promise对象是一个构造函数，用来生成Promise实例；

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise 新建后就会立即执行。

let promise = new Promise(function(resolve, reject) {
  console.log("Promise");
  resolve();
});

promise.then(function() {
  console.log("resolved.");
});

console.log("Hi!");

// Promise
// Hi!
// resolved

Promise 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。

// bad
promise
  .then(function(data) {
    // success
  }, function(err) {
    // error
  });

// good
promise
  .then(function(data) { //cb
    // success
  })
  .catch(function(err) {
    // error
  });

跟传统的try/catch代码块不同的是，如果没有使用catch方法指定错误处理的回调函数，Promise 对象抛出的错误不会传递到外层代码，即不会有任何反应。

===Generator===

Generator 函数是一个状态机，封装了多个内部状态。
执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。

function* helloWorldGenerator() {
  yield "hello";
  yield "world";
  return "ending";
}

var hw = helloWorldGenerator();

===async===

async 函数是什么？一句话，它就是 Generator 函数的语法糖。

（1）内置执行器。

Generator 函数的执行必须靠执行器，所以才有了co模块，而async函数自带执行器。也就是说，async函数的执行，与普通函数一模一样，只要一行。

asyncReadFile();
上面的代码调用了asyncReadFile函数，然后它就会自动执行，输出最后结果。这完全不像 Generator 函数，需要调用next方法，或者用co模块，才能真正执行，得到最后结果。

（2）更好的语义。

async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。

（3）更广的适用性。

co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）。

（4）返回值是 Promise。

async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。

进一步说，async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。

云服务器超融合服务器 javascript异步编程异步编程 javascript异步函数 JavaScript异步机制

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

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

ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
Javascript中的异步编程

摘要：接下来，我们一起来看看中的异步编程，具体有哪几种。实现异步编程的方法一回调函数上面不止一次提到了回调函数。它是异步编程中，最基本的方法。四对象接下来，我们聊聊与相关的异步编程方法，对象。 showImg(https://segmentfault.com/img/bVbneWy?w=1600&h=1200); 前言最近，小伙伴S 问了我一段代码： const funB = (value...

wemall 2019-08-23 14:42 评论0 收藏0
JavaScript 异步

摘要：从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。写一个符合规范并可配合使用的写一个符合规范并可配合使用的理解的工作原理采用回调函数来处理异步编程。 JavaScript怎么使用循环代替(异步)递归问题描述在开发过程中，遇到一个需求：在系统初始化时通过http获取一个第三方服务器端的列表，第三方服务器提供了一个接口，可通过...

tuniutech 2019-08-21 18:34 评论0 收藏0
浅析JavaScript异步

摘要：回调函数，一般在同步情境下是最后执行的，而在异步情境下有可能不执行，因为事件没有被触发或者条件不满足。同步方式请求异步同步请求当请求开始发送时，浏览器事件线程通知主线程，让线程发送数据请求，主线程收到一直以来都知道JavaScript是一门单线程语言，在笔试过程中不断的遇到一些输出结果的问题，考量的是对异步编程掌握情况。一般被问到异步的时候脑子里第一反应就是Ajax，setTimse...

Tangpj 2019-08-26 13:53 评论0 收藏0
JavaScript异步编程解决方案笔记

摘要：异步编程解决方案笔记最近读了朴灵老师的深入浅出中异步编程一章，并参考了一些有趣的文章。另外回调函数中的也失去了意义，这会使我们的程序必须依赖于副作用。 JavaScript 异步编程解决方案笔记最近读了朴灵老师的《深入浅出NodeJS》中《异步编程》一章，并参考了一些有趣的文章。在此做个笔记，记录并巩固学到的知识。 JavaScript异步编程的两个核心难点异步I/O、事件驱动使得...

dmlllll 2019-08-21 10:37 评论0 收藏0
夯实基础-JavaScript异步编程

摘要：调用栈被清空，消息队列中并无任务，线程停止，事件循环结束。不确定的时间点请求返回，将设定好的回调函数放入消息队列。调用栈执行完毕执行消息队列任务。请求并发回调函数执行顺序无法确定。异步编程 JavaScript中异步编程问题可以说是基础中的重点，也是比较难理解的地方。首先要弄懂的是什么叫异步？我们的代码在执行的时候是从上到下按顺序执行，一段代码执行了之后才会执行下一段代码，这种方式...

shadowbook 2019-08-22 17:16 评论0 收藏0