Javascript 异步处理

1.传统异步处理

• ES6之前使用回调进行处理，示例代码:

//创建一个异步返回 双倍数值 的函数
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定义：Promise是为了解决ES5中回调地狱而诞生的，Promise，顾名思义，就是承诺以后执行
• Promise创建：Promise是一个构造函数，构建示例时接收一个异步函数，创建的同时会把传入的函数执行一遍，所以需要把它封装到一个函数内部，直到函数调用时才创建promise，并执行里面的代码
• 成功与失败：传入的异步函数有2个参数(resolve,reject），成功调用resolve并把结果传递给它，失败则调用reject

//创建一个支持promise的异步方法
<script>
    //封装一个支持promise的异步函数
    function asyncDoubleForPromise(num){
        //创建promise并返回
        return new Promise(function(resolve,reject){
            // 模拟异步操作
            setTimeout(() => {
                //判断失败还是成功
                if(isNaN(num)){
                    //失败处理
                    reject()
                }else{
                    //成功处理
                    resolve(num*2)
                }
            },1000)
        })
    }
</script>

• 使用then()处理异步结果：resolve对应的是then()的第一个参数，reject对应then()的第二个参数

//成功调用
    asyncDoubleForPromise(5).then(res=>{
        console.log(res) //10
    })

    //失败调用
    asyncDoubleForPromise('a').then(function(res){
        console.log('执行成功')
    },function(){
        console.log('执行失败') //执行失败
    })

• 使用catch()处理失败

//失败调用
    asyncDoubleForPromise('a').then(res=>{
        console.log(res)
    }).catch(function(){
        console.log('执行失败') //执行失败
    })

3.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)
    }
}

4.并发

• 通过Promise.all([promise,promise2])发起并发请求，待所有请求都回来后统一处理

<script>
    new Vue({
        el:"#app",
        data: {

        },
        created(){
            //直接读取返回结果
            this.getAllData()
        },
        methods: {
            getAllData(){
                //接收2个promise对象
                Promise.all([this.getData(), this.getData2()])
                .then(function(resArr){
                    //返回结果放入数组中
                    console.log('res1',resArr[0].data)
                    console.log('res2',resArr[1].data)
                })
            },
            getData(){
                //返回promise对象
                return axios.get('http://127.0.0.1:8086/getDouble?val=5')
            },
            getData2(){
                //返回promise对象
                return axios.get('http://127.0.0.1:8086/getTriple?val=10')
            }
        }
    })
</script>