JavaScript异步问题解决方案

JavaScript是一门单线程语言，在执行一些比较耗时的操作（比如常见的Ajax请求）时，为了不阻塞后面代码的执行，往往需要执行异步操作。关于JS的运行机制，大家可以看阮一峰的这篇文章：JavaScript 运行机制详解：再谈Event Loop

如何处理异步操作在一直是个值得关注的问题，我会在这篇博文里介绍几种常见的处理异步函数的解决方案

使用回调函数

如果你有使用过JQuery，那么肯定会熟悉这样的处理方式，回调函数是一个作为变量传递给另外一个函数的函数，它在主体函数执行完之后执行。

let delayWithCallback = (time, callback) => {
    console.log('handle...')
    setTimeout(() => {
        if (typeof callback === 'function') {
            callback(`success`)
        }
    }, time)
}

在callback方法里处理回调

let func1 = () => {
    console.log('start')
    delayWithCallback(1000, (result) => {
        console.log(result)
        console.log('end')
    })
}
func1()

使用Promise

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。这里说的“成功”和“失败”主要是为了便于理解，准确的说法是resolve和reject改变了Promise的状态，resolve将Promise的状态置为resolved，reject将Promise的状态置为rejected

let index = 1;
let delayWithPromise = (time) => {
    return new Promise((resolve, reject) => {
        console.log(`task${index} handle...`)
        index++
        setTimeout(() => {
            resolve('success')
        }, time)
    })
}

在Promise实例上使用then方法里处理回调

then方法是Promise原型上的方法，Promise.prototype.then()，then方法接受两个参数，第一个参数是Resolved状态的回调函数，第二个参数（可选）是Rejected状态的回调函数

let func2 = () => {
    console.log('start')
    delayWithPromise(1000).then(result => {
        console.log(result)
        console.log('end')
    })
} 
func2()

多个异步操作

假定有下面的异步方法，用于获取学生信息

let getJSON = (key) => {
    const data = {
        stu: 'stu1',
        stu1: {
            age: 1
        },
        stu2: {
            age: 2
        }
    }
    return new Promise((resolve, reject) => {
        setTimeout(function () {
            resolve(data[key])
        }, 100);
    })
}

Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例。此时多个Promise实例可以同步执行，返回值是一个数组，包含每个操作的结果

let func3 = () => {
    Promise.all([
        getJSON('stu1'),
        getJSON('stu2')
    ]).then(stu => {
        console.log(stu)
    })
}
func3()

链式调用解决Promise异步嵌套问题

在上面的代码中，我们不关心操作执行的顺序，Promise.all方法可以很好的解决多个异步操作同时执行的问题；如果当前的异步操作依赖上一个操作的结果，就很容易写出func4()这样的代码，在func4()中，嵌套的层级还比较少（2层），如果有20、30层呢，这样代码就难以维护了

let func4 = () => {
    getJSON('stu').then(result1 => {
        getJSON(result1).then(result2 => {
            .....
        })
    })
}
func4()

如果我们在then方法中返回的是一个新的Promise实例，就可以形成链式调用关系了

采用then链式调用，它避免了异步函数之间的层层嵌套，将原来异步函数的“嵌套关系”转变为便于阅读和理解的“链式”步骤关系，可以指定一组按照次序调用的回调函数，就像func5()，此时代码的结构会清晰很多

let func5 = () => {
    getJSON('stu')
        .then(result1 => {
            return getJSON(result1)
        }).then(result2 => {
            console.log(result2)
        })
}
func5()

采用async/await解决异步问题

async/await是ES7中的新特性，下面是关于async的几个要点：

在function前面加async关键字表示这是一个async函数
async的返回值是一个Promise对象，你可以用then方法添加回调函数
await后面跟着的应该是一个promise对象，如果不是，会被转成一个立即resolve的Promise对象
await表示在这里等待promise返回结果了，再继续执行。

let func6 = async () => {
    console.log('start')
    let result = await delayWithPromise(1000);
    console.log(result)
    console.log('end')
}
func6()

async/await处理多个异步问题

一个一个的执行

let func7 = async () => {
    console.log('start')
    let result1 = await delayWithPromise(500)
    let result2 = await delayWithPromise(500)
    console.dir(result1, result2)
    console.log('end')
}
func7()

同时执行

let func8 = async () => {
    console.log('start')
    let [result1, result2] = await Promise.all([
        delayWithPromise(500),
        delayWithPromise(500)
    ])
    console.dir(result1, result2)
}
func8()

func7()和func8()的在处理时会有些不同，在func7()里会先打印task1 handle...，500ms之后，再打印task2 handle...

但是在func8()中，task1 handle...和task2 handle...是同时打印的，这说明在func7()任务是一个一个顺序阻塞执行的，在func8()是同时同步执行的

总结一下，在含有多个异步操作的方法中，如果你的代码逻辑里面存在相互依赖关系，比如当前操作依赖上一个操作的结果，那么你可以使用func7()这样的写法

如果你的异步操作之间没有依赖关系，你就应该使用func8()这样的写法，这样前面的await不会阻塞后面的异操作，所有操作同时，可以大大提高效率