JavaScript 异步编程

博客地址：https://ainyi.com/96

众所周知，JavaScript 是单线程的，但异步在 js 中很常见，那么简单来介绍一下异步编程

同步编程和异步编程

同步编程，计算机一行一行按顺序依次执行代码，当前代码任务执行时会阻塞后续代码的执行；典型的请求-响应模型就是这样，当请求调用一个函数或方法后，需等待其响应返回，然后执行后续代码

异步编程，执行当前任务时（执行中），也可直接执行下一个任务；多个任务并发执行

这就涉及到两个比较容易混淆的概念了：并行 和 并发

并行(parallel)：指同一时刻内多任务同时进行；如下图：

并发(concurrency)：指在同一时间段内，多任务同时进行着，但是同一时刻，只有某一任务执行。使得在宏观上具有多个进程同时执行的效果，但在微观上只是把时间分成若干段，使多个进程快速交替地执行；如下图：

异步机制

由上面并发的解释，可以知道单线程可以实现类似多线程机制的这种执行方式；那么 JavaScript 单线程的异步编程可以实现多任务并发执行

重点实现 js 异步的方式，就是事件循环，之前写过关于事件循环的例子，可看：JavaScript 事件循环、异步和同步

事件循环

事件循环涉及到两个概念：消息队列、任务

消息队列：也叫任务队列，存储待处理消息及对应的回调函数或事件处理程序

任务：js 区分同步任务和异步任务，代码执行就是在执行任务，也就是对应同步和异步的代码块

首先 JavaScript 的同步任务是进入主线程的执行栈执行；异步任务则进入消息队列(任务队列)，一个存储着待执行任务的队列，严格按照时间先后顺序执行，排在队头的任务将会率先执行，而排在队尾的任务会最后执行

事件循环的流程：检查主线程执行栈是否为空，先执行执行栈中的同步任务，异步任务（回调函数）放入任务队列中，一旦执行栈中的所有的同步任务执行完毕，就会取出任务队列的首部压入执行栈，开始执行，然后继续检查执行栈是否为空，重复这个过程

简单来说：事件循环其实就是入栈出栈的循环

这样就能实现异步方式

js 的异步方式

• setTimeout
• ajax
• Promise
• Generator

setTimeout

即使将时间设置为 0，也会延迟执行，即异步执行。具体可看：setTimeout 时间参数为 0 的探讨

setTimeout(() => {
   console.log('Hello!')
}, 0)

ajax

let xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
  if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 ) {
    console.log(xhr.responseText)
  } else {
    console.log( xhr.status)
  }
}
xhr.open('GET', 'url', false)
xhr.send()

xhr.open 中第三个参数默认为 false 异步执行，改为 true 时为同步执行

Promise

promise 就经常使用了，平常使用 axios 作为请求接口的方式，就是封装了 Promise。当然也可以自己封装使用

具体可看：ES6 Promise 解析及详解三个状态

const promise = new Promise(resolve => {
  setTimeout(() => {
    resolve('hello')
  }, 1000)})
promise.then(value => {
  console.log(value, 'world')
}, error =>{
  console.log(error, 'unhappy')
})

Generator

generator 也叫做生成器，它是 ES6 中引入的一种新的函数类型，内部拥有能够多次启动和暂停代码执行的强大能力，那么也能够用于异步编程中

const axios = require('axios')

const foo = function () {
  return axios({
    method: 'GET',
    url: 'https://cosmos-alien.com/some.url'
  })
}

const main = function *() {
  try {
    let result = yield foo()
    console.log(result)
  } catch (err) {
    console.error(err)
  }
}

let it = main()
let p = it.next().value

p.then((data) => {
  it.next(data)
}, (err) => {
  it.throw(err)
})

博客地址：https://ainyi.com/96