UI设计师-前端基础-JavaScript基础_JavaScript异步编程：Promise和async-await.docxVIP

PAGE1

PAGE1

JavaScript的EventLoop机制

JavaScript是一种单线程语言，为了能够处理多个任务并行执行的场景，引入了EventLoop机制。单线程意味着JavaScript在同一时间只能执行一个任务，但是，这并不意味着它不能处理多个任务。通过异步编程和事件循环，JavaScript能够实现高效的多任务处理能力，使得用户界面不会因为长时间运行的任务而卡顿。

1JavaScript的任务队列

JavaScript的执行环境可以分为同步任务和异步任务。同步任务在主线程上执行，形成执行堆栈；异步任务不进入执行堆栈，而是进入任务队列。当主线程上的任务执行完毕后，会从任务队列中取出下一个任务执行，这个过程就是EventLoop。

1.1微任务队列与宏任务队列

在JavaScript中，事件循环其实涉及两个队列：微任务队列和宏任务队列。微任务（microtasks）和宏任务（macrotasks）的主要区别在于它们在事件循环中的处理方式。微任务会被当前的宏任务循环处理完后立即执行，而宏任务则会被添加到下次事件循环的开始。

1.1.1宏任务

宏任务主要包括：

普通的任务，如事件回调、定时器回调（setTimeout,setInterval）

I/O操作

UI渲染

1.1.2微任务

微任务主要涉及：

Promise

MutationObserver

2了解EventLoop机制

要理解Promise和async/await的执行，首先必须理解EventLoop机制。当执行一个宏任务时，所有微任务都会在该宏任务结束后、下一个宏任务开始前被处理。因此，Promise的解决或拒绝状态会在当前宏任务结束时被放入微任务队列，然后立即执行。而定时器（如setTimeout）则放入宏任务队列，在当前事件循环结束后执行。

2.1示例代码

下面的代码展示了宏任务和微任务的执行顺序：

console.log(宏任务开始);

Promise.resolve().then(()={

console.log(微任务1);

});

setTimeout(()={

console.log(宏任务1);

},0);

Promise.resolve().then(()={

console.log(微任务2);

});

//输出顺序为：

//宏任务开始

//微任务1

//微任务2

//宏任务1

3Promise

Promise是一种用于处理异步操作的更优雅的方式，它避免了回调地狱，简化了代码的编写。Promise对象有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），并且状态一旦被改变，就不会再改变。

3.1Promise的基本使用

constpromise=newPromise((resolve,reject)={

//模拟异步操作

setTimeout(()={

resolve(异步操作成功);

},2000);

});

promise.then((result)={

console.log(result);//2秒后输出异步操作成功

});

3.2Promise的链式调用

Promise支持链式调用，可以在一个异步操作成功后直接进行下一个异步操作。

newPromise((resolve)={

setTimeout(()={

resolve(1);

},1000);

})

.then((data)={

console.log(`数据：${data}`);

returndata*2;

})

.then((data)={

console.log(`数据：${data}`);

});

4async/await

async/await是基于Promise的新语法，它让异步代码看起来更像同步代码，使得异步流程控制变得更加简单。

4.1async函数的返回值

async函数会自动返回一个Promise对象，这个Promise对象的状态取决于函数内await语句的结果。

asyncfunctionasyncFunction(){

return异步函数的返回值;

}

asyncFunction().then((result)={

console.log(result);//输出异步函数的返回值

});

4.2await等待异步操作

在async函数内，使用await关键字可以等待一个Promise对象的解决，让函数暂停执行，等到Promise对象解决后继续执行。

asyncfun