Javascript 异步处理

1.ES5的异步处理

• ES5使用回调来接收处理异步方法的返回值，即：预定义一个回调方法，作为参数传入到异步函数中，当异步的处理结果出来后，调用之前的预定义回调，并将处理结果回传给他

//创建一个异步返回 双倍数值 的函数
function asyncDouble(num,cb){
    // 创建标识，表示该异步处理是否完成
    var complite = false
    // 数值处理结果
    var result = null

    var timeOut = Math.random() * 3
    console.log('timeOut = ',timeOut)

    // 模拟异步操作
    setTimeout(() => {
        // 产生处理结果
        result = num * 2
        // 切换标识状态为完成
        complite = true
    },timeOut * 1000)

    // 创建定时器监听异步处理是否完成
    var timer = setInterval(() => {
        // 根据标识判断异步处理完成，执行回调并传入处理结果
        if(complite){
            cb && cb(result)
            clearInterval(timer)
        }
    },100)
}

asyncDouble(5,function(result){
    console.log(result) // 10
})

2.Promise简介

Promise是为了解决ES5中回调地狱而诞生的，Promise，顾名思义，就是承诺以后执行。
以下是2种方式在语法上面差别，处理成功都是执行sucesscb，失败则执行errcb，你可以简单的理解成，在promise中，成功回调与失败回调是在异步方法调用完毕后定义的，而ES5则相反，ES5中的回调必须在异步函数调用之前就定义好

//ES5处理异步 
asyncFn(params,sucesscb,errcb)

//Promise处理异步
asyncFn(params).then(sucesscb).catch(errcb)

3.Promise的创建

Promise是一个构造函数，接收一个函数作为参数，当new一个Promise时，会把传入的函数执行一遍（可以用一个函数把Promise包裹起来，避免定义的时候就执行代码）

4.Promise的内部书写逻辑

Promise接收两个参数（resolve,reject），分别应对成功与失败两种处理结果，resolve对应的是then()的第一个参数，reject对应的就是catch()方法的参数，或者then()的第二个参数。可以这么理解，then()的第一个参数就是对resolve的定义，而catch()的参数则是对reject的定义

5.Async/await的使用：

• async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise。
• Async/await这两个关键字是成对存在的，只有在用 async 声明的function，其内部才能使用 await
• await是等待的意思，后面接收一个promise，他会一直等待promise的数据（实参）返回，然后将promise中的数据（实参）提取出来，供后面的代码处理，在此过程中，await后面的代码不会执行，处于等待状态

实例：用Async/await处理ajax请求

async function getGameList(){ //异步操作
    try{
        console.log('开始请求',new Date().getTime())
        //axios是异步方法 await会一直等待其返回结果
        const result =  await axios.get('/game_list.json') 
        //直到axios请求结果回来，才会执行后面的代码
        console.log('数据已经回来',new Date().getTime())
    }catch(err){
        console.log(err)
    }
}

控制台打印：

在vue中，methods中的方法是简写的形式，可以这样写

methods:{
    async getList () {
        var result = await axios.post()
        this.list = result.data
    }
}