JS 异步队列

hello 好久没学博客了 最近实习忙项目 以及规划行程(哈哈哈我就是爱旅游的孩子)

我们常说JS是单线程的，那到底什么是单线程？什么是同步？什么是异步？如何解决回调地狱??

同步：你在做一件事情，不能同时去做另外一件事。
异步：你在做一件事情，这件事可能会耗时很久，而此时你可以在等待的过程中，去做另外一件事。

比如煮开水这件事吧..在这过程，你担心水沸了而不去做其它事情，就等到水沸腾，那就是同步。
而你觉得这过程耗时蛮久，可以先去做其它事情，比如去扫地，直到水沸腾。

单线程：即任务只能是一个个执行的，不能多个任务同时执行，即没有并发性。

你或许会跟我一样疑惑，大家都说JS是单线程的，可是为什么它还有异步代码这么一说。

JS确实是单线程的。但是它运行的环境浏览器内核是多线程的。包括了JS引擎线程、事件触发线程、http请求线程、GUI渲染线程。而各个线程之间是互斥的。比如JS在执行的时候，GUI渲染线程是处于挂起状态。
总不能我在改变DOM节点的时候，你一边进行渲染吧，那会导致性能损耗很大，所以它还是机智的~

之前写过关于异步的文章，主要讲解了单线程的概念和定时器。

来，跟随我来看这段代码

//code 1
console.log('a')
//code 2
setTimeout(()=>{
    console.log('b')
},1000)
//code 3
for(let i=0; i<10000; i++){
    // console.time
}
//code 4
console.log('c')

其中code2是异步代码，其余的都是同步代码。
平时所说的定时器setTimeout、setInterval和事件触发onclick、onfocus等和http请求都是异步。

JS引擎线程会先执行同步代码，之后才执行处于任务队列里面的异步代码。

当触发定时器时，到达指定的时间后，该定时器的回调函数才会放入任务队列中。
当触发事件时，指定的回调函数也会放入任务队列中。
JS引擎执行完同步代码，才会从任务队列中获取回调函数（异步代码）执行。

这里我假设for循环执行时间有两种情况。
情况一： 同步代码总耗时少于1s
情况二：同步代码总耗时大于1s

这里需要了解到“触发”和“执行”并不是一回事。
当代码刚执行到code 2，触发定时器，触发即表示1s后将回调函数加入任务队列中，但是这并不代表到达指定的时间就立即执行内部的代码（也就是上面所说的，全部同步代码执行结束，才开始执行异步代码）。

让我们来巩固下
分析情况一：
如果同步代码总耗时少于1s，比如500ms，这时候还要继续等待大约500ms，才开始执行定时器的回调函数。

分析情况二：
如果同步代码总耗时大于1s，比如1500ms，所以早在1000ms时，定时器就已经完成了倒计时，此时就将回调函数放入任务队列中，只是js引擎线程还在执行同步代码。等到1500ms时，同步代码执行完毕，JS引擎就去查找任务队列是否有异步代码，有则执行。

最近遇到了一个请求获取到的数据，另一个请求依赖该数据的情况。

可能在很久很久之前我会这么写

$.ajax({
    url: 'getUsername.php',
    data: {
        id
    },
    dataType: 'GET',
    success: function(username){
        if(username){
            $.ajax({
                url: 'getUserInfo.php',
                data: {
                    username
                },
                dataTyle: 'GET',
                success(userInfo){
                    // ...
                }
            });
        }
    }
});

这就是常说的回调地狱，2个嵌套还好，要是有更多个…

现在我是用promise解决的，写着写着就觉得代码看起来不清晰，不能更直观的当成同步代码来看…

function getUsername(id){
    return new Promise((resolve, reject)=>{
        // 请求username的操作，模拟
        api.getUsername(id).then((username, err)=>{
            if(username){
                resolve(username);
            }
            reject(err);
        })
    });
}

function getUserInfo(username){
    return new Promise((resolve, reject)=>{
        // 请求userInfo的操作，模拟
        api.getUserInfo(username).then((userInfo, err)=>{
            if(userInfo){
                resolve(userInfo);
            }
            reject(err);
        })
    });
}

getUsername(id).then((username)=>{
    return getUserInfo(username);
}).then((userInfo) => {
    console.log(userInfo);
}).catch((err)=>{
    console.log(err);
});

于是乎，度娘解决我的痛点，async/await~

function getUsername(id){
    return new Promise((resolve, reject)=>{
        // 请求username的操作，模拟
        api.getUsername(id).then((username, err)=>{
            if(username){
                resolve(username);
            }
            reject(err);
        })
    });
}

function getUserInfo(username){
    return new Promise((resolve, reject)=>{
        // 请求userInfo的操作，模拟
        api.getUserInfo(username).then((userInfo, err)=>{
            if(userInfo){
                resolve(userInfo);
            }
            reject(err);
        })
    });
}

let asyncFn = async function(id){
    let username = await getUsername(id);
    let userInfo = await getUserInfo(username);
    console.log(userInfo);
}

async甚至还可以帮助我们实现js中没有sleep函数的痛点..

let fn = function(time){
    return new Promise((resolve, reject) => {
        setTimeout(resolve, time);
    });
}

let testAsync = async function(){
    alert('a')
    await fn(2000)
    alert('b')
}

testAsync()