异步处理方法

js是单线程的，所以异步编程技术对于前端来说就显得尤为重要了，本文也是在总结前辈结果的同时尽量做到全面细致。就当给自己做个笔记，首先我们列出异步编程技术目前使用的方法，然后再对比他们之间的优缺点

回调函数 事件监听(事件发布/订阅) Promise Generator函数 async和await

1、回调函数

ajax (url,()=>{
    ajax (url1,()=>{
        ajax (url2,()=>{
            ajax (url3,()=>{})    
        })
    })
})
复制代码

优点：简单，容易理解 缺点： a、不利于阅读和维护 b、容易写出回调地狱（callback hell） c、不能使用try catch 捕获错误 d、不能直接return

2、事件监听

IE中的监听方法 a、obj.attachEvent('事件类型如：onclick'，'处理函数') b、obj.detachEvent('事件类型'，'处理函数') 标准DOM的事件监听： a、obj.addEvent('事件类型如：click','处理函数','冒泡或者捕获事件') b、obj.removeEvent('事件类型如：click','处理函数','冒泡或者捕获事件') ⚠️：IE中的事件类型写法和标准DO中的写法不同前者需要写on后者不需要。

优点：比较容易理解，可以绑定多个事件，每一个事件可以指定多个回调函数，而且可以去耦合，有利于实现模块化。 缺点：整个程序都要变成事件驱动型，运行流程会变得不清晰。

Promise

Primise就是为了解决callback的问题产生的 优点： a、解决了回调地狱的问题 b、实现了链式调用 缺点：无法取消Promise，错误需要通过回调函数来捕获 注意：Promise在我们构造的时候，其内部代码是立即执行的。

Generator

特点：可以控制函数的执行，可以配合co函数库使用

function *fetch(){
    yield agax('url1',()=>{})
    yield agax('url2',()=>{})
    yield agax('url3',()=>{})
}
let it=fetch()//此步骤不会执行函数
let result1=it.next()
let result2=it.next()
let result3=it.next()
复制代码

async/await

异步的终极解决方案 优点：代码清晰，不用像Promise那样写一堆的.then 缺点：await将异步代码改造成同步代码，如果多个异步操作没有依赖性而使用 await 会导致性能上的降低。

async function test() {
 // 以下代码没有依赖性的话，完全可以使用 Promise.all 的方式
 // 如果有依赖性的话，其实就是解决回调地狱的例子了
 await fetch('url1')
 await fetch('url2')
 await fetch('url3')
}
复制代码