JS异步编程

发表于 4年以前 | 总阅读数：501 次

什么是异步

同步（sync）是一件事一件事的执行，只有前一个任务执行完毕才能执行后一个任务。异步（async）相对于同步，程序无须按照代码顺序自上而下的执行。

为什么要使用异步

由于js是单线程的，只能在js引擎的主线程上运行，所以js代码只能一行一行的执行，如果没有异步的存在，由于当前的任务还没有完成，其他的所有操作都会无响应，用户就会长时间的在等待。

JS常见的异步模式

常见的异步模式有六种：

回调函数
事件监听
发布/订阅模式
promise
Generator(ES6)
async/await(ES7)

回调函数

回调函数是异步操作最基本的方法。

回调函数作为参数传递给另一个函数，在另一个函数中被调用。常见的回调函数的例子：

ajax(url, () => {
   //处理逻辑
})

但是使用回调函数，经常会写出回调地狱，这是非常致命的。

回调地狱的根本问题是：

嵌套函数存在耦合性
嵌套函数变多，处理问题的困难也变大

事件监听

事件监听模式，异步任务的执行取决于，某个事件的发生。比如点击事件（onClick）和内容改变时间（onChange）等。

发布/订阅模式

在发布/订阅模式中，想象有一个类似消息中心的地方，可以在消息中心“注册”一条消息，然后就会有若干对这消息感兴趣的人“订阅”，一旦该消息被“发布”，所有”订阅“了该消息的用户都会得到提醒。

Promise

Promise是ES6推出的一种解决异步编程的解决方案。Promise是承诺的意思，这个承诺在未来会有一个确定的答复，该承诺有三种状态：等待中（pending）、完成了（resolved）、拒绝了（rejected）。一旦状态从等待改变为其他状态就不再可变了。

Promise是个构造函数，接受一个函数作为参数。作为参数的函数有两个参数：resolve和reject，分别对应完成和拒绝两种状态。我们可以选择在不同时候执行resolve或reject去触发下一个动作，执行then方法里的函数。

ajax(rul)
.then(res => {
   console.log(res)
   return ajax(url1)
}).then(res => {
   console.log(res)
   return ajax(url2)
}).then(res => console.log(res))

Promise实现了链式调用，每次调用then之后返回的都是一个Promise对象，如果在then使用了return，return返回的值会被Promise.resolve()包装。

Generator

Generator是一种特殊的函数，有以下特点：

声明时需要在function后面加上*，并且配合函数里面yield关键字使用。
在执行Generator函数的时候，会返回一个Iterator遍历器对象，通过其next方法，将Generator内的代码以yield为分界分步执行。
执行Generator函数时，代码不会执行，而是需要调用Iterator遍历器对象的next方法，这时程序才会执行从头或从上一个yield到下一个yield或return或函数体尾部之间的代码，并将yield后面的值包装成json对象返回。
value取的yield或return后面的值，否则就是undefined，done的值如果碰到return或者执行完函数体会返回true，否则就会返回false。

Async/Await

一个函数如果加上async，那么该函数就会返回一个Promise对象。

async function test() {
   console.log('1')
}
console.log(test)// Promise {<resolve>: "1"}

async就是将函数返回使用Promise.resolve()，和then处理返回值一样，await只能配套async使用。但如果多个异步代码没有依赖性却使用了await会导致性能降低。

async在使用上会有一些需要注意的地方：

async函数的返回值是一个Promise对象，不像是generator函数返回的是Iterator遍历器对象，所以async函数执行后可以继续使用then等方法来继续执行后面的逻辑。
await后边一般跟Promise对象，async函数执行遇到await后，等待后面的Promise对象的状态从pending变成resolve后，将resolve的参数返回并自动往下执行直到下一个await或结束。
await后面也可以跟一个async进行嵌套使用。