这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天

异步函数async function

async关键字用于声明一个异步函数

• async是asynchronous单词的缩写，异步、非同步; .
• sync是synchronous单词的缩写，同步、同时;

async异步函数可以有很多种写法:

//异步函数
async function foo() {}
const bar = async function() {}
const bar = async () => {}
class Person {
  async running() {}
}

异步函数的执行流程

//返回值的区别
//异步函数
async function foo() {
  //1.返回一个普通的值
  // -> Promise.resolve(321)
  return 321

  //2.返回一个Promise
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("aaa")
    }, 2000)
  })
}

//3. 返回一个thenable对象
return {
  then: function(resolve, reject) {
    reslove("bbb")
  }
}
foo().then(res => {
  console.log("res:", res)
})

• 异步函数的内部代码执行过程和普通的函数是一致的， 默认情况下也是会被同步执行。
• 异步函数有返回值时，和普通函数会有区别:
  • 情况一: 异步函数也可以有返回值，但是异步函数的返回值相当于被包裹到Promise.resolve中;
  • 情况二: 如果我们的异步函数的返回值是Promise，状态由会由Promise决定;
  • 情况三: 如果我们的异步函数的返回值是一个对象并且实现了thenable，那么会由对象的then方法来决定;
• 如果我们在async中抛出了异常，那么程序它并不会像普通函数一样报错，而是会作为Promise的reject来传递

await关键字

• async函数另外一个特殊之处就是可以在它内部使用await关键字，而普通函数中是不可以的。
• await关键字特点:
  • 通常使用await是后面会跟上一个表达式，这个表达式会返回一个Promise;
  • 那么await会等到Promise的状态变成fuflilled状态，之后继续执行异步函数;

进程和线程

• 线程和进程是操作系统中的两个概念:
  • 进程(process) : 计算机已经运行的程序，是操作系统管理程序的一种方式；
  • 线程(thread) : 操作系统能够运行运算调度的最小单位，通常情况下它被包含在进程中；
• 听起来很抽象，这里给出coderwhy老师的解释:
  • 进程: 我们可以认为，启动一个应用程序，就会默认启动一个进程(也可能是多个进程) ；
  • 线程: 每一个进程中，都会启动至少一个线程用来执行程序中的代码，这个线程被称之为主线程；
  • 所以我们也可以说进程是线程的容器;
• 再用一个形象的例子解释:
  • 操作系统类似于一个大工厂；
  • 工厂中里有很多车间，这个车间就是进程；
  • 每个车间可能有一个以上的工人在工厂，这个工人就是线程；

操作系统的工作方式

• 操作系统是如何做到同时让多个进程(边听歌、边写代码、边查阅资料)同时工作呢?
  • 这是因为CPU的运算速度非常快，它可以快速的在多个进程之间迅速的切换;
  • 当我们进程中的线程获取到时间片时，就可以快速执行我们编写的代码;
  • 对于用户来说是感受不到这种快速的切换的;

浏览器的JavaScript线程

• 我们经常会说JavaScript是单线程 (可以开启workers) 的，但是JavaScript的线程应该有自己的容器进程:浏览器或者Node。
• 浏览器是一个进程吗，它里面只有一个线程吗?
  • 目前多数的浏览器其实都是多进程的，当我们打开一个tab页面时就会开启一个新的进程， 这是为了防止一个页面卡死而造成所有页面无法响应，整个浏览器需要强制退出；
  • 每个进程中又有很多的线程，其中包括执行JavaScript代码的线程;
• JavaScript的代码执行是在一个单独的线程中执行的:
  • 这就意味着JavaScript的代码，在同一个时刻只能做一件事；
  • 如果这件事是非常耗时的，就意味着当前的线程就会被阻塞；
• 所以真正耗时的操作，实际上并不是由JavaScript线程在执行的:
  • 浏览器的每个进程是多线程的，那么其他线程可以来完成这个耗时的操作；
  • 比如网络请求定时器，我们只需要在特性的时候执行应该有的回调即可；

宏任务、微任务队列

• 事件循环中并非只维护着一个队列，事实上是有两个队列:
  • 宏任务队列(macrotask queue) : ajax、 setTimeout、 setInterval、 DOM监听、UI Rendering等
  • 微任务队列(microtask queue) : Promise的then回调、 Mutation Observer API、 queueMicrotask()等
• 事件循环对于两个队列的优先级
  • 1. main script中的代码优先执行(编写的顶层script代码) ；
  • 2. 在执行任何一个宏任务之前(不是队列，是一个宏任务)，都会先查看微任务队列中是否有任务需要执行
    • 也就是宏任务执行之前，必须保证微任务队列是空的；
    • 如果不为空，那么就优先执行微任务队列中的任务(回调) ；