promise 使用

学习目标：promise

提示：promise基础使用 及其面试中所遇到的执行顺序问题 配合 async和await使用

/**

* 创建Promise以后会立即执行

* 对象的状态不受外界影响 （3种状态）

* Pending状态（进行中）

* Fulfilled状态（已成功）

* Rejected状态（已失败）

* Pending -> Fulfilled Fulfilled状态（已成功）

* Pending -> Rejected Rejected状态（已失败）

* 一旦确认 状态不可逆转

*/

---

  /**
   * 创建Promise以后会立即执行 
   * 对象的状态不受外界影响 （3种状态）
   * Pending状态（进行中）
   * Fulfilled状态（已成功）
   * Rejected状态（已失败）
   * Pending -> Fulfilled  Fulfilled状态（已成功）
   * Pending -> Rejected Rejected状态（已失败）
   * 一旦确认  状态不可逆转
   */

  // resolve 成功状态  reject失败状态
  function sleep(ms) {
    return new Promise(function(resolve, reject) {
        console.log(`Promise立即执行`)
        setTimeout(resolve, ms);
    })
  }
  sleep(1000).then(()=> console.log("finished"));
  // Promise创建立即执行   console.log(`Promise立即执行`) sleep1秒后 执行 console.log("finished"))
  // 打印  Promise立即执行 finished

  //执行顺序 
  // 经典面试题  执行顺序

  let promise = new Promise(function(resolve, reject){
    console.log("AAA");
    resolve()
  });
  promise.then(() => console.log("BBB"));
  console.log("CCC")
  // 执行顺序 AAA -> CCC -> BBB
  // 原因  创建promise就会立即执行AAA then方法指定的回调函数将在所有同步任务执行完后才会执行 所以最后输出 BBB


  let promise1 = new Promise(function(resolve, reject){
    console.log("1");
    resolve();
  });
  setTimeout(()=>console.log("2"), 0);
  promise1.then(() => console.log("3"));
  console.log("4");
  // 执行顺序 1->4->3->2
  // 原因创建promise立即执行 1 然后 4 .then会等同步任务执行完执行 3   2
  // Promise属于JavaScript引擎内部任务 而setTimeout则是浏览器API  
  // 内部引擎任务  大于 浏览器任务 



  //  async await
  function sleep1(ms) {
    return new Promise(function(resolve, reject) {
        setTimeout(()=>{
          resolve("CCC")
        },ms);
    })
  }
  async function handle(){
      console.log("AAA")
      let text =  await sleep1(10000)
      console.log(text)
      console.log("BBB")
  }
  handle();
  // 执行顺序 AAA->CCC->BBB  先执行 AAA 等10秒后执行 CCC BBB