javascript中的运行机制（EventLoop）、promise、await、ayncs

Myth丶恋晨 2023-07-07 05:45 1阅读 0赞

### （一）：EventLoop、js的运行机制 ###

因为javascript语言特点就是**单线程**，这就意味着所有的任务都需要排队，只有当前一个任务结束后，才会执行后一个任务，如果前一个任务耗时很长，那有一个任务就得一直等着，于是js的所有任务又分为**同步任务**、**异步任务**，同步任务是指：在主线程上排队执行的任务，从上往下执行。异步任务是指：所有的异步任务不会进入主线程，而是会进入**任务队列(task queue)**,只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行；

*  **异步执行的运行机制如下**  
    1、所有的同步任务都在主线程执行，形成一个**执行栈**（execution content stack）。  
    2、所有的异步任务都在**任务队列**(task queue)中，只有异步任务有了运行结果，就在 任务队列中放置一个事件，通知主线程可以执行该任务了（任务队列中的事件：除了IO设备的事件以外，还包括用户产生的事件，比如鼠标点击、页面滚动等等）。  
    3、当执行栈中的同步任务执行完毕后，就会读取 任务队列 中的事件，然后这些 异步任务 进入执行栈中开始执行。  
    4、主线程会不断读取 任务列表 中的事件，  
    只要主线程空了，就会读取 任务队列 ，这就是javascript的运行机制，因为这个过程是循环不断的，所以整个的这种运行机制又称为**EventLoop（事件循环）**。

### （二）：Promise异步处理 ###

promise主要用于异步任务的操作，解决了代码嵌套的问题，promise中的代码会立即执行；  
**promise的又三种状态：**

1.  pending （进行中）
2.  fulfilled（已成功）
3.  rejected（已失败）  
    这三种状态只能从pending到fulfilled,或者pending到rejected两种情况，状态的改变是不可逆的，下面看一下这段代码的执行顺序

console.log(1); // 同步
        new Promise((resolve, reject) => { 
          console.log(2); // 这里的代码会立即执行
          setTimeout(() => {  
            console.log(3); // 第一个异步任务
          }, 0);
        }).then(() => { 
           console.log(4); // 这里的代码只有当状态改变为fufilled的时候才会执行
        }).catch(err => { 
    		// 当状态改变为rejected的时候才会执行
    	})
        setTimeout(() => {  
          console.log(5); // 第二个异步任务
        }, 0);
        console.log(6); // 同步
    	// 1、2、6、3、5

然后在看下一段代码

new Promise((resolve, reject) => { 
          setTimeout(() => { 
            console.log(3); // 第一个异步任务
            resolve() // 改变promise的状态， 从pending --> fulfilled 
          }, 0);
        }).then(() => { 
          console.log(4); // 挡状态改变的时候就会立即执行
        });
        setTimeout(() => { 
          console.log(5); 
        }, 0);
    	// 3、4、5

在来一段

new Promise((resolve, reject) => { 
          setTimeout(() => { 
            console.log(3);
          }, 0);
          resolve()
        }).then(() => { 
          console.log(4);
        });
        setTimeout(() => { 
          console.log(5);
        }, 0);
        // 4、3、5

下面这段代码，有点绕

new Promise((resolve, reject) => { 
          console.log(0)
          setTimeout(() => { 
            console.log(4);
          }, 0);
          resolve()
          
        }).then(() => { 
          console.log(1)
        }).then(() => { 
          setTimeout(() => { 
            console.log(5)
          }, 0)
        })
        console.log(3)
        setTimeout(() => { 
          console.log(6);
        }, 0);
        // 0、3、1、4、6、5

**promise的缺点**：  
1、创建promise后会立即执行，不能中途取消；  
2、如果不设置回调函数，promise内部抛出的错误，外部无法知晓  
3、当处于pending状态的时候，无法得知进展到那个阶段  
**promise实现的简单原理**：

// 第一步：Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。
    // 它们是两个函数，由 JavaScript 引擎提供，不用自己部署。
        function Promise(task) { 
    
            let that = this; // 缓存this
            that.status = 'pending'; // 进行中的状态
            that.value = undefined; //初始值
    
            that.onResolvedCallbacks = []; // 存放成功后要执行的回调函数的序列
            that.RejectedCallbacks = []; // 存放失败后要执行的回调函数的序列
            // 该方法是将Promise由pending变成fulfilled
            function resolve (value) { 
                if (that.status == 'pending') { 
                    that.status = 'fulfilled';
                    that.value = value;
                    that.onResolvedCallbacks.forEach(cb => cd(that.value))
                }
    
            }
            // 该方法是将Promise由pending变成rejected
            function reject (reason) { 
              if (that.status == 'pending') { 
                    that.status = 'rejected';
                    that.value = reason;
                    that.onRjectedCallbacks.forEach(cb => cd(that.value))
                }
            }
    
            try { 
            // 每一个Promise在new一个实例的时候 接受的函数都是立即执行的
                task(resolve, reject)
            } catch (e) { 
                reject(e)
            }
        }
    
    // 第二步 写then方法，接收两个函数onFulfilled onRejected，
    // 状态是成功态的时候调用onFulfilled 传入成功后的值，
    // 失败态的时候执行onRejected，传入失败的原因，
    // pending 状态时将成功和失败后的这两个方法缓存到对应的数组中，当成功或失败后 依次再执行调用
        Promise.prototype.then = function(onFulfilled, onRejected) { 
            let that = this;
            if (that.status == 'fulfilled') { 
                onFulfilled(that.value);
            }
            if (that.status == 'rejected') { 
                onRejected(that.value);
            }
            if (that.status == 'pending') { 
                that.onResolvedCallbacks.push(onFulfilled);
                that.onRjectedCallbacks.push(onRejected);
            }
        }

### (三) async await异步处理 ###

async 函数在function 前面加一个async作为标识，表示为异步函数，在函数体内部需要搭配await来使用

**async函数的特点：**  
1、处理异步函数的语义化强  
2、await只能在async中使用  
3、async标识的函数返回的是一个Promise对象  
4、await语句后面的Promise对象变成rejected状态的时候,那么async函数会中断，后面的程序不会执行

直接上代码：

function f1() { 
          return new Promise((resolve, reject) => { 
            setTimeout(() => { 
              console.log('你好') 
            }, 10)
          })
        }
        async function createAsync(){ 
          await f1();
          console.log('222')
        }
        createAsync()

这段代码只会打印出 你好，222不会被打印出来，因为f1函数返回的promise的状态没有被改变，所以createAsync函数会被中断

function f1() { 
          return new Promise((resolve, reject) => { 
            setTimeout(() => { 
              console.log('你好') 
              resolve() // 改变promise的状态为fulfilled
            }, 10)
          })
        }
        async function createAsync(){ 
          await f1();
          console.log('222')
        }
        createAsync()
        // 此时打印 你好 222

这里可以看出 await 后面的函数需要返回一个promise对象，并且要改变promise对象的状态才能执行f1函数后面的内容  
**参数的传递：**

function f1() { 
          return new Promise((resolve, reject) => { 
            setTimeout(() => { 
              console.log('你好') 
              resolve('传参')
            }, 10)
          })
        }
        async function createAsync(){ 
          const param = await f1();
          console.log(param)
        }
        createAsync()

**错误捕获**，当f1函数中的promise的状态改为rejected的时候，处理方式：

function f1() { 
          return new Promise((resolve, reject) => { 
            setTimeout(() => { 
              console.log('你好') 
              reject('错误处理， promise的状态修改为rejected')
            }, 10)
          })
        }
        async function createAsync(){ 
          try { 
            const param = await f1();
            console.log(param)
          } catch(e) { 
            console.log(e)
          } finally { 
            console.log('5555')
          }
        }
        createAsync()

async函数需要通过try\{\} catch(e)\{\}的语法来捕获错误  
**try语法介绍：**  
1、try语句允许我们定义在执行时进行错误测试的代码块。  
2、catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。  
3、finally 语句在 try 和 catch 之后无论有无异常都会执行。  
注意： catch 和 finally 语句都是可选的，但你在使用 try 语句时必须至少使用一个。

欢迎大家评论，如果觉得有用，可以点个赞，感谢大家哈