浅谈JavaScript的异步

说起来异步操作，可能大家都不陌生，因为这一直发生在我们写的js代码里，或许你不知道，但它一直在。
异步操作的发展经历了以下几个阶段

• 回调函数 callback
• Promise
• Generator
• async
  1、最常见的异步操作是ajax。

$.ajax({
    url:'...',
    type:'post/get',
    data:'someData',
    success:function(data){
        if(data.code==0){
            //dosomething
            setName(data.name)
        }
    },
    error:function(err){
        //....
    }
    
})
function setName(name){
    $('.myName').html(name)
}
getSomeData();
function getSomeData(){
    //dosomething...
}

上述ajax就是一个异步操作，它不会阻塞其它函数的执行,这就是一个异步操作。
2、为了更加方便的处理异步操作，其实也是为了代码更加简洁，更有阅读感。 ES6引入了几种函数。

• Promise()
• Generator() 函数 yield表达式
• ES2017引入了async/await

Promise()函数的用法：
var func1=new Promise((relove,reject)=>{
    if(true){
        relove('someData')
    }
    if(fail){
        reject('someData')
    }
});
func1.then(data=>{
    console.log(data)t
}).catch(err=>{
    console.log(err)
})

* Promise 函数需要通过.then()处理返回结果，通过.catch()处理错误异常。
* Promise.all([func1,func2]).then(e=>{
    //表示同时执行多个异步函数
})
* Promise.race([func1,func2]).then(e=>{
    /表示执行多个异步函数，谁先返回成功的结果，处理谁的的返回
})
实际demo：
function getStatus1() {
        return new Promise((resolve, reject) => {
            const codeJson11 = '{"token":"' + '123' + '","version":"' + 1 + '","appChannel":"' + 1 + '","opeateType":"' + 1 + '"}';
            $.ajax({
                type: 'get',
                url: ONLINEURL + 'applyJDAppNewLineLink.do?data=' + codeJson11,
                dataType: 'JSON',
                success: function (data) {
                    if (data.code == 0) {
                        resolve(data)
                    } else {
                        reject(data)
                    }
                }
            });
        })
    }
    getStatus1().then(data=>{
        console.log('我到了成功')
        console.log(data)
    }).catch(err=>{
        console.info('我到了err')
        console.info(err)
    })

Generator函数和async的功能类似，用法也有很多类似的地方。

function* getData(){
    const a=1;const b=2;
    console.log(a)
    yield a+b
    console.log(b);
    yield a*b
}
const a=getData.next(); 
console.log(a) // 1,3
在实际使用当中 Genernator不会经常使用，使用最多的是async

async/await的具体理解

其实是将Generator函数 的 * 换做了 async
async function gd(a,b){
        setTimeout(()=>{
            console.log(a*b)
        })
       await func2()
        console.log(a+b)
   }
   function func2() {
       if(true){
           //这个列表显示
           console.log('func2')
       }
   }
gd(1,2); //func2,3,2
这么理解，这是一个异步方法，先执行,gd里面的方法，然后呢遇到了await需要先执行，setTimeout是最后执行的。