Promise的异步同步问题

目录

什么是promise？

异步的状态：

状态说明：

执行顺序： 

动态改变执行顺序：

then

链式调用

then的状态说明：

then对reject的状态说明

 then的其他说明

catch：

扩展promise接口：

promise.resolve

一个关于顺序的事情：

promise.reject：

Promise.all方法

 方法参数数组为promise时

参数是数组类型混合时 

 参数是数组普通值的时候

真实开发场景：

Promise.allSettled

 Promise.race

任务队列：

async和await属性

await

同步的两种写法 

捕获错误： 

 多个任务并发执行：

手写Promise：

---

---

前言：我们在js编程时，很容易遇到异步队列和同步队列的问题，虽说是单线程，但是请求需要花时间，返回值还没有接受的情况下，会有bug问题，我把几个解决方案做一个笔记分享出来

先看看这个顺序执行进化版

  最开始的
  new Promise((resolve, reject) => {
    resolve(new Promise((resolve, reject) => {
      resolve('你好世界')
    }))
  }).then((value) => {
    console.log(value);
  })

  出现promise.resolve()等快捷方法
  Promise.resolve(new Promise((resolve, reject) => {
    resolve('你好未来')
  })).then((value) => {
    console.log(value);
  })

  promise的语法糖async
  async function ceshi() {
    return '你好成功'
  }
  console.log(ceshi());
  ceshi().then((value) => {
    console.log(value);
  })

---

什么是promise？

JavaScript 中存在很多异步操作,Promise 将异步操作队列化，按照期望的顺序执行，返回符合预期的结果。可以通过链式调用多个 Promise 达到我们的目的。

promise 是一个拥有 then 方法的对象或函数

promise就像一个承诺，允许我们在then以后去执行我们的代码，从而避免回调地狱

---

异步的状态：

状态说明：

Promise 包含pending、fulfilled、rejected三种状态

• pending 指初始等待状态，初始化 promise 时的状态
• resolve 指已经解决，将 promise 状态设置为fulfilled
• reject 指拒绝处理，将 promise 状态设置为rejected
• promise 是生产者，通过 resolve 与 reject 函数告之结果
• promise 非常适合需要一定执行时间的异步任务
• 状态一旦改变将不可更改

promise 是队列状态，就像体育中的接力赛，或多米诺骨牌游戏，状态一直向后传递，当然其中的任何一个 promise 也可以改变状态。

promise 没有使用 resolve 或 reject 更改状态时，状态为 pending

console.log(
  new Promise((resolve, reject) => {
  });
); //Promise {<pending>}

当更改状态后

console.log(
  new Promise((resolve, reject) => {
    resolve("fulfilled");
  })
); //Promise {<resolved>: "fulfilled"}

console.log(
  new Promise((resolve, reject) => {
    reject("rejected");
  })
); //Promise {<rejected>: "rejected"}

状态被改变后就不能再修改了，下面先通过resolve 改变为成功状态，表示promise 状态已经完成，就不能使用 reject 更改状态了

new Promise((resolve, reject) => {
  resolve("操作成功");
  已经成功处理返回了，不会更改状态
  reject(new Error("请求失败"));
}).then(
  msg => {
    console.log(msg);
  },
  error => {
    console.log(error);
  }
);

---

执行顺序： 

promise 创建时即立即执行即同步任务，（意思是promise里面的除了状态代码，其他的按照同步执行顺序放在宏观任务上执行）

then 会放在异步微任务中执行，需要等同步任务执行后才执行。

then意思是在宏观任务中，他是最后执行

let promise = new Promise((resolve, reject) => {
  resolve("fulfilled");
  console.log("yy");
});
promise.then(msg => {
  console.log(帅哥);
});
console.log("是");

首先输出 yy
        是
        帅哥

promise 操作都是在其他代码后执行，下面会先输出 houdunren.com 再弹出 success

• promise 的 then、catch、finally 的方法都是异步任务
• 程序需要将主任务执行完成才会执行异步队列任务

const promise = new Promise(resolve => resolve("success"));
promise.then(alert);
alert("houdunren.com");
promise.then(() => {
  alert("后盾人");
});

 then得等待promise的状态返回后执行

下例在三秒后将 Promise 状态设置为 fulfilled ，然后执行 then 方法

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("fulfilled");
  }, 3000);
}).then(
  msg => {
    console.log(msg);
  },
  error => {
    console.log(error);
  }
);

动态改变执行顺序：

意味着我们可以在程序里面，可以按照我们想的顺序执行代码。也可以减少异步代码操作带来的bug（接口还没请求玩执行前端页面操作）

下例中 p2 返回了 p1 所以此时 p2 的状态已经无意义了，后面的 then 是对 p1 状态的处理。

 const p1 = new Promise((resolve, reject) => {
    // resolve("fulfilled");
    reject("拒绝");
  });
  const p2 = new Promise(resolve => {

    // 返回的是p1的拒绝处理

    resolve(p1);
  }).then(
    res => {
      console.log(1, res);
    },
    rej => {
      console.log(2, rej); //2 '拒绝'
    }
  );

如果 resolve 参数是一个 promise ，将会改变promise状态。这里是重点，我们可以自己写promise，然后将接口返回的结果放在我们自己写的promise里面的状态resolve里面，在调用then，去执行页面操作，这样的话就是异步队列，同步执行

下例中 p1 的状态将被改变为 p2 的状态