Generator和Async简介

最新推荐文章于 2025-08-13 21:05:35 发布

原创最新推荐文章于 2025-08-13 21:05:35 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

前端专栏收录该内容

10 篇文章

订阅专栏

本文深入介绍了JavaScript中的迭代器Iterator、生成器Generator以及异步编程的关键概念Async和Await。迭代器提供了遍历集合的统一方式，Generator通过yield关键字实现暂停和恢复执行的功能。异步函数通过Async标记，返回Promise对象，而Await用于等待Promise的解决，确保代码非阻塞执行。这些特性在处理异步操作时非常关键，大大简化了JavaScript中的复杂流程控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Generator和Async简介

迭代器 Itreator

迭代器Iterator 是 ES6 引⼊的⼀种新的遍历机制，同时也是⼀种特殊对象，它具有⼀些专⻔为迭代过程设计的专有接⼝。
每个迭代器对象都有⼀个next()⽅法，每次调⽤都返回⼀个当前结果对象。当前结果对象中有两个属性：

value：当前属性的值
done：用于判断是否遍历结束，当没有更多可返回的数据时，返回true。每调⽤⼀次next()⽅法，都会返回下⼀个可⽤的值，直到遍历结束。
生成器 Generator
⽣成器是⼀种返回迭代器的函数，通过function关键字后的星号(*)来表示，函数中会⽤到新的关键字yield。星号可以紧挨着function关键字，也可以在中间添加⼀个空格.

function* generator(){
 const list=[1,2,3]
 for(let i of list){
 	yield i;
 }
}
let g=generator();
console.log(g.next()); // {value: 1, done: false}
console.log(g.next()); // {value: 2, done: false}
console.log(g.next()); // {value: 3, done: false}
console.log(g.next()); // {value: undefined, done: true}

特性

每当执行完一条yield语句后函数就会自动停止执行，直到再次调用next（）
yield关键字只可在生成器内部使用，在其他地方使用会导致程序抛出错误
可以通过函数表达式来创建生成器，但是不能使用箭头函数

let generator=function *(){}

Async和Await

Async

作为一个关键字放在函数的前面，表示该函数是一个异步函数，意味着该函数的执行不会阻塞后面代码的执行异步函数的调用跟普通函数一样
函数返回值是一个Promise对象

Await

await即等待，用于等待一个Promise对象。它只能在异步函数 async function中使用，否则会报错

它的返回值不是Promise对象而是Promise对象处理之后的结果

await表达式会暂停当前 async function的执行，等待Promise 处理完成。若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，继续执行 async function，若 Promise 处理异常(rejected)，await 表达式会把 Promise 的异常原因抛出。如果 await 操作符后的表达式的值不是一个 Promise，那么该值将被转换为一个已正常处理的 Promise。