前端_Promise面试题 1

什么是Promise

1、Promise是JavaScript中进行异步编程的新的解决方案
2、从语法上看：Promise是一个构造函数
3、从功能上看：Promise对象用来封装一个异步操作并可以获取其结果

---

 两种状态改变

1、pending →  resolved
2、pending →  rejected
一个Promise对象只能改变一次，无论成功还是失败，都只有一个结果数据

---

 运行流程

---

基本使用

  // 创建一个Promise对象
  const p = new Promise((resolve, reject) => { // 执行器函数 同步函数
    console.log('执行executor');
    // 执行异步操作
    setTimeout(() => {
      const randomNum = Math.floor(Math.random() * 10);
      // 0-9的随机数是偶数代表成功，否则代表失败
      if (randomNum % 2 === 0) {
        // 成功，调用resolve(value)
        resolve('成功' + randomNum)
      } else {
        // 失败，调用reject(reason)
        reject('失败' + randomNum)
      }
    }, 500)
  })
  console.log('new Promise()之后');
  p.then(
    value => {
      console.log('成功的回调onResolved', value);
    },
    reason => {
      console.log('失败的回调onRejected', reason);
    }
  )

 

    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('成功的数据')
      }, 500)
    }).then(
      value => {
        console.log('onResolved()1' + value); // onResolved()1成功的数据
      }
    ).catch(
      reason => {
        console.log('onRejected()1' + reason);
      }
    )

    new Promise((resolve, reject) => {
      setTimeout(() => {
        reject('失败的数据')
      }, 500)
    }).then(
      value => {
        console.log('onResolved()1' + value); 
      }
    ).catch(
      reason => {
        console.log('onRejected()1' + reason); // onRejected()1失败的数据
      }
    )

    // const p1 = new Promise((resolve, reject) => {
    //   resolve(1)
    // })
    // 等同于
    const p1 = Promise.resolve(1)
    p1.then(value => {console.log(value);})

    // const p2 = new Promise((resolve, reject) => {
    //   reject(2)
    // })
    // 等同于
    const p2 = Promise.reject(2)
    p2.catch(reason => {console.log(reason);})

---

 优点

1、Promise指定回调函数的方式灵活。“纯回调”的话，必须在启动异步任务前指定回调函数，而Promise的话，是启动异步任务，返回Promise对象，给Promise对象绑定回调函数，甚至可以在异步任务结束后绑定回调函数。
2、Promise支持链式调用，可以解决回调地狱。

tips：回调地狱是回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调函数执行的条件，不便于阅读，也不便于异常处理。 

---

API

Promise.all

    const p1 = Promise.resolve(1)
    const p2 = Promise.resolve(2)
    const p3 = Promise.resolve(3)
    const pAll = Promise.all([p1, p2, p3])
    pAll.then(
      values => {
          console.log('all onResolved()', values);
      },
      reason => {
        console.log('all onRejected()', reason);
      }
    )

---

    const p1 = Promise.resolve(1)
    const p2 = Promise.resolve(2)
    const p3 = Promise.reject(3)
    const pAll = Promise.all([p1, p2, p3])
    pAll.then(
      values => {
          console.log('all onResolved()', values);
      },
      reason => {
        console.log('all onRejected()', reason);
      }
    )

 

---

    const p1 = Promise.resolve(1)
    const p2 = Promise.reject(2)
    const p3 = Promise.reject(3)
    const pAll = Promise.all([p1, p2, p3])
    pAll.then(
      values => {
          console.log('all onResolved()', values);
      },
      reason => {
        console.log('all onRejected()', reason);
      }
    )

---

 Promise.race
谁先完成就执行谁

    const p1 = Promise.resolve(1)
    const p2 = Promise.resolve(2)
    const p3 = Promise.reject(3)
    const pRace = Promise.race([p1, p2, p3])
    pRace.then(
      value => {
          console.log('race onResolved()', value);
      },
      reason => {
        console.log('race onRejected()', reason);
      }
    )

 

---

    const p1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(1)
      }, 500)
    })
    const p2 = Promise.resolve(2)
    const p3 = Promise.reject(3)
    const pRace = Promise.race([p1, p2, p3])
    pRace.then(
      value => {
          console.log('race onResolved()', value);
      },
      reason => {
        console.log('race onRejected()', reason);
      }
    )

 

---

    const p1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(1)
      }, 500)
    })
    const p2 = Promise.resolve(2)
    const p3 = Promise.reject(3)
    const pRace = Promise.race([p1, p3, p2])
    pRace.then(
      value => {
          console.log('race onResolved()', value);
      },
      reason => {
        console.log('race onRejected()', reason);
      }
    )