JavaScript 同步和异步的执行机制问题

墨蓝 2022-12-08 14:24 179阅读 0赞

今天做项目的时候遇到了一个问题，当我在请求完后端数据的时候，想去立刻打印出请求出来的信息时，怎么打印都是空的，但是出来这个请求方法之后他又有数值了，于是我很纳闷，研究了1个小时找出了原因。

new Promise((resolve, reject) => { 
    	wx.request({ 
    	     url: baseUrl + url,
    	     data: data || { },
    	     method: method || 'GET',
    	     success: (result) => { 
    	         resolve(result);
    	     },
    	     fail: (err) => { 
    	         reject(err);
    	     },
    	     complete: () => { 
    	         wx.hideLoading();
    	     },
    	}).then(res => { 
    		console.log("数据请求成功");
    		// 然后设置数据 data
    		this.setData({ 
    			data: res.data,
    		});
    	});
    	console.log(data);
    	// 这里打印出来为空
    })

就像上面的代码一样，打印出来的结果为空，但是出去这个方法，再打印就有了，于是我产生了疑惑，然后查阅资料。

1.  `JavaScript` 是一门单线程语言。
2.  `Event Loop`（事件循环）是 `JavaScript` 的执行机制。

下面我不会直接回答那个问题，而是举别的例子，如果这些例子都搞明白了，那么上面的代码有什么问题相信大家也就都知道了。

大家首先来看一下这段代码：

setTimeout(function(){ 
        console.log('1.定时器开始')
    });
    new Promise(function(resolve){ 
        console.log('2.Promise开始');
        resolve();
    }).then(function(){ 
        console.log('3.执行then函数')
    });
    console.log('4.代码执行结束');

这段代码的执行结果是：

*  2.`Promise` 开始
 *  4.代码执行结束
 *  3.执行 `then` 函数
 *  1.定时器开始

上面也提到了， **JavaScript** 是一门单线程的语言，所以我们看到的多线程都是 **模拟出来** 的，都是纸老虎。

单线程就是使用队列的机制，所有的任务都排着队的执行，在前面排队的任务就先执行，即 **先进先出** 。

异步的任务不会先执行，而是先放入一个事件列表，等到主线任务执行完之后再去执行这些事件列表中的数据。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0MTM2NA_size_16_color_FFFFFF_t_70_pic_center][]

*  同步和异步任务分别进入不同的执行环境，同步的进入主线程，异步的写入 `Event Table` 事件列表中。
 *  当事件完成时，把事件列表中的任务推入 `Event queue` 事件队列，等待执行。
 *  主线程完成所有任务，就去查看事件队列里面，有的话拿出来执行。
 *  上面这个步骤会重复执行，知道没有可执行的任务，形成事件循环`(Event Loop)`

下面介绍几个异步函数

**setTimeout**

异步函数，可以延迟执行。

setTimeout(() => { 
        console.log('1');
    },3000)
    console.log('2');

执行结果是：2 、1 。

**setInterval**

两个定时器兄弟，原理一样，只不过setInterval会每隔指定的时间将注册的函数置入Event Queue。

**Promise**

Promise 对象是用于异步操作的。

来看一段代码：

$.ajax({ 
        url:www.javascript.com,
        data:data,
        success:() => { 
            console.log('第一个数据返回成功!');
            $.ajax({ 
                url:www.javascript.com,
                data:data,
                success:() => { 
                    console.log('第二个数据返回成功!');
                    ...如果还有再继续
                }
            })
        }
    })

我们可以使用 `Promise` 对象改造该方法：

除了广义的同步任务和异步任务，我们对任务有更精细的定义：

*  宏任务 包含整个 script 代码块，setTimeout，setInterval
 *  微任务 `Promise`，process.nextTick

setTimeout(function() { 
        console.log('setTimeout');
    })
    new Promise(function(resolve) { 
        console.log('promise');
        resolve();
    }).then(function() { 
        console.log('then');
    })
    console.log('console');

执行结果为：`promise`，`console`，`then`，`setTimeout`。

*  这段代码作为宏任务，进入主线程。
 *  先看到 `setTimeout` ，那么注册后把他放到宏任务事件队列 `Event Queue` 。
 *  接下来到了 Promise，new Promise 立即执行，then 函数分发到微任务 Event Queue。
 *  遇到 `console.log()` ，立即执行。
 *  到现在第一次的宏任务执行结束。那么得看看有没有微任务啊，有，then 里面有啊，拿出来执行。
 *  第一轮事件循环结束了，我们开始第二轮循环，当然要从宏任务 Event Queue 开始。我们发现了宏任务 Event Queue 中 setTimeout 对应的回调函数，立即执行。
 *  执行结束。

**总结题**

console.log('1');
    
    setTimeout(function() { 
        console.log('2');
        process.nextTick(function() { 
            console.log('3');
        })
        new Promise(function(resolve) { 
            console.log('4');
            resolve();
        }).then(function() { 
            console.log('5')
        })
    })
    process.nextTick(function() { 
        console.log('6');
    })
    new Promise(function(resolve) { 
        console.log('7');
        resolve();
    }).then(function() { 
        console.log('8')
    })
    
    setTimeout(function() { 
        console.log('9');
        process.nextTick(function() { 
            console.log('10');
        })
        new Promise(function(resolve) { 
            console.log('11');
            resolve();
        }).then(function() { 
            console.log('12')
        })
    })
    附上输出结果：1，7，6，8，2，4，3，5，9，11，10，12

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0MTM2NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/5fc82cecc56b4bd9a33c39ee722efdaf.png