Promise

1. Promise

1.1. promise规范

1.2. 异步任务的处理

从一个实际的例子来作为切入点
- 调用一个函数，这个函数中发送网络请求（可以用定时器来模拟）
- 如果发送网络请求成功了，那么告知调用者发送成功，并且将相关数据返回过去
- 如果发送网络请求失败了，那么告知调用者发送失败，并且告知错误信息

function requestData(url,successCallback,failCallback){
    setTimeout(()=>{
        if(url==="http://www.baidu.com"){
            // 发送成功
            let [name,age]=["why",18];
            successCallback(`发送数据 ${name} ${age}`);
        }
        else{
            // 发送失败
            let errMessage = "请求失败，url错误"
            failCallback(errMessage);
        }
    },1000);
}

requestData("http://www.baidu.com",
res=>{
    console.log(res);
},err=>{
    console.log(err);
})

1.3. 什么是Promise

在上面的解决方案中，确实可以解决请求函数得到结果之后，获取到对应的回调，但是它存在两个主要的问题
1. 需要自己来设计回调函数、回调函数的名称、回调函数的使用等
2. 对于不同的人、不同的框架设计出来的方案是不同的，必须耐心去看别人的源码或者文档，以便可以理解它这个函数到底怎么用
Promise的API
- Promise是一个类，可以翻译成【承诺、许诺、期约】
- 当需要给予调用者一个承诺：待会儿会回调数据时，就可以创建一个Promise的对象
- 在通过new创建Promise对象时，需要传入一个回调函数，称之为executor
  - 这个回调函数会被立即执行，并且给传入另外两个回调函数resolve、reject
  - 当调用resolve回调函数时，会执行Promise对象的then方法传入的回调函数
  - 当调用reject回调函数时，会执行Promise对象的catch方法传入的回调函数

const promise = new Promise((resolve,reject)=>{
    // 调用resolve，then传入的回调会被执行
    resolve("Data");
    // 调用reject，catch传入的回调会被执行
    reject("fail");
});

promise.then(value=>{
    console.log(value);
}).catch(err=>{
    console.log(err);
})

1.4. Promise的代码结构

Promise使用过程，我们可以将它划分成三个状态
- 待定(pending): 初始状态，既没有被兑现，也没有被拒绝
  - 当执行executor中的代码时，处于该状态
- 已兑现(fulfilled): 意味着操作成功完成
  - 执行了resolve时，处于该状态
- 已拒绝(rejected): 意味着操作失败
  - 执行了reject时，处于该状态

1.5. Promise重构请求

有了Promise，就可以将之前的代码进行重构

function requestData(url){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            if(url==="https://www.baidu.com"){
                let [name,age]=["why",18];
                // 调用resolve，then传入的回调会被执行
                resolve(`发送数据 ${name} ${age}`);    
            }
            else{
                // 调用reject，catch传入的回调会被执行
                let errMessage = "请求失败，url错误"
                reject(errMessage);
            }
        },1000);
    });
}
requestData("https://www.baidu.com").then(value=>{
    console.log(value);
}).catch(err=>{
    console.log(err);
})

1.6. Executor

Executor是在创建Promise时需要传入的一个回调函数，这个回调函数会被立即执行，并且传入两个参数
1
2
3
new Promise((resolve,reject)=>{
console.log("executor代码")；
})
通常会在Executor中确定Promise状态
- 通过resolve，可以兑现(fulfilled)Promise的状态，也可以称之为已决议(resolved)
- 通过reject，可以拒绝(reject)Promise的状态
需要注意：一旦状态被确定下来，Promise的状态会被锁死，该Promise的状态是不可更改的
- 在调用resolve的时候，如果resolve传入的值本身不是一个Promise，那么会将该Promise的状态变成兑现(fulfilled)
- 在之后去调用reject时，已经不会有任何的响应了(并不是这行代码不会执行，而是无法改变Promise状态)

1.7. resolve不同值的区别

情况一：如果resolve传入一个普通的值或者对象，那么这个值会作为then回调的参数

new Promise((resolve,reject)=>{
    resolve("Data");
}).then(value=>{
    console.log("res",value);
})

情况二：如果resolve中传入的是另外一个Promise，那么这个新Promise会决定原Promise的状态

new Promise((resolve,reject)=>{
    resolve(new Promise((resolve1,reject1)=>{
        reject1("new Data");
    }));
}).then(value=>{
    console.log("res",value);
}).catch(err=>{
    console.log("error",err);
})

情况三：如果resolve中传入的是一个对象，并且这个对象有实现then方法，那么会执行该then方法，并且根据 then方法的结果来决定Promise的状态

new Promise((resolve,reject)=>{
    resolve({
        then: function(resolve,reject){
            resolve("then value");
        }
    });
}).then(value=>{
    console.log("res",value);
}).catch(err=>{
    console.log("error",err);
})

1.8. Promise对象方法

1	console.log(Object.getOwnPropertyDescriptors(Promise.prototype));

得到Promise对象方法

{
  constructor: {
    value: [Function: Promise],
    writable: true,
    enumerable: false,
    configurable: true
  },
  then: {
    value: [Function: then],
    writable: true,
    enumerable: false,
    configurable: true
  },
  catch: {
    value: [Function: catch],
    writable: true,
    enumerable: false,
    configurable: true
  },
  finally: {
    value: [Function: finally],
    writable: true,
    enumerable: false,
    configurable: true
  },
  [Symbol(Symbol.toStringTag)]: {
    value: 'Promise',
    writable: false,
    enumerable: false,
    configurable: true
  }
}

1.8.1. then方法

1.8.1.1. 接受两个参数

then方法是Promise对象上的一个方法
它其实是放在Promise的原型上的 Promise.prototype.then
then方法接受两个参数
- fulfilled的回调函数：当状态变成fulfilled时会回调的函数
- reject的回调函数：当状态变成reject时会回调的函数

new Promise((resolve,reject)=>{
    resolve("Data");
}).then(res=>{
    console.log("res",res);
},err=>{
    console.log("error",err);
})

// 等价于
new Promise((resolve,reject)=>{
    resolve("Data");
}).then(res=>{
    console.log("res",res);
}).catch(err=>{
    console.log("error",err);
})

1.8.1.2. 多次调用

一个Promise的then方法是可以被多次调用的
- 每次调用都可以传入对应的fulfilled回调
- 当Promise的状态变成fulfilled的时候，这些回调函数都会被执行

new Promise((resolve,reject)=>{
    resolve("Data");
}).then(res=>{
    return "res1 "+res;
}).then(res=>{
    return "res2 "+res;
}).then(res=>{
    // res3 res2 res1 Data
    console.log("res3",res);
})

1.8.1.3. 返回值

then方法本身是有返回值的，它的返回值是一个Promise，所以可以进行链式调用
但是then方法返回的Promise到底处于什么样的状态呢?
- 当then方法中的回调函数本身在执行的时候，那么它处于pending状态
- 当then方法中的回调函数返回一个结果时，那么它处于fulfilled状态，并且会将结果作为resolve的参数
  - 情况一：返回一个普通的值，这个普通值会被作为一个新的Promise的resolve参数值
  - 情况二：返回一个Promise，该Promise状态会取代原Promise状态
  - 情况三：返回一个对象，且该对象实现了thenable值
- 当then方法抛出一个异常时，那么它处于reject状态

1.8.2. catch方法

1.8.2.1. 多次调用

catch方法也是Promise对象上的一个方法
它也是放在Promise的原型上的 Promise.prototype.catch

当exectuor抛出异常时，会调用错误/拒绝捕获回调函数

new Promise((resolve,reject)=>{
  reject("error message");
}).then(undefined,err=>{
  console.log("error",err);
})

语法糖：通过catch方法来传入错误/拒绝捕获的回调函数

new Promise((resolve,reject)=>{
  reject("error message");
}).catch(err=>{
  console.log("error",err);
})

new Promise((resolve,reject)=>{
    resolve("Data");
}).then(res=>{
    console.log("res "+res);
    return new Promise((resolve,reject)=>{
        reject("error message");
    })
}).catch(err=>{
    console.log("err "+err);
})

一个Promise的catch方法是可以被多次调用的

每次调用都可以传入对应的reject回调

当Promise的状态变成reject的时候，这些回调函数都会被执行

const promise = new Promise((resolve,reject)=>{
  reject("error message");
});

promise.catch(err=>{
  console.log("err1",err);
})
promise.catch(err=>{
  console.log("err2",err);
})

1.8.2.2. 返回值

事实上catch方法也是会返回一个Promise对象的，所以catch方法后可以继续调用then方法或者catch方法

下面的代码，后续是catch中的err2打印，还是then中的res打印呢?

答案是res打印，这是因为catch传入的回调在执行完后，默认状态依然会是fulfilled的

// err1 error
// res err
new Promise((resolve,reject)=>{
    reject("error");
}).catch(err=>{
    console.log("err1 "+err);
    return "err";
}).then(res=>{
    console.log("res "+res);
}).catch(err=>{
    console.log("err2",err);
})

如果希望后续继续执行catch，那么需要抛出一个异常

new Promise((resolve,reject)=>{
    reject("error");
}).catch(err=>{
    console.log("err1 "+err);
    throw new Error("error message");
    return "err";
}).then(res=>{
    console.log("res "+res);
}).catch(err=>{
    console.log("err2",err);
})

1.8.3. finally方法

finally是在ES9(ES2018)中新增的一个特性：表示无论Promise对象无论变成fulfilled还是reject状态，最终都会被执行的代码
finally方法是不接收参数的，因为无论前面是fulfilled状态，还是reject状态，它都会执行

new Promise((resolve,reject)=>{
    reject("error");
}).then(res=>{
    console.log("res "+res);
}).catch(err=>{
    console.log("err",err);
}).finally(()=>{
    console.log("finally action");
})

1.9. Promise类方法

1.9.1. resolve方法

then、catch、finally方法都属于Promise的实例方法，都是存放在Promise的prototype上的
有时候有一个现成的内容，希望将其转成Promise来使用，这时可以使用 Promise.resolve 方法来完成
- Promise.resolve的用法相当于new Promise，并且执行resolve操作:
  1
  2
  3
  4
  5
  6
  const promise = Promise.resolve("Data");
  
  // 等价于
  new Promise((resolve,reject)=>{
  resolve("Data");
  })
resolve参数的形态
- 情况一：参数是一个普通的值或者对象
- 情况二：参数本身是Promise
- 情况三：参数是一个thenable

1.9.2. reject方法

reject方法类似于resolve方法，只是会将Promise对象的状态设置为reject状态
Promise.reject的用法相当于new Promise，只是会调用reject
Promise.reject传入的参数无论是什么形态，都会直接作为reject状态的参数传递到catch的

const promise = Promise.reject("Data");

// 等价于
new Promise((resolve,reject)=>{
  reject("Data");
})

1.9.3. all方法

类方法Promise.all的作用是将多个Promise包裹在一起形成一个新的Promise

新的Promise状态由包裹的所有Promise共同决定

当所有的Promise状态变成fulfilled状态时，新的Promise状态为fulfilled，并且会将所有Promise的返回值组成一个数组，返回值组成由传入的Promise数组顺序决定

const p1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve("Data1");
    },1000);
})
const p2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve("Data2");
    },2000);
})
const p3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve("Data3");
    },3000);
})

// 等到所有promise状态都是fulfilled时，再拿到结果
const promiseAll = Promise.all([p1,p2,p3]);
promiseAll.then(res=>{
    // [ 'Data1', 'Data2', 'Data3' ]
    console.log(res);
}).catch(err=>{
    console.log(err);
})

当有一个Promise状态为reject时，新的Promise状态为reject，并且会将第一个reject的返回值作为参数

const p1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        // resolve("Data1");
        reject("error p1")
    },1000);
})
const p2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        // resolve("Data2");
        reject("error p2")
    },1000);
})
const p3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve("Data3");
    },3000);
})

// 当有一个Promise状态为reject时，Promise状态为reject，并且会将第一个reject的返回值作为参数
const promiseAll = Promise.all([p1,p2,p3]);
promiseAll.then(res=>{
    console.log(res);
}).catch(err=>{
    // error p1
    console.log(err);
})

1.9.4. allSettled方法

all方法有一个缺陷：当有其中一个Promise变成reject状态时，新Promise就会立即变成对应的reject状态
- 那么对于resolved的，以及依然处于pending状态的Promise，是获取不到对应的结果的
在ES11(ES2020)中，添加了新的API Promise.allSettled
- 该方法会在所有的Promise都有结果(settled)，无论是fulfilled，还是reject时，才会有最终的状态
- 并且这个Promise的结果一定是fulfilled的
打印的结果
- allSettled的结果是一个数组，数组中存放着每一个Promise的结果，并且是对应一个对象的
- 这个对象中包含status状态，以及对应的value值

const p1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        // resolve("Data1");
        reject("error p1");
    },1000);
})
const p2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        // resolve("Data2");
        reject("error p2")
    },2000);
})
const p3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve("Data3");
    },3000);
})

// 等到所有promise状态达到最终状态时，状态一定是fulfilled
/**
[
  { status: 'rejected', reason: 'error p1' },
  { status: 'rejected', reason: 'error p2' },
  { status: 'fulfilled', value: 'Data3' }
]
*/
const promiseAll = Promise.allSettled([p1,p2,p3])
.then(res=>{
    console.log(res);
})

1.9.5. race方法

如果有一个Promise有了结果，就希望决定最终新Promise的状态，那么可以使用race方法
race是竞技、竞赛的意思，表示多个Promise相互竞争，谁先有结果，那么就使用谁的结果

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data1");
    //   reject("error p1");
    }, 1000);
  });
  const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
      // resolve("Data2");
      reject("error p2");
    }, 500);
  });
  const p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data3");
    }, 3000);
  });
  
  // 谁先有结果，那么就使用谁的结果
  // error p2
  const promiseRace = Promise.race([p1, p2, p3])
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });

1.9.6. any方法

any方法是ES12中新增的方法，和race方法是类似的
- any方法会等到一个fulfilled状态，才会决定新Promise的状态
- 如果所有的Promise都是reject的，那么也会等到所有的Promise都变成rejected状态

如果所有的Promise都是reject的，那么会报一个AggregateError的错误

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        // resolve("Data1");
        reject("error p1");
    }, 1000);
});
const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        // resolve("Data2");
        reject("error p2");
    }, 1000);
});
const p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        // resolve("Data3");
        reject("error p3");
    }, 3000);
});


/**
[AggregateError: All promises were rejected] {
  [errors]: [ 'error p1', 'error p2', 'error p3' ]
}
*/
const promiseAny = Promise.any([p1, p2, p3])
.then((res) => {
    console.log(res);
})
.catch((err) => {
    console.log(err);
});

1.10. 手动实现Promise类

1.10.1. 全局变量及方法定义

const PROMISE_STATUS_PENDING = "pending";
const PROMISE_STATUS_FULFILLED = "fulfilled";
const PROMISE_STATUS_REJECTED = "rejected";

function executorFnWithCatch(execFn, value, resolve, reject) {
  try {
    const result = execFn(value);
    resolve(result);
  } catch (err) {
    reject(err);
  }
}

function transformPromise(promise){
    if(!(promise instanceof MyPromise)){
        promise = new MyPromise(resolve=>{
            resolve(promise);
        })
    }
    return promise;
}

1.10.2. Promise类设计

1	class MyPromise {}

1.10.3. 构造函数的规划

constructor(executor) {
  // 定义状态
  this.status = PROMISE_STATUS_PENDING;
  this.value = undefined;
  this.reason = undefined;
  this.onFulfilledFns = [];
  this.onRejectedFns = [];

  // 定义resolve，reject回调函数
  // resolve：执行微任务队列，改变状态，获取value执行then传入的成功回调
  const resolve = (value) => {
    if (this.status === PROMISE_STATUS_PENDING) {
      queueMicrotask(() => {
        if (this.status !== PROMISE_STATUS_PENDING) return;
        this.status = PROMISE_STATUS_FULFILLED;
        this.value = value;

        this.onFulfilledFns.forEach((fn) => fn(this.value));
      });
    }
  };
  // resolve：执行微任务队列，改变状态，获取reason执行then传入的失败回调
  const reject = (reason) => {
    if (this.status === PROMISE_STATUS_PENDING) {
      queueMicrotask(() => {
        if (this.status !== PROMISE_STATUS_PENDING) return;
        this.status = PROMISE_STATUS_REJECTED;
        this.reason = reason;

        this.onRejectedFns.forEach((fn) => fn(this.reason));
      });
    }
  };
  try {
    executor(resolve, reject);
  } catch (err) {
    reject(err);
  }
}

1.10.4. then方法的实现

then(onFulfilled, onRejected) {
  // 1. 判断onFulfilled，onRejected，给予默认值
  onRejected =
    onRejected ||
    ((err) => {
      throw err;
    });
  onFulfilled =
    onFulfilled ||
    ((value) => {
      return value;
    });
  // 2. 返回MyPromise
  return new MyPromise((resolve, reject) => {
    // 3. 判断之前的promise状态是否确定
    // 3.1. then调用时，promise状态已经为fulfilled时，应该直接调用
    if (this.status === PROMISE_STATUS_FULFILLED && onFulfilled) {
      // onFulfilled(this.value);
      executorFnWithCatch(onFulfilled, this.value, resolve, reject);
    }
    // 3.2. then调用时，promise状态已经为rejected时，应该直接调用
    if (this.status === PROMISE_STATUS_REJECTED && onRejected) {
      // onRejected(this.error);
      executorFnWithCatch(onRejected, this.reason, resolve, reject);
    }
    // 4. 添加到数组中 push(()=>{onFulfilled，onRejected直接执行代码})
    if (this.status === PROMISE_STATUS_PENDING) {
      this.onFulfilledFns.push(() => {
        // console.log(resolve);
        executorFnWithCatch(onFulfilled, this.value, resolve, reject);
      });
      this.onRejectedFns.push(() => {
        executorFnWithCatch(onRejected, this.reason, resolve, reject);
      });
    }
  });
}

1.10.5. catch方法的实现

1
2
3

catch(onRejected) {
  return this.then(undefined, onRejected);
}

1.10.6. finally方法的实现

finally(onFinally) {
  this.then(
    () => {
      onFinally();
    },
    () => {
      onFinally();
    }
  );
}

1.10.7. resolve方法的实现

1
2
3

static resolve(value) {
  return new MyPromise((resolve) => resolve(value));
}

1.10.8. reject方法的实现

1
2
3

static reject(error) {
  return new MyPromise((resolve, reject) => reject(error));
}

1.10.9. all方法的实现

要知道new MyPromise的resolve，reject在什么情况下执行
all方法
- 情况一：所有promise都有结果
- 情况二：有一个reject，以第一个reject为结果

static all(arrayPromise) {
  return new MyPromise((resolve, reject) => {
    const values = [];
    arrayPromise.forEach((promise) => {
      // 当传入的只是字符串时，需要转为promise
      promise = transformPromise(promise);
      promise.then(
        (res) => {
          values.push(res);
          if (values.length === arrayPromise.length) {
            resolve(values);
          }
        },
        (err) => {
          reject(err);
        }
      );
    });
  });
}

1.10.10. allSettled方法的实现

allSettled是列举所有promise的结果集
方法的结果始终是resolve

static allSettled(arrayPromise) {
  return new MyPromise((resolve) => {
    const result = [];
    arrayPromise.forEach((promise) => {
      promise = transformPromise(promise);
      promise.then(
        (res) => {
          result.push({
            status: PROMISE_STATUS_FULFILLED,
            value: res,
          });
          if (result.length === arrayPromise.length) {
            resolve(result);
          }
        },
        (err) => {
          result.push({
            status: PROMISE_STATUS_REJECTED,
            reason: err,
          });
          if (result.length === arrayPromise.length) {
            resolve(result);
          }
        }
      );
    });
  });
}

1.10.11. race方法的实现

得到最快promise的结果为结果

static race(arrayPromise) {
  return new MyPromise((resolve, reject) => {
    arrayPromise.forEach((promise) => {
      promise = transformPromise(promise);
      promise.then(
        (res) => {
          resolve(res);
        },
        (err) => {
          reject(err);
        }
      );
    });
  });
}

1.10.12. any方法的实现

得到最快promise为resolve的结果
都为reject的话，抛出异常AggregateError

static any(arrayPromise) {
  return new MyPromise((resolve, reject) => {
    const reasons = [];
    arrayPromise.forEach((promise) => {
      promise = transformPromise(promise);
      promise.then(
        (res) => {
          resolve(res);
        },
        (err) => {
          reasons.push(err);
          if (reasons.length === arrayPromise.length) {
            reject(new AggregateError(reasons));
          }
        }
      );
    });
  });
}

2. 迭代器

2.1. 什么是迭代器

迭代器(iterator)，是确使用户可在容器对象(container，例如链表或数组)上遍访的对象，使用该接口无需关心对象的内部实现细节
- 其行为像数据库中的光标，迭代器最早出现在1974年设计的CLU编程语言中
- 在各种编程语言的实现中，迭代器的实现方式各不相同，但是基本都有迭代器，比如Java、Python等
从迭代器的定义可以看出，迭代器是对某个数据结构进行遍历的对象
在JavaScript中，迭代器也是一个具体的对象，这个对象需要符合迭代器协议(iterator protocol)
- 迭代器协议定义了产生一系列值(无论是有限还是无限个)的标准方式
- 那么在js中这个标准就是一个特定的next方法
next方法有如下的要求
- 一个无参数或者接受一个参数的函数，返回一个应当拥有以下两个属性的对象
- done(boolean)
  - 如果迭代器可以产生序列中的下一个值，则为 false。(这等价于没有指定 done 这个属性)
  - 如果迭代器已将序列迭代完毕，则为 true。这种情况下，value 是可选的，如果它依然存在，即为迭代结束之后的默认返回值
- value
  - 迭代器返回的任何 JavaScript 值
  - done 为 true 时可省略

const names = ["abc", "cba", "nba"];

function createArrayInterator(arr) {
  let index = 0;
  return {
    next: function () {
      if (index < arr.length) {
        return { done: false, value: arr[index++] };
      } else {
        return { done: true, value: undefined };
      }
    }
  };
}

const namesIterator = createArrayInterator(names);

console.log(namesIterator.next());
console.log(namesIterator.next());
console.log(namesIterator.next());
console.log(namesIterator.next());

2.2. 可迭代对象

但是上面的代码整体来说看起来是有点奇怪
- 获取一个数组的时候，需要创建一个index变量，再创建一个所谓的迭代器对象
- 事实上可以对上面的代码进行进一步的封装，让其变成一个可迭代对象
什么又是可迭代对象呢？
- 它和迭代器是不同的概念
- 当一个对象实现了 iterable protocol 协议时，它就是一个可迭代对象
- 这个对象的要求是必须实现 @@iterator 方法，在代码中使用 Symbol.iterator访问该属性
转成这样的一个东西有什么好处呢？
- 当一个对象变成一个可迭代对象的时候，进行某些迭代操作，比如 for…of 操作时，其实就会调用它的 @@iterator 方法

const info = {
  names: ["abc", "cba", "nba"],
  [Symbol.iterator]: function () {
    let index = 0;
    return {
      next: () => {
        if (index < this.names.length) {
          return { done: false, value: this.names[index++] };
        } else {
          return { done: true, value: undefined };
        }
      }
    };
  }
};

const iterator = info[Symbol.iterator]();
// { next: [Function: next] }
// console.log(iterator);
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

/**
abc
cba
nba
*/
// 当 done 为true时，停止循环
for (const item of info) {
    console.log(item);
}

2.3. 原生迭代器对象

事实上有很多原生对象已经实现了可迭代协议，会生成一个迭代器对象

String、Array、Map、Set、arguments对象、NodeList集合

// Array
const arr = ["abc","cba","nba"];

for (const item of arr) {
    console.log(item);
}

// [Function: values]
console.log(arr[Symbol.iterator]);

const arrIterator = arr[Symbol.iterator]();
// { value: 'abc', done: false }
console.log(arrIterator.next());
// { value: 'cba', done: false }
console.log(arrIterator.next());
// { value: 'nba', done: false }
console.log(arrIterator.next());
// { value: undefined, done: true }
console.log(arrIterator.next());

// String
const str = "Hello World";
for (const item of str) {
    console.log(item);
}

// function - arguments对象
function foo(x,y,z){
    for (const arg of arguments) {
        console.log(arg);
    }
}
foo(20,30,40);

// Set
const set = new Set(arr);
for (const item of set) {
    console.log(item);
}

2.4. 可迭代对象的应用

这些东西可以被用在哪里呢？
- JavaScript中语法：for …of、展开语法(spread syntax)、yield*、解构赋值(Destructuring_assignment)
- 创建一些对象时：new Map([Iterable])、new WeakMap([iterable])、new Set([iterable])、new WeakSet([iterable])
- 一些方法的调用：Promise.all(iterable)、Promise.race(iterable)、Array.from(iterable)

const info = {
  names: ["abc", "cba", "nba"],
  [Symbol.iterator]: function () {
    let index = 0;
    return {
      next: () => {
        if (index < this.names.length) {
          return { done: false, value: this.names[index++] };
        } else {
          return { done: true, value: undefined };
        }
      },
    };
  },
};

// for...of
for (const item of info) {
  console.log(item);
}

// 展开运算符
// [ 'abc', 'cba', 'nba', 'test' ]
console.log([...info, "test"]);

// 解构
const [value1, value2, value3] = info;
// abc cba nba
console.log(value1, value2, value3);

// 创建其他解构
// Set(3) { 'abc', 'cba', 'nba' }
console.log(new Set(info));
// [ 'abc', 'cba', 'nba' ]
console.log(Array.from(info));

// 调用方法
// [ 'abc', 'cba', 'nba' ]
Promise.all(info).then(res=>{
    console.log(res);
})

2.5. 自定义类的迭代

Array、Set、String、Map等类创建出来的对象都是可迭代对象
- 在面向对象开发中，可以通过class定义一个自己的类，这个类可以创建很多的对象
- 如果希望自己的类创建出来的对象默认是可迭代的，那么在设计类的时候就可以添加上 @@iterator 方法
案例：创建一个classroom的类
- 教室中有自己的位置、名称、当前教室的学生
- 这个教室可以进来新学生(push)
- 创建的教室对象是可迭代对象

class ClassRoom {
  constructor(address, name, students) {
    this.address = address;
    this.name = name;
    this.students = students;
  }
  entry(newStudent) {
    this.students.push(newStudent);
  }

  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.students.length) {
          return { done: false, value: this.students[index++] };
        } else {
          return { done: true, value: undefined };
        }
      },
    };
  }
}

const room1 = new ClassRoom("2201","3幢",["john","amy"]);

const room2 = new ClassRoom("2202","3幢",["kobe","james"]);

room1.entry("wendy");

for (const item of room1) {
    console.log(item);
}

for (const item of room2) {
    console.log(item);
}

2.6. 迭代器的中断

迭代器在某些情况下会在没有完全迭代的情况下中断
- 比如遍历的过程中通过break、continue、return、throw中断了循环操作
- 比如在解构的时候，没有解构所有的值
如果想要监听中断的话，可以添加return方法

class ClassRoom {
  constructor(address, name, students) {
    this.address = address;
    this.name = name;
    this.students = students;
  }
  entry(newStudent) {
    this.students.push(newStudent);
  }

  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.students.length) {
          return { done: false, value: this.students[index++] };
        } else {
          return { done: true, value: undefined };
        }
      },
      return() {
        console.log("迭代器提高停止");
        return { done: true };
      }
    };
  }
}

const room = new ClassRoom("2202", "3幢", ["kobe", "james"]);

// kobe
// 迭代器提高停止
for (const item of room) {
  console.log(item);
  if (item=="kobe") {
    break;
  }
}

3. 生成器

3.1. 什么是生成器?

生成器是ES6中新增的一种函数控制、使用的方案，它可以更加灵活的控制函数什么时候继续执行、暂停执行等
平时编写的很多的函数，终止的条件通常是返回值或者发生了异常
生成器函数也是一个函数，但是和普通的函数有一些区别
- 首先，生成器函数需要在function的后面加一个符号
- 其次，生成器函数可以通过yield关键字来控制函数的执行流程
- 最后，生成器函数的返回值是一个generator(生成器)
  - 生成器事实上是一种特殊的迭代器
  - MDN：Instead, they return a special type of iterator, called a Generator
如下代码，生成器函数foo的执行体压根没有执行，它只是返回了一个生成器对象
- 那么如何可以让它执行函数中的东西呢？调用next即可
- 迭代器的next是会有返回值的
- 但是很多时候不希望next返回的是一个undefined，这个时候可以通过yield来返回结果

 function* foo(){
    console.log("函数开始执行");

    const value1 = 100;
    console.log(value1);
    yield value1

    const value2 = 200;
    console.log(value2);
    yield value2

    const value3 = 300;
    console.log(value3);
    yield value3

    console.log("函数执行结束");
   return "finsih"
}

const generator = foo();
/**
函数开始执行
100
{ value: 100, done: false }
200
{ value: 200, done: false }
300
{ value: 300, done: false }
函数执行结束
{ value: 'finsih', done: true }
*/
console.log(generator.next());
console.log(generator.next());
console.log(generator.next());
console.log(generator.next());

3.2. yield/return

生成器函数中遇到yield关键字会暂停函数的执行
生成器函数中遇到return关键字会停止函数的执行
- 当是函数最后一句语句为return值时，则最后一个next的value值是return值

function* foo(){
    console.log("函数开始执行");

    const value1 = 100;
    console.log(value1);
    return value1;
    yield

    const value2 = 200;
    console.log(value2);
    yield value2

    const value3 = 300;
    console.log(value3);
    yield value3

    console.log("函数执行结束");
}

const generator = foo();
/**
函数开始执行
100
{ value: 100, done: true }
{ value: undefined, done: true }
{ value: undefined, done: true }
{ value: undefined, done: true }
*/
console.log(generator.next());
console.log(generator.next());
console.log(generator.next());
console.log(generator.next());

3.3. 生成器传递参数 – next函数

函数既然可以暂停来分段执行，那么函数应该是可以传递参数的，是否可以给每个分段来传递参数呢?
- 答案是可以的
- 在调用next函数的时候，可以给它传递参数，那么这个参数会作为上一个yield语句的返回值
- 注意：也就是为本次的函数代码块执行提供了一个值

function* foo(initial){
    console.log("函数开始");

    const value1 = yield initial+" aaa";
    const value2 = yield value1+" bbb";
    const value3 = yield value2+" ccc";

    console.log("函数结束");
}

/**
函数开始
result1 { value: 'why aaa', done: false }
result2 { value: 'why aaa bbb', done: false }
result3 { value: 'why aaa bbb ccc', done: false }
函数结束
{ value: undefined, done: true }
*/
const generator = foo("why");
const result1 = generator.next();
console.log("result1",result1);
const result2 = generator.next(result1.value);
console.log("result2",result2);
const result3 = generator.next(result2.value);
console.log("result3",result3);
console.log(generator.next());

3.4. 生成器提前结束 – return函数

还有一个可以给生成器函数传递参数的方法是通过return函数
- return传值后这个生成器函数就会结束，之后调用next不会继续生成值了
- 并将return函数返回的值作为next返回的value值，done变为true

function* foo(initial){
    console.log("函数开始");

    const value1 = yield initial+" aaa";
    console.log("value1",value1);
    const value2 = yield value1+" bbb";
    const value3 = yield value2+" ccc";

    console.log("函数结束");
}

const generator = foo("why");

/**
函数开始
result1 { value: 'why aaa', done: false }
result2 { value: '***', done: true }
result3 { value: undefined, done: true }
result4 { value: undefined, done: true }
*/
console.log("result1",generator.next());
console.log("result2",generator.return("***"));
console.log("result3",generator.next());
console.log("result4",generator.next());

3.5. 生成器抛出异常 – throw函数

除了给生成器函数内部传递参数之外，也可以给生成器函数内部抛出异常
- 抛出异常后可以在生成器函数中捕获异常

function* foo(){
    console.log("函数开始");

    try {   
        yield "Hello World"
    } catch (err) {
        console.log("捕获异常",err);
        yiels "123"
    }

    yield "abc"

    console.log("函数结束");
}

const generator = foo();

/**
函数开始
{ value: 'Hello World', done: false }
捕获异常 error message
{ value: 'abc', done: false }
函数结束
{ value: undefined, done: true }
*/
console.log(generator.next());
generator.throw("error message");
console.log(generator.next());
console.log(generator.next());

3.6. 生成器替代迭代器

生成器是一种特殊的迭代器，那么在某些情况下可以使用生成器来替代迭代器

function* createArrayIterator(arr){
    for (const item of arr) {
        yield item
    }
}
const generator = createArrayIterator(["abc","cba","nba"]);
/**
{ value: 'abc', done: false }
{ value: 'cba', done: false }
{ value: 'nba', done: false }
{ value: undefined, done: true }
*/
console.log(generator.next());
console.log(generator.next());
console.log(generator.next());
console.log(generator.next());


function* createRangeIterator(start,end){
    for (let i = start; i < end; i++) {
        yield i 
    }
}
const rangeIterator = createRangeIterator(10,20);
/**
{ value: 10, done: false }
{ value: 11, done: false }
{ value: 12, done: false }
{ value: 13, done: false }
*/
console.log(rangeIterator.next());
console.log(rangeIterator.next());
console.log(rangeIterator.next());
console.log(rangeIterator.next());

还可以使用yield*来生产一个可迭代对象
- 相当于是一种yield的语法糖，只不过会依次迭代这个可迭代对象，每次迭代其中的一个值
  1
  2
  3
  function* createArrayIterator(arr){
  yield* arr
  }

3.7. 自定义类迭代 – 生成器实现

将之前的自定义类迭代换成生成器

class ClassRoom {
    constructor(address, name, students) {
        this.address = address;
        this.name = name;
        this.students = students;
    }
    entry(newStudent) {
        this.students.push(newStudent);
    }

    *[Symbol.iterator]() {
        yield* this.students;
    }
}

const room = new ClassRoom("2201", "3幢", ["john", "amy"]);

room.entry("wendy");

/**
john
amy
wendy
*/
for (const item of room) {
    console.log(item);
}

3.8. 对生成器的操作

既然生成器是一个迭代器，那么可以对其进行如下的操作

function* createArrayIterator(arr) {
//   for (const item of arr) {
//       yield item
//   }
  yield* arr;
}

const generator1 = createArrayIterator(["abc", "cba", "nba"]);
for (const item of generator1) {
  console.log(item);
}

const generator2 = createArrayIterator(["abc", "cba", "nba"]);
const set = new Set(generator2);
console.log(set);

const generator3 = createArrayIterator(["abc", "cba", "nba"]);
Promise.all(generator3).then((res) => {
  console.log(res);
});

4. 异步处理方案

学完了前面的Promise、生成器等，目前来看一下异步代码的最终处理方案
需求
- 需要向服务器发送网络请求获取数据，一共需要发送三次请求
- 第二次的请求url依赖于第一次的结果
- 第三次的请求url依赖于第二次的结果
- 依次类推

function requestData(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(url);
    }, 1000);
  });
}

4.1. 方案一:多次回调

回调地狱

// 方案一：多次回调
// 回调地狱
function getData() {
  requestData("https://www.baidu.com").then((res) => {
    requestData(res + " aaa")
      .then((res) => {
        return requestData(res + " bbb");
      })
      .then((res) => {
        console.log(res);
      });
  });
}

getData();

4.2. 方案二:Promise的then返回值

function getData() {
  requestData("https://www.baidu.com")
    .then((res) => {
      return requestData(res + " aaa");
    })
    .then((res) => {
      return requestData(res + " bbb");
    })
    .then((res) => {
      console.log(res);
    });
}

// https://www.baidu.com aaa bbb
getData();

4.3. 方案三:Promise+Generator

function* getData(){
    const res1 = yield requestData("https://www.baidu.com");
    const res2 = yield requestData(res1+" aaa");
    const res3 = yield requestData(res2+" bbb");
    console.log(res3);
}

const generator = getData();
// https://www.baidu.com aaa bbb
generator.next().value.then(res=>{
    generator.next(res).value.then(res=>{
        generator.next(res).value.then(res=>{
            generator.next(res);
        })
    })
})

// 封装一个工具函数execGenerator自动执行生成器函数
function execGenerator(fn){
    const generator = fn();
    function exec(res){
        const result = generator.next(res);
        if(result.done){
            return result.values;
        }
        result.value.then(res=>{
            exec(res);
        })
    }
    exec();
}
// https://www.baidu.com aaa bbb
execGenerator(getData);

4.4. 方案四:第三方包co

通过以下方法也可以得到同样的效果，需要安装co包 npm i co

https://github.com/tj/co

1
2
3

const co = require('co');
// https://www.baidu.com aaa bbb
co(getData);

4.5. 方案五:async/await

async function getData(){
  const res1 = await requestData("https://www.baidu.com");
  const res2 = await requestData(res1+" aaa");
  const res3 = await requestData(res2+" bbb");
  console.log(res3);
}
getData();