JavaScript进阶知识汇总~（二）

// 原理是创建一个构造函数，构造函数的原型指向对象，然后调用new 操作符创建实例，并返回这个实例，本质是一个浅拷贝
var cat = {
  heart: '❤️',
  colors: ['white', 'black']
}
var guaiguai = Object.create(cat)
var huaihuai = Object.create(cat)
console.log(guaiguai)    
// 原型链：{}[[Prototype]]:Object colors : (2) ['white', 'black']heart : "❤️" [[Prototype]]:Object
console.log(huaihuai)
// 原型链：{}[[Prototype]]:Object colors : (2) ['white', 'black']heart : "❤️" [[Prototype]]:Object
cat.colors.push('blue')     // 在原对象上个修改colors属性
guaiguai.colors             // ['white', 'black', 'blue'] 浅拷贝
// 同样的,对于 setPrototypeOf而言也是
var cat = {
  heart: '❤️',
  colors: ['white', 'black']
}
res1 = {}        // 因为Object.setPrototypeOf()没有返回值，所以先定义好一个对象
Object.setPrototypeOf(res1, cat);       // res1的原型指向cat对象

// 在原型式继承的基础之上进行了一下优化
var cat = {
  heart: '❤️',
  colors: ['white', 'black']
}
function createAnother (original) {         // 在原型式继承的基础上再封装一层，来增强对象，之后将这个对象返回。
    var clone = Object.create(original);
    clone.actingCute = function () {
      console.log('我是一只会卖萌的猫咪')
    }
    return clone;
}
var guaiguai = createAnother(cat)
var huaihuai = Object.create(cat)
huaihuai.heart             // '❤️'
guaiguai.actingCute()      // 我是一只会卖萌的猫咪

// 我们一直都是以一个子类继承一个父类，而混入方式继承就是教我们如何一个子类继承多个父类的。
// 需要用到ES6中的方法Object.assign()
// 它的作用就是可以把多个对象的属性和方法拷贝到目标对象中，若是存在同名属性的话，后面的属性会把前面的覆盖掉
// Object.assign(target, ...sources) 静态方法将一个或者多个源对象中所有可枚举的自有属性复制到目标对象，并返回修改后的目标对象
// 参数一：需要应用源对象属性的目标对象，修改后将作为返回值
// 参数二：一个或多个包含要应用的属性的源对象
function Parent (sex) {
  this.sex = sex
}
Parent.prototype.getSex = function () {
  console.log(this.sex)
}
function OtherParent (colors) {
  this.colors = colors
}
OtherParent.prototype.getColors = function () {
  console.log(this.colors)
}
function Child (sex, colors) {
  Parent.call(this, sex)               
  OtherParent.call(this, colors)       // 新增的父类
  this.name = 'child'
}
Child.prototype = Object.create(Parent.prototype)
Object.assign(Child.prototype, OtherParent.prototype) // 新增的父类原型对象
Child.prototype.constructor = Child
var child1 = new Child('boy', ['white'])
console.log(child1) 
// 原型链：Child {sex: 'boy', colors: Array(1), name: 'child'}colors: ['white']name: "child"sex: "boy"[[Prototype]]: Parentconstructor: ƒ Child(sex, colors)getColors: ƒ ()arguments: nullcaller: nulllength: 0name: ""prototype: {constructor: ƒ}[[FunctionLocation]]: VM23262:10[[Prototype]]: ƒ ()[[Scopes]]: Scopes[1][[Prototype]]: ObjectgetSex: ƒ ()constructor: ƒ Parent(sex)[[Prototype]]: Object
child1.__proto__               // Parent {getColors: ƒ, constructor: ƒ}
child1.__proto__.__proto__     // {getSex: ƒ, constructor: ƒ}
// 可以看出Parent.prototype.getSex()和OtherParent.prototype.getColors(),他们不在同一个原型上, 正常来讲是在同一个原型上
// ===============================================================================================================
function Parent (sex) {
  this.sex = sex
}
Parent.prototype.getSex = function () {
  console.log(this.sex)
}
function OtherParent (colors) {
  this.colors = colors
}
OtherParent.prototype.getColors = function () {
  console.log(this.colors)
}
function Child (sex, colors) {
  Parent.call(this, sex)
  OtherParent.call(this, colors) // 新增的父类
  this.name = 'child'
}
Object.assign(Parent.prototype, OtherParent.prototype) // 新增的父类原型对象，其它原型上的属性添加的目标原型上
Child.prototype = Object.create(Parent.prototype)      // 创建一个Parent的新对象，新对象指向Child的原型
// Object.setPrototypeOf(Child.prototype, Parent.prototype)
Child.prototype.constructor = Child          // 认亲爹
var child1 = new Child('boy', ['white'])
console.log(child1)                     
// 原型链：Child {sex: 'boy', colors: Array(1), name: 'child'}colors : ['white']name : "child"sex : "boy" [[Prototype]]:Parent constructor : ƒ Child(sex, colors) [[Prototype]]:Object getColors : ƒ ()getSex : ƒ ()constructor : ƒ Parent(sex) [[Prototype]]:Object
child1.__proto__.__proto__           
// {getSex: ƒ, getColors: ƒ, constructor: ƒ}  getSex和getColors现在已经在同一个原型上了
console.log(Child.prototype.__proto__ === Parent.prototype)           // true
console.log(Child.prototype.__proto__ === OtherParent.prototype)      // false
console.log(child1 instanceof Parent)                                 // true
console.log(child1 instanceof OtherParent)                            // false
// 混入式继承的缺点：对于两个或者多个父类，只能维持一个instanceof正常。

class Parent {
  constructor (name) {
    this.name = name
  }
  getName () {
    console.log(this.name)
  }
}
class Child extends Parent {        // class通过extends关键字实现继承，让子类继承父类的属性和方法
  constructor (name) {
    super(name)                     // super在这里表示父类的构造函数，用来新建一个父类的实例对象
    this.sex = 'boy'
  }
}
var child1 = new Child('child1')
console.log(child1)    
// 原型链：Child {name: 'child1', sex: 'boy'}name : "child1"sex : "boy" [[Prototype]]:Parent constructor : class Child[[Prototype]]:Object constructor : class Parent getName:ƒ getName() [[Prototype]]:Object
// 从完整的原型链可以看出class的继承方式完全满足于寄生组合继承
// ===============================================================================================================
class Parent {
  constructor () {
    this.name = 'parent'
  }
}
class Child extends Parent {
  constructor () {
    // super(name) // super注释掉   
  }
}
var child1 = new Child()    // Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor 
/* 
【重点】
  1.ES6规定，子类必须在constructor()方法中调用super()，否则就会报错。
    这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，
      然后再对其进行加工，添加子类自己的实例属性和方法。如果不先调用super()方法，子类就得不到自己的this对象。
    2.如果使用了extends实现继承的子类内部没有constructor方法，则会被默认添加constructor和super；
      若子类中有constructor方法，必须得在constructor中调用一下super函数，否则会报错。
    4.需要注意的地方是，在子类的constructor方法中，只有调用super()之后，才可以使用this关键字，否则会报错。
      这是因为子类实例的构建，必须先完成父类的继承，只有super()方法才能让子类实例继承父类。
      可以理解为，新建子类实例时，父类的构造函数必定会先运行一次
*/
// ===============================================================================================================
// super关键字，既可以当作做函数使用，也可以当做对象使用。
// 1.super当成函数调用时，代表父类的构造函数，且返回的是子类的实例，也就是此时super内部的this指向子类
class Parent {
  constructor () {
    console.log(new.target.name)     // 在构造函数内部使用new关键字创建对象时，返回该构造函数的名称。
  }
}
class Child extends Parent {
  constructor () {
    var instance = super()          // 在子类的constructor中super()就相当于是Parent.prototype.constructor.call(this)
    /* 调用super()的作用是形成子类的this对象，把父类的实例属性和方法放到这个this对象上面；
       子类在调用super()之前，是没有this对象的，任何对this的操作都要放在super()的后面。*/
    console.log(instance)
    console.log(instance === this)
  }
}
var child = new Child()   
// Child         
// Child {}  super当做函数来使用时，虽然它代表着父类的构造函数，但是返回的却是子类的实例，也就是说super内部的this指向的是Child。  
// true
/*
super当做函数使用时的限制：   
  1.子类constructor中如果要使用this的话就必须放到super()之后
  2.super当成函数调用时只能在子类的construtor中使用
*/
// super()在子类构造方法中执行时，子类的属性和方法还没有绑定到this，如果存在同名属性，此时拿到的是父类的属性。
class A {
  name = 'A';
  constructor() {
    console.log(this.name);
  }
}
class B extends A {
  name = 'B';
}
new B();  // A  原因在于super()执行时，B的name属性还没有绑定到this，所以this.name拿到的是A的name属性
// super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。
// 在普通方法中：
class A {
  p() {
    console.log('tzw');
  }
}
class B extends A {
  constructor() {
    super();
    super.p();         // 2 就是将super当作一个对象使用, super.p()就相当于A.prototype.p()
    // 需要注意的是由于super指向父类的原型对象，所以定义在父类实例上的方法或属性，是无法通过super调用的。
    // 或者说定义在父类原型对象上的属性和方法，super就可以取到
  }
}
new B();
// ES6规定，在子类普通方法中通过super调用父类的方法时，方法内部的this指向当前的子类实例。
class A {
  constructor() {
    this.x = 1;
    this.y = 1;
  }
  print() {
    console.log(this.x);
  }
}
class B extends A {
  constructor() {
    super();         
    this.x = 2;
    console.log(this.y)      // 1
    super.y = 2;    // 由于this指向子类实例，所以如果通过super对某个属性赋值，这时super就是this，赋值的属性会变成子类实例的属性。
    console.log(super.y)     // undefined
    // super.x赋值2，这时等同于对this.x赋值为3。而当读取super.x的时候，读的是A.prototype.x，所以返回undefined
  console.log(this.y)      // 2
  }
  m() {
    super.print();           // 2 调用的是A.prototype.print()，但是A.prototype.print()内部的this指向子类B的实例，导致输出的是2，而不是1。也就是说，实际上执行的是super.print.call(this)
  }
}
let b = new B();
b.m()     // 2
// ===============================================================================================================
// 2.super作为对象时用在静态方法之中，这时super将指向父类；在普通方法之中指向父类的原型对象。
class Parent {
  constructor (name) {
    this.name = name
  }
  getName () {
    console.log(this.name)
  }
}
Parent.prototype.getSex = function () {
  console.log('boy')              // child1
}
Parent.getColors = function () {
  console.log(['white'])
}
class Child extends Parent {
  constructor (name) {
    super(name)
    super.getName()
    // console.log(super);         // 报错 要能清晰地表明super的数据类型(作为函数还是对象使用)才不会报错
  }
  instanceFn () {
    super.getSex()                 // super在普通方法之中指向父类的原型对象
  }
  static staticFn () {
    super.getColors()   // 在子类的静态方法中通过super调用父类的方法时，方法内部的this指向当前的子类，而不是子类的实例。  
  }
}
var child1 = new Child('child1') 
child1.instanceFn()  // boy 在普通方法child1.instanceFn里面，super.getSex指向父类的原型对象
Child.staticFn()     // ['white'] 静态方法Child.staticFn里面，super.staticFn指向父类的静态方法。这个方法里面的this指向的是Child，而不是Child的实例。
//由于对象总是继承其他对象的，所以可以在任意一个对象中，使用super关键字
// extends后面接着的继承目标不一定要是个class，只要父类是一个有prototype属性的函数就能被子类继承

// 多态最根本的作用就是通过把过程化的条件语句转化为对象的多态性，从而消除这些条件分支语句。
// 实际上是一种编程的思想
// 对于JS是具有与生俱来的多态性它的变量类型在运行期是可变的，程序并没有要求我指定它的类型，也就是它并不存在这种类型之间的耦合关系。

/*
1.获取对象属性描述符
    Object.getOwnPropertyDescriptor(对象, 属性名)   获取一个对象的某个属性的属性描述符
    Object.getOwnPropertyDescriptors(对象)         获取某个对象的所有属性描述符
2.为某个对象添加属性时 或 修改属性时，配置其属性描述符，使用以下这两种方法
  Object.defineProperty(对象, 属性名, 描述符)      设置一个对象的某个属性
  Object.defineProperties(对象, 多个属性的描述符);  设置一个对象的多个属性
需要注意的是，如果尝试修改不可配置的属性描述符，或者通过`Object.defineProperty()`方法定义已经存在的属性，严格模式下会抛出错误，非严格模式下会被忽略。
*/
// 主要介绍下设置多个属性的描述符
var obj = {
    property1: false,
    property2: false,
};
Object.defineProperties(obj, {
  'property1': {
    value: true,
  },
  'property2': {
    value: 'Hello',
    enumerable: false,      // 设置为不可枚举
  }
});
for (let i in obj) { console.log(i) }     // property1 property2不会被遍历，因为for...in遍历的是对象所有可遍历(enumerable)的属性 
// ===============================================================================================================
// 描述符修改的几种情况
// 1.
let person1 = {};
Object.defineProperty(person1, "name", {
    configurable: true,                                       // 允许修改属性的描述符和删除属性
    writable: true,                                           // 属性的值可以被修改
    value: "abc",
})
Object.defineProperty(person1, "name", {writable: false})     // 第二次将writeable修改为第一次设置的相反值
console.log(person1.name);      // abc
// 2.
let person2 = {};
Object.defineProperty(person2, "name", {
    configurable: true,                                       // 允许修改属性的描述符和删除属性
    writable: false,                                          // 属性的值不可以被修改
    value: "def",
})
Object.defineProperty(person2, "name", {writable: true})     // 第二次将writeable修改为第一次设置的相反值
console.log(person2.name);      // abc
// 3.
let person3 = {};
Object.defineProperty(person3, "name", {
    configurable: false,                                    // 不允许修改属性的描述符和删除属性
    writable: true,                                         // 属性的值可以被修改
    value: "123",
})
Object.defineProperty(person3, "name", {writable: false})   // 第二次将writeable修改为第一次设置的相反值
console.log(person3.name);     // 123     
// 4.
let person4 = {};
Object.defineProperty(person4, "name", {
    configurable: false,
    writable: false,
    value: "456",
})
Object.defineProperty(person4, "name", {writable: true})   // 报错 TypeError: Cannot redefine property:
/*
  1.当configurable为true 时，一切都是可以修改的
  2.当configurable为false时，第二次修改为原值时不报错，如果第二次修改为相反值时存在一种特殊情况
    configurable 与 writable 有一个值为true时value的值可修改 writable--->false
    3.当configurable 为 false 时, 除了第2种情况之外，其它的修改都会报错。
    ----------------------------------------------------------------------------------------
    enumerable 看 configurable 
      (configurable和enumerable：这两个选项之间没有直接的互斥关系，但它们与其他属性描述符选项存在相互关系)
  value 看 configurable和writable
  writable 看 configurable和writable
  value和writable 与 get与set 互斥
  get和set：如果同时设置了get和set选项，则不能再设置value或writable选项；
    get和set方法提供了属性的自定义读取和写入行为，因此value和writable选项变得无意义。
*/

const target = {                  // 目标对象
  name: 'John'
};
const handler = {                 // 处理器对象
  // 捕获器在处理程序对象中以方法名为键
  get(target, property, receiver) {
    console.log(`Reading property '${property}'`);
    return target[property];      // 返回目标对象的属性值
  },
  set(target, property, value, receiver) {
    console.log(`Setting property '${property}' to '${value}'`);
    target[property] = value;     // 设置目标对象的属性值
    return true;                  // 设置成功返回true
  }
};
const proxy = new Proxy(target, handler);     // 创建代理对象，代理对象使用Proxy构造函数将目标对象和处理程序对象handler结合起来
proxy.name               // 查看代理对象的属性
// Reading property 'name'  
// john                  // get捕获器返回值
proxy.age = 26           // 修改代理对象设置属性
// Setting property 'age' to '26'  
// 26                    // set捕获器返回值
/*
常见的代理捕获方法：
  1.get(target, property, receiver)：捕获属性的读取操作。
  2.set(target, property, value, receiver)：捕获属性的赋值操作。
  3.has(target, property)：捕获in运算符的操作。
  4.deleteProperty(target, property)：捕获delete运算符的操作。
  5.apply(target, thisArg, argumentsList)：捕获函数调用的操作
*/

const obj = {
  name: 'tzw',
  greeting() {
    return `Hello, ${this.name}!`;
  }
};
console.log(Reflect.get(obj, 'name'));    // tzw 获取obj对象的name属性
Reflect.set(obj, 'age', 26);              // true 设置obj对象的age属性
console.log(Reflect.has(obj, 'age'));     // true 查看obj对象是否有age属性
Reflect.deleteProperty(obj, 'age');       // true 删除obj对象的age属性
console.log(obj.age)                      // undefined
const result = Reflect.apply(obj.greeting, { name: 'qdd' }, []);    // 改变obj对象的greeting方法的this指向
console.log(result)                       // qdd 
/*
常见的代理捕获方法
  1.Reflect.get(target, property, receiver)：获取对象的属性值。
  2.Reflect.set(target, property, value, receiver)：设置对象的属性值。
  3.Reflect.has(target, property)：检查对象是否具有指定属性。
  4.Reflect.deleteProperty(target, property)：删除对象的属性。
  5.Reflect.apply(func, thisArg, args)：调用函数并传递参数。
*/

// 典例
// eg1:(hook)
test6 = {a: 10}
var test6 = new Proxy(test6, {
        defineProperty: function(target, property, descriptor) {
        debugger;
        console.log(arguments)
        return Reflect.defineProperty(...argume   nts)
    }
});
attributes = {
    configurable: false,
    enumerable: false,
    writable: false,
    value: 1000,
}
Object.defineProperty(test6, 'a', attributes)
// eg2:
var proxy = {};
var target = proxy
var handler = {
    getPrototypeOf: function (){console.log(arguments);return Reflect.getPrototypeOf(this)}
}
proxy1 = new Proxy(target, handler)

// 创建一个异步对象
var promise = new Promise((resolve, reject) => {    // 回调函数写成更简介的箭头函数，是一个标准的promise
  // ...
  if (/* 异步操作成功 */){
    resolve(value);
  } else { /* 异步操作失败 */
    reject(new Error());
  }
});
/*
  1.Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己实现。
  2.resolve函数的作用是，将Promise实例的状态从“未完成”变为“成功”（即从pending变为fulfilled），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去。
  3. reject函数的作用是，将Promise实例的状态从“未完成”变为“失败”（即从pending变为rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
*/

// 初始态
var callback = function(resolve, reject){}
const promise1 = new Promise(callback)
console.log(promise1)
// Promise {<pending>}
// 成功态
var callback = function(resolve, reject){resolve()}
const promise1 = new Promise(callback)
console.log(promise1)
// Promise {<fulfilled>: undefined}
// 失败态
var callback = function(resolve, reject){reject()}
const promise1 = new Promise(callback)
console.log(promise1)
// Promise {<rejected>: undefined}
// 以上就是promise1的三种状态
// 打印顺序是什么？
const promise1 = new Promise((resolve, reject) => {    // Promise 不是一个异步操作
  console.log('promise1')
})
console.log('1', promise1);
// promise1
// 1 Promise {<pending>}
/*
  创建promis对象的时候，此时，它是一个同步操作，promise1.then()才是一个异步操作；
  所以，执行顺序从上至下，先遇到new Promise，执行该构造函数中的代码，打印promise1；
  然后执行同步代码打印1，此时promise1没有被resolve或者reject，因此状态还是pending。
*/
/*
promise1 原型：Promise.prototype
  constructor: ƒ Promise()   这玩意没啥说的
  then: ƒ then()             主要看这个
  catch: ƒ catch()           看名字就应该知道它应该是错误回收
  finally: ƒ finally()       看名字就应该知道它是最后执行的
*/

// 1. promise是成功态时
const promise = new Promise((resolve, reject) => {
  console.log(1);
  resolve('success')
  console.log(2);
});
promise.then(() => {    
  console.log(3);
});
console.log(4);
console.log(promise);
// 1
// 2
// 4
// Promise {<fulfilled>: 'success'}
// 3
/* 
执行步骤：
  1.从上至下，先遇到new Promise，执行其中的同步代码打印1
  2.再遇到resolve('success')， 将promise的状态改为了fulfilled(成功态)并且将值保存下来
  3.继续执行同步代码打印2
  4.跳出promise对象，往下执行，碰到promise.then这个微任务，将其加入微任务队列【注意，这里实际上发生的过程】
  5.执行同步代码打印4
  6.执行同步代码promise,打印promise的状态
  7.本轮宏任务队列全部执行完毕，检查微任务队列，发现promise.then这个微任务且状态为fulfilled，执行它。
*注意：
  在看到promise.then()还会创建一个promis对象，它的状态为pending(初始态)；
  当then发方法里边的函数执行完且没有报错的情况下，它的状态变为fulfilled(成功态)；
  如果报错，就会变成rejected(失败态)。
*/
// 2. promise是失败态时
const promise = new Promise((resolve, reject) => {
  console.log(1);
  reject('failed')
  console.log(2);
});
promise.then(() => {
  console.log(3);
});
console.log(4);
// 1
// 2
// 4
/* 
执行步骤：
  1.从上至下，先遇到new Promise，执行其中的同步代码打印1
  2.再遇到reject('failed')， 将promise的状态改为了rejected(失败态)并且将值保存下来
  3.继续执行同步代码打印2
  4.跳出promise对象，往下执行，碰到promise.then，只有promise是成功态的时候，promise.then里面的内容才会被放到微任务队列里边，
  5.执行同步代码打印4
  6.执行同步代码promise,打印promise的状态
  7.本轮宏任务队列全部执行完毕，检查微任务队列，没有任务。
*注意：
  promise.then(), 只有promise是fulfilled(成功态)的时候，promise.then里边的内容才会被放到微任务队列
*/
const promise = new Promise((resolve, reject) => {
  console.log(1);
  console.log(2);
});
promise.then(() => {     // 此时的promise的状态是pending，不会放到微任务队列
  console.log(3);
});
console.log(4);
// 1
// 2
// 4

const then_callback = function(){console.log(arguments)}
const promise = new Promise((resolve, reject) => {
  resolve('success')         // 这个成功态的值会被promise.then的回调函数所接收到，它的第一个参数就是这个值
});
const result = promise.then(then_callback);      
console.log(result);              
// Promise {<pending>}  当一个已完成的“F”状态的Promise遇到then方法，一定瞬间产生一个新的Promise，状态为P 
// { "0": "success" } 
const promise1 = new Promise((resolve, reject) => {
  console.log('promise1')
  resolve('resolve1')
})
const promise2 = promise1.then(res => {     //promise1调用then的时候，不管后面跟的什么，一瞬间创建一个新的Promise对象
  console.log(res)
})
console.log('1', promise1);
console.log('2', promise2);
// promise1
// 1 Promise {<fulfilled>: 'resolve1'}
// 2 Promise {<pending>}
// resolve1
/*
执行步骤：
    1.从上至下，先遇到new Promise，执行该构造函数中的代码打印promise1
    2.碰到resolve函数, 将promise1的状态改变为fullfiled，并将结果保存下来
    3.碰到promise1.then这个微任务，将它放入微任务队列【只要遇到then方法，一定产生一个新的Promise】
    4.promise2是一个新的状态为pending的Promise
    5.执行同步代码打印1， 同时打印出promise1的状态是fulfilled
    6.执行同步代码打印2，同时打印出promise2的状态是pending
    8.宏任务执行完毕，查找微任务队列，发现promise1.then这个微任务且状态为fulfilled，执行它。
*/
const fn = () =>
  new Promise((resolve, reject) => {
    console.log(1);
    resolve("success");
  });
console.log("start");
fn().then(res => {
  console.log(res);
});
// start
// 1
// success

const promise1 = Promise.resolve('success')  // 产生了一个已完成的 Promise
const promise2 = promise1.then((res) => {console.log(res)})
console.log(promise2)
// Promise {<pending>}
// success
// 在控制台再次打印
console.log(promise2)
// Promise {<fulfilled>: undefined}
/*
可以得出结论：promise1.then的返回值是promise实例化对象【已完成】，当.then的一瞬间，创造一个状态为Pending的promise，如果之前的promise已完成，就一瞬间把回调函数放入微队列；这个promise返回值的状态是 pending，但是一旦微队列里面的内容执行完毕了，那么，这个值就变成了fulfilled状态
*/
// ===============================================================================================================
// 采用链式的then，可以指定一组按照次序调用的回调函数；
// 前一个回调函数，有可能返回的还是一个Promise对象（即有异步操作），
// 这时后一个回调函数，就会等待该Promise对象的状态发生变化，才会被调用。
// 经典案列：
Promise.resolve()
    .then(() => {
        console.log(0);
        return Promise.resolve(4);      
    }).then(
    (res) => {
        console.log(res)
    }
)
Promise.resolve()
    .then(
    () => {
        console.log(1);
    }).then(
    () => {
        console.log(2);
    }).then(
    () => {
        console.log(3);
    }).then(
    () => {
        console.log(5);
    }).then(
    () => {
        console.log(6);
    })
// 0
// 1
// 2
// 3
// 4
// 5
// 6
// 解析参考：https://www.zhihu.com/question/453677175?rf=512445784

console.log('start')
setTimeout(() => {
  console.log('time')
})
//.then方法接收两个回调函数，当Promise是成功态时把第一个回调函数放到微任务队列里边去，失败态时将第二个回调函数放到微任务队列里边去。
Promise.resolve().then(() => {  
  console.log('resolve')
})
console.log('end')
// start
// end
// resolve
// time
/*
执行步骤：
  1.刚开始整个脚本作为一个宏任务来执行，对于同步代码直接压入执行栈进行执行，因此先打印出start和end。
    2.setTimout作为一个宏任务被放入宏任务队列(下一个宏任务队列，并不是当前宏任务队列)
    3.Promise.then作为一个微任务，因为是成功态，所以被放入微任务队列
    4.本次宏任务执行完，检查微任务，发现Promise.then，执行它
    5.接下来进入下一个宏任务，发现setTimeout，执行。
*/
// 当我们new一个Promise的时候它是一个同步执行的任务，
// 只有调用.then方法的时候才会把then里边的回调函数放到微任务队列里边去
const promise = new Promise((resolve, reject) => {
  console.log(1);
  setTimeout(() => {
    console.log("timerStart");
    resolve("success");
    console.log("timerEnd");
  }, 0);
  console.log(2);
});
promise.then((res) => {
  console.log(res);
});
console.log(4);
// 1
// 2
// 4
// timerStart
// timerEnd
// success
/*
执行步骤：
    1.从上至下，先遇到new Promise，执行该构造函数中的代码1
    2.然后碰到了定时器，将这个定时器中的函数放到下一个宏任务的延迟队列中等待执行
    3.执行同步代码2
    4.跳出promise函数，遇到promise.then，但其状态还是为pending，这里理解为先不执行
    5.执行同步代码4
    6.一轮循环过后，进入第二次宏任务，发现延迟队列中有setTimeout定时器，执行它
    7.首先执行timerStart，然后遇到了resolve，将promise的状态改为resolved且保存结果并将之前的promise.then推入微任务队列
    8.继续执行同步代码timerEnd
    9.宏任务全部执行完毕，查找微任务队列，发现promise.then这个微任务，执行它。
*/
// ===============================================================================================================
// *宏任务队列中产生的微任务会在当前宏任务完成后立即执行
setTimeout(() => {
  console.log('timer1');
  Promise.resolve().then(() => {
    console.log('promise')
  })
}, 0)
setTimeout(() => {
  console.log('timer2')
}, 0)
console.log('start')
// start
// timer1
// promise
// timer2
// 当宏任务执行过程中产生微任务的时候，会直接轮询微任务；
// 也可以理解为setTimeout会独立启用一个宏任务队列，而不是去排队。
Promise.resolve().then(() => {
  console.log('promise1');
  const timer2 = setTimeout(() => {
    console.log('timer2')
  }, 0)
});
const timer1 = setTimeout(() => {
  console.log('timer1')
  Promise.resolve().then(() => {
    console.log('promise2')
  })
}, 0)
console.log('start');
// start 
// promise1
// timer1
// promise2
// timer2
/*
执行过程：
    1.刚开始整个脚本作为第一次宏任务来执行，我们将它标记为宏1，从上至下执行
    2.遇到Promise.resolve().then这个微任务，将then中的内容加入第一次的微任务队列标记为微1
    3.遇到定时器timer1，将它加入下一次宏任务的延迟列表，标记为宏2，等待执行(先不管里面是什么内容)
    4.执行宏1中的同步代码打印start
    5.第一次宏任务(宏1)执行完毕，检查第一次的微任务队列(微1)，发现有一个promise.then这个微任务需要执行
    6.执行打印出微1中同步代码promise1，然后发现定时器timer2，将它加入宏任务队列宏2的后面，标记为宏3
    7.第一次微任务队列(微1)执行完毕，执行第二次宏任务(宏2)，首先执行同步代码打印timer1
    8.然后又遇到了Promise.resolve().then这个微任务假定它是promise2，将它加入此次循环的微任务队列，标记为微2
    9.宏2中没有同步代码可执行了，查找本次循环的微任务队列(微2)，发现了promise2，执行它
    10.第二轮执行完毕，执行宏3，打印出timer2
    *注意：setTimeout 会独立启动一个宏任务队列，而不是去当前宏任务队列去排队。
*/
// Promise.resolve().then 产生的微任务会进入本轮微任务队列, 而不会进入下一轮 
Promise.resolve().then(() => {
  console.log('promise1');
  const timer2 = setTimeout(() => {
    console.log('timer2')
  }, 0)
});
const timer1 = setTimeout(() => {
  console.log('timer1')
  Promise.resolve().then(() => {
    console.log('promise2')
  })
}, 0)
Promise.resolve().then(() => {
  console.log('promise3');
  const timer3 = setTimeout(() => {
    console.log('timer3')
    Promise.resolve().then(() => {console.log('promise4')})
  }, 0);
    const timer4 = setTimeout(() => {
    console.log('timer4')
  }, 0);
});
console.log('start');
// start
// promise1 
// promise3 
// timer1 
// promise2 
// timer2  
// timer3 
// promise4 
// timer4
// ===============================================================================================================
// setTimeout加上延时
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  }, 1000) // 注意这个延时
})
const promise2 = promise1.then(() => {
  throw new Error('error!!!')     // thrw抛出报错，new Error不会报错，只是生成一个错位的对象
})
console.log('promise1', promise1)
console.log('promise2', promise2)
setTimeout(() => {
  console.log('promise1', promise1)
  console.log('promise2', promise2)
}, 0)
// promise1 Promise {<pending>}
// promise2 Promise {<pending>}
// Uncaught (in promise) Error: error!!!
// promise1 {<fulfilled>: 'success'}
// promise2 Promise {<rejected>: Error: error!!!}
/*
  throw 语句用来抛出一个用户自定义的异常。
  当前函数的执行将被停止（throw之后的语句将不会执行），并且控制将被传递到调用堆栈中的第一个catch块。
  如果调用者函数中没有catch块，程序将会终止。
*/
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("success");
    console.log("timer1");
  }, 1000);          // 注意这个时间
  console.log("promise1里的内容");
});
const promise2 = promise1.then(() => {
  throw new Error("error!!!");
});
console.log("promise1", promise1);
console.log("promise2", promise2);
setTimeout(() => {
  console.log("timer2");
  console.log("promise1", promise1);
  console.log("promise2", promise2);
}, 0);               // 注意这个时间
// promise1里的内容
// promise1 {<pending>}
// promise2 {<pending>}
// timer2
// promise1 {<pending>}    
// promise2 {<pending>}
// timer1           // timer2比timer1先打印，原因在于setTimeout执行的定时器时间
// Uncaught (in promise) Error: error!!!  输出的时候，报错的优先级要小于日志的优先级
/*
setTimeout解释：
  当第一个 setTimeout() 被调用时，它会将回调函数推入异步执行队列中，并设定一个定时器，经过指定的时间后将该回调函数移出队列并执行。
  如果在定时器到期之前有其他的代码被执行，则该定时器会被暂时挂起，待其他的代码执行完毕后再继续执行这个定时器。
  当当前的执行栈为空时，JavaScript 引擎会检查异步执行队列，并按照队列的先后顺序执行其中的回调函数;
  对于多个 setTimeout() 的情况，引擎会按照设定的时间间隔依次执行它们的回调函数。
  需要注意的是，具体的执行时间可能会受到一些因素的影响，如系统负载、浏览器的事件循环机制等。【当某个定时器的时间到期时，如果当前的执行栈仍然有其他任务在执行，JavaScript 引擎会等待执行栈为空后才会处理定时器回调函数。】因此，设置多个定时器时，它们会按照设定的时间间隔依次添加到异步执行队列中，但具体的执行时间会受到其他因素的影响。并不能保证它们会严格按照设定的时间间隔依次执行，而是在当前执行栈为空时，尽可能快速地按照先后顺序执行。
*/

// 1
const promise = new Promise((resolve, reject) => {
  resolve("success1");
  reject("error");           // 没有任何作用，因为Promise的状态一旦改变，就永久保持该状态，不会再变了
  resolve("success2");       // 没有任何作用，因为Promise的状态一旦改变，就永久保持该状态，不会再变了
});
promise.then(res => {
    console.log("then: ", res);
  }).catch(err => {          // promise抛出一个错误，就被catch()方法指定的回调函数捕获。
    console.log("catch: ", err);
})
// then:  success1
// 总结：promise只要状态从P转变成 F/R，状态就不会再次被改变
// 2
let P1 = Promise.reject().then(()=>{})
console.log(P1)
// Promise {<pending>}  Promise.then状态为pending 
// Uncaught (in promise) undefined  这个报错是Promise.reject()产生的，输出时日志的优先级高于报错的优先级
console.log(P1)         // 再次打印
// Promise {<rejected>: undefined} then方法的第二个参数是rejected状态的回调函数，由于没有第二个回调函数所以是undefined
// 总结：rejected状态的Promis.then方法没有第二个参数，就会返回rejected状态, 如果有第二个参数会返回fulfilled状态
// 3
let P2 = Promise.resolve().then(undefined,()=>{console.log(1)})
console.log(P2)
// Promise {<pending>}  // Promise.then状态为pending
console.log(P2)         // 再次打印
// 总结：fulfilled状态的Promis.then方法没有第一个参数，就会返回fulfilled状态
// 4
let P3 = Promise.reject().then(()=>{}, ()=>{})
console.log(P3)
// Promise {<pending>}
console.log(P3)         // 再次打印
// Promise {<fulfilled>: undefined}
/*
说一下为什么第二次打印状态变为fulfiled或者rejected:
  1. 是因为 Promise 的状态改变和回调函数的执行是异步的；
  2. 当调用 Promise 的方法（比如 resolve()、reject()）时，Promise 对象的状态并不会立即改变，而是在 JavaScript 的事件循环机制中等待下一个微任务阶段执行。
  3. 如果在调用 Promise 方法后立即打印 Promise 对象的状态，那么很可能此时 Promise 对象的状态尚未改变，仍然是 "pending"。
    4. 只有在后续的微任务阶段中，JavaScript 引擎会检查微任务队列中是否有待处理的回调函数，并依次执行这些函数。这时才会执行 Promise 对象的回调函数，并且状态可能被改变为 "fulfilled" 或 "rejected"。
    小tip: 想要准确获取 Promise 对象的最新状态，可以在 then() 方法注册的回调函数中进行状态的打印，这样可以确保你在 Promise 状态变为 "fulfilled" 或 "rejected" 之后再打印对应的状态。
*/
// 5
const promise = Promise.resolve().then(() => {
  return promise;
})
promise.catch()
// 报错
// 总结：.then不能返回其本身，否则报错。 这两句话都报错，但是promise的返回值还是可以接收到的。
// 再次印证了观点：promise.then出现的一瞬间，就会出现一个新的promise而不会去管.then的回调函数的内容。

const promise = new Promise((resolve, reject) => {
  reject("error");
  resolve("success2");      // 没有任何作用，因为Promise的状态一旦改变，就永久保持该状态，不会再变了
});
promise.then(res => {
    console.log("then1: ", res);
  }).then(res => {
    console.log("then2: ", res);
  }).catch(err => {        // catch可以捕捉到任何时候上层还没有捕捉的错误
    console.log("catch: ", err);
  }).then(res => {
    console.log("then3: ", res);
  })
// catch:  error
// then3:  undefined
/*
执行步骤：
  1.由于new的Promise对象，暂定为P0的状态是一个rejected(拒绝态)，拒因是 error；
  2.调用第一个then方法，由于P0的状态已经确定为rejected，then方法没有第二参数，所以当前Promise.then状态为rejected 记为P1；
  3.调用第二个then方法，then方法还是没有第二参数，所以当前Promise.then状态为rejected 记为P2；
  4.之后遇到catch方法，此时Promise.catch的状态是pending，由于P2是rejected，所以就捕获到了错误，并接收到拒因，控制台打印拒因，此时状态就会变为fulfilled 记为C1;
  5.调用最后一个then方法时，由于C1的状态为fulfilled, 所以执行then方法的第一个参数，由于C1没有传值，所以控制台打印是undefined
*/
// 根据以上的案列是否可以理解为，then方法实际上是包含错误捕捉功能的，then方法的第二个参数实际上就是 catch
Promise.resolve(1)
  .then(res => {
    console.log(res);
    return 2;
  })
  .catch(err => {
    return 3;
  })
  .then(res => {
    console.log(res);
  });
// 1
// 2
// 即使catch没有捕捉到错误，它也会正常返回一个fulfilled状态的Promise对象，并且会将上一个promise对象的参数正常传递给下一个then方法
// 如果异步操作抛出错误，状态就会变为rejected，就会调用catch()方法指定的回调函数，处理这个错误。
 Promise.reject(1)
  .then(res => {
    console.log(res);
    return 2;
  })
  .catch(err => {           // 捕获到失败态的Promise对象，并且拿到拒因，
    console.log(err);
    return 3                // 向下传递了一个参数
  })
  .then(res => {
    console.log(res);
  });
// 1
// 3
Promise.resolve().then(() => {
  new Error('error!!!')          // 只是生成了一个Error对象，并没有抛出错误，如果使用throw，后面的catch将捕获到并打印错误
}).then(res => {
  console.log("then: ", res)
}).catch(err => {
  console.log("catch: ", err)
})
// then:  undefined
// throw抛出异常
Promise.resolve().then(() => {
  throw new Error('error!!!')   
}).then(res => {
  console.log("then: ", res)
}).catch(err => {              // catch捕获到错误
  console.log("catch: ", err)
})
// catch:  Error: error!!!
// 建议总是使用catch()方法，而不使用then()方法的第二个参数。
// ===============================================================================================================
// resolve传递丢失的情况
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('timer')
    resolve('success')
  }, 1000)
})
const start = Date.now();
r = promise.then(undefined, res => {   // 参数为undefined，表示不处理fulfilled的情况     
  console.log(res, Date.now() - start)
})
r1 = r.then(res => {
  console.log('r:', r);  
  console.log(res, Date.now() - start)
})
r2 = r1.then(res => {
  console.log('r1:', r1);  
  console.log(res, Date.now() - start)
})
console.log(r2)
// timer
// success 1013
// undefined 1013
/*
  1.当原始的Promise对象promiser的状态变为"fulfilled"时，promise.then的状态和值会受到影响。因为在promiser.then(onFulfilled, onRejected)中，我们传入了undefined作为第一个参数（即onFulfilled），表示不处理fulfilled的情况，所以promiser.then的状态将直接继承自原始Promise对象的状态。
  2.当原始Promise对象的状态已经是"fulfilled"时，promiser.then的状态也将变为"fulfilled"，并且其值将与原始Promise对象保持一致。
*/
Promise.resolve('success').then().then().then((res)=>{console.log(res)}).then((res)=>{console.log(res)})
// success
// undefined 因为前第一个回调函数已经接收到了参数，所以没有拿到值
/*  
  1.当.then()方法没有传入任何参数时，它返回一个新的Promise对象。新的Promise对象与前一个Promise对象的状态和值是相互关联的。
  2.前一个Promise对象的状态为"fulfilled"，新的Promise对象的状态也会是"fulfilled"，并且它的值将和前一个Promise对象保持一致。
*/
Promise.resolve('success').then(()=>{}).then().then((res)=>{console.log(res)}).then((res)=>{console.log(res)})
// undefined
// undefined
/*
  即时回调函数没有取值，但是参数已经传递进去了，导致后面的then方法拿不到
*/
Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)
.then(console.log)
// 1
/*
扩充知识点：
    这里的参数console.log是一个函数，它会作为then()方法的回调函数来执行。
    console.log方法可以接收任意数量的参数，并将它们打印到控制台。
    当传递一个Promise对象作为参数时，console.log方法会按照以下步骤来打印Promise对象的值：
    1.console.log方法被调用，并接收Promise对象作为参数。
    2.console.log方法内部会检查传入的参数是否是一个Promise对象。如果是Promise对象，
      它会等待Promise对象的状态变为resolved（已完成）或rejected（已拒绝）。
        3.一旦Promise对象的状态变为resolved或rejected，console.log方法会获取Promise对象的值，并将其打印到控制台。
    所以，then(console.log) 会正常打印Promise对象的值，而then(console.log())会打印console.log函数执行的结果（通常是 undefined）作为回调函数的参数。  通常我们使用then(console.log)的方式来打印Promise对象的值。
*/

test = Promise.resolve().finally(()=>{console.log('1111111')})
console.log(test)
// Promise {<fulfilled>: undefined}
test = Promise.reject().finally(()=>{console.log('1111111')})
// Uncaught (in promise) undefined  Promise.reject报错
console.log(test)
// Promise {<rejected>: undefined}
test = Promise.resolve().finally(()=>{console.log('1111111');throw 111})
// 1111111
// Uncaught (in promise) 111   throw主动抛出的异常
console.log(test)
// Promise {<rejected>: 111} 这个状态是Promise.finally对象的的状态，
// 因为最终要确定finally的回调函数有没有报错或异常，有异常则返回状态rejected的Promise对象，状态的值为抛出的异常 
function promise1 () {                        // fulfilled
  let p = new Promise((resolve) => {
    console.log('promise1');
    resolve('1')
  })
  return p;
}
function promise2 () {
  return new Promise((resolve, reject) => {  // rejected
    reject('error')
  })
}
promise1()
  .then(res => console.log(res))            // fulfilled 
  .catch(err => console.log(err))           // fulfilled catch没有捕获到异常，它会正常返回一个fulfilled状态的Promise对象
  .finally(() => console.log('finally1'))   // fulfilled 回调函数执行后的状态
promise2()
  // 由于then方法没有第二个参数，直接继承自原始Promise对象的状态, 或者说它把设置当前then对象状态的函数放到微任务队列中去执行了
  .then(res => console.log(res))            // rejected 
  .catch(err => console.log(err))           // fulfilled catch捕捉到异常，返回一个成功态的状态
  .finally(() => console.log('finally2'))   // fulfilled 回调函数执行后的状态
// promise1 
// 1  
// error 
// finally1 
// finally2

// 小tip：大多数情况下为了控制它什么时候执行，我们可以用一个函数包裹着它，在需要它执行的时候，调用这个函数就可以了
// 比如这样：
function runP1 () {
    const p1 = new Promise(r => console.log('立即打印'))
    return p1
}
runP1()
// ================================================================================================================
// all()
function runAsync (x) {
    console.log('ready', x)
    const p = new Promise(r => setTimeout(() => r(x, console.log(x)), x*1000))
    return p
}
Promise.all([runAsync(3), runAsync(2), runAsync(1)])
  .then(res => console.log(res))
console.log('start')
// ready 3
// ready 2
// ready 1
// start
// 1
// 2
// 3
// [3, 2, 1]
/*
  1.Promise.all 接收的必须是一个可迭代的对象，且返回的每个成员都是 Promise 实例
  2.then()方法里的回调函数接收的参数就是所有异步操作的结果，是一个数组类型对象
  3.结果中的数组的顺序和Promise.all()接收到的数组顺序一致
    4.all后面的then()方法的状态取决于all的全部状态
      all方法里边的数组的每个Promise对象都变成fulfilled，Promise.all的状态才会变成fulfilled
      数组里边的promise对象只要有一个被rejected，Promise.all的状态就会变成fulfilled，而第一个被reject的Promise对象的返回值，会传递给promise.all对象的回调函数。
*/
// ================================================================================================================
// race()
function runAsync (x) {
    console.log('ready', x)
    const p = new Promise(r => setTimeout(() => r(x, console.log(x)), x*1000))
    return p
}
Promise.race([runAsync(3), runAsync(2), runAsync(1)])
  .then(res => console.log(res))
console.log('start')
// ready 3
// ready 2
// ready 1
// start
// 1  最先执行完的Promise对象的值
// 1
// 2
// 3
/*
  1.使用.race()方法，它只会获取最先执行完成的那个结果，其它的异步任务任然会继续执行
  2.那个率先改变的Promise对象状态的返回值，就传递给Promise.race的回调函数
*/

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))

* `await`命令后面的`Promise`对象，运行结果可能是`rejected`，所以最好把`await`命令放在`try...catch`代码块中

async function myFunction() {
  try {
    await somethingThatReturnsAPromise();
  } catch (err) {
    console.log(err);
  }
}
// 另一种写法
async function myFunction() {
  await somethingThatReturnsAPromise()
  .catch(function (err) {
    console.log(err);
  });
}
// 多个await命令后面的异步操作，如果不存在继发关系(不相互依赖，不按照一定顺序执行)，最好让它们同时触发。
// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
// 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;
// 上面两种写法，getFoo和getBar都是同时触发，这样就会缩短程序的执行时间。

 * 如果`await`后面的异步操作出错，那么等同于`async`函数返回的 Promise 对象被`reject`。
 * 任何一个`await`语句后面的 Promise 对象变为`reject`状态，那么整个`async`函数都会中断执行。

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
async function async2() {
  console.log("async2");
}
async1();
console.log('start')
// async1 start
// async2
// end
// async1 end
/*
执行步骤：
  1.首先一进来是创建了两个函数的，我们先不看函数的创建位置，而是看它的调用位置
    2.发现async1函数被调用了，然后去看看调用的内容
    3.执行函数中的同步代码打印async1 start，之后碰到了await，它会阻塞async1后面代码的执行，因此会先去执行async2中的同步代码打印 async2，然后跳出async1
    4.跳出async1函数后，执行同步代码start
    5.在一轮宏任务全部执行完之后，再来执行刚刚await后面的内容打印async1 end。
*/
// 经典案列：
// eg1
async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
async function async2() {
  setTimeout(() => {
    console.log('timer')
  }, 0)
  console.log("async2");
}
async1();
console.log("start")
// async1 start
// async2
// start 
// async1 end
// timer
// eg2
async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
  setTimeout(() => {
    console.log('timer1')
  }, 0)
}
async function async2() {
  setTimeout(() => {
    console.log('timer2')
  }, 0)
  console.log("async2");
}
async1();
setTimeout(() => {
  console.log('timer3')
}, 0)
console.log("start")
// async1 start
// async2
// start
// async1 end
// timer2
// timer3
// timer1
// async 本质上是一个Promise对象
// 1.正常情况下，async中的await命令是一个Promise对象，返回该对象的结果。
// 2.如果不是Promise对象的话，就会直接返回对应的值，相当于Promise.resolve()
async function fn () {
  // return await 123
  // 等同于
  return 123
}
fn().then(res => console.log(res))
// 123  
// 由于fn同步执行的时候，直接返回的是await命令，而await命令返回的是一个原始值，不是一个Promise对象;
// 所以会返回一个新的Promise对象，状态为resolved，值为原始值。原始值的参数会同时传给回调函数。
// eg3
async function async1 () {
  console.log('async1 start');
  await new Promise(resolve => {         // pending 状态的Promise对象
    console.log('promise1')
  })
  console.log('async1 success');
  return 'async1 end'
}
console.log('srcipt start')
async1().then(res => console.log(res))
console.log('srcipt end')
// srcipt start
// async1 start
// promise1
// srcipt end
/*
执行步骤：
  同步执行代码遇到await命令，遇到一个pending状态的Promise对象，await命令下面的代码不能放到微任务队列中；
  async1异步函数执行完毕是一个pending状态的promise对象，所以async1().then回调函数不会执行。
*/
// eg4
async function async1 () {
  console.log('async1 start');
  await new Promise(resolve => {
    console.log('promise1')
    resolve('promise1 resolve')              // 成功态的promise对象
  }).then(res => console.log(res))           // 加入微任务队列
  console.log('async1 success');             // 加入微任务队列
  return 'async1 end'
}
console.log('srcipt start')
async1().then(res => console.log(res))
console.log('srcipt end')
// srcipt start
// async1 start
// promise1
// srcipt end
// promise1 resolve
// async1 success
// async1 end
//eg5
async function async1 () {
  console.log('async1 start');
  await new Promise(resolve => {
    console.log('promise1')
    resolve('promise resolve')
  })
  console.log('async1 success');
  return 'async1 end'
}
console.log('srcipt start')
async1().then(res => {
  console.log(res)
})
new Promise(resolve => {
  console.log('promise2')
  setTimeout(() => {
    console.log('timer')
  })
})
// srcipt start
// async1 start
// promise1
// promise2
// async1 success
// async1 end
// timer
// eg6(面试题)
async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
async function async2() {
  console.log("async2");
}
console.log("script start");
setTimeout(function() {
  console.log("setTimeout");
}, 0);
async1();
new Promise(function(resolve) {
  console.log("promise1");
  resolve();
}).then(function() {
  console.log("promise2");
});
console.log('script end')
// script start
// async1 start
// async2
// promise1
// script end
// async1 end
// promise2
// setTimeout
// eg7
async function testSometing() {
  console.log("执行testSometing");
  return "testSometing";
}
async function testAsync() {
  console.log("执行testAsync");
  return Promise.resolve("hello async");
}
async function test() {
  console.log("test start...");
  const v1 = await testSometing();
  console.log(v1);
  const v2 = await testAsync();
  console.log(v2);
  console.log(v1, v2);
}
test();
var promise = new Promise(resolve => {
  console.log("promise start...");
  resolve("promise");
});
promise.then(val => console.log(val));
console.log("test end...");
// test start...
// 执行testSometing
// promise start...
// test end...
// testSometing
// 执行testAsync
// promise
// hello async
// testSometing hello async
// 得出结论Promise.resolve("hello async")；和return "testSometing" 效果是一样的
// eg8
// 在async中，如果 await后面的内容是一个异常或者错误的话，简单看一下
// 如果在async函数中抛出了错误，则终止错误结果，不会继续向下执行。
async function async1 () {
  await async2();                 // 任何一个await语句后面的Promise对象变为reject状态，那么整个async函数都会中断执行。
  console.log('async1');          // 不会执行
  return 'async1 success'
}
async function async2 () {
  return new Promise((resolve, reject) => {
    console.log('async2')
    reject('error')
  })
}
async1().then(res => console.log(res))      
// async2
// Uncaught (in promise) error
// eg9
// 如果想要使得错误的地方不影响async函数后续的执行的话，就要使用try...catch了
async function async1 () {
  try {
    await Promise.reject('error!!!')
  } catch(e) {
    console.log(e)
  }
  console.log('async1');
  return Promise.resolve('async1 success')
} 
async1().then(res => console.log(res))
console.log('script start')
// script start
// error!!!
// async1
// script start
// eg10
const first = () => (new Promise((resolve, reject) => {
    console.log(3);
    let p = new Promise((resolve, reject) => {
        console.log(7);
        setTimeout(() => {
            console.log(5);
            resolve(6);
            console.log(p)
        }, 0)
        resolve(1);
    });
    resolve(2);
    p.then((arg) => {
        console.log(arg);
    });
}));
first().then((arg) => {
    console.log(arg);
});
console.log(4);
// 3
// 7
// 4
// 1
// 2
// 5
// Promise {<fulfilled>: 1}
// eg11
const async1 = async () => {
  console.log('async1');
  setTimeout(() => {
    console.log('timer1')
  }, 2000)
  await new Promise(resolve => {
    console.log('promise1')
  })
  console.log('async1 end')
  return 'async1 success'
}
console.log('script start');
async1().then(res => console.log(res));
console.log('script end');
Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .catch(4)
  .then(res => console.log(res))
setTimeout(() => {
  console.log('timer2')
}, 1000)
// script start
// async1
// promise1
// script end
// 1
// timer2
// timer1
// eg12
const p1 = new Promise((resolve) => {
  setTimeout(() => {
    resolve('resolve3');
    console.log('timer1')
  }, 0)
  resolve('resovle1');
  resolve('resolve2');
}).then(res => {
  console.log(res)
  setTimeout(() => {
    console.log(p1)
  }, 1000)
}).finally(res => {
  console.log('finally', res)
})
// resovle1
// finally undefined finally不接收参数
// timer1 
// Promise {<fulfilled>: undefined} 当setTimeout宏任务执行的时候，打印的p1应该是“Promise对象.then().finally()”整个同步完成的Promise对象的状态，由于then回调函数接收了初始的Promise对象状态的值，所以最终的p1状态为undefined。