Promise探究

（一）Promise 的使用特点

代码自己写一个Promise

<script>
    function promise(code) {
      return new Promise((resolve, reject) => {
        if (code === 0) {
          resolve('请求成功')
        } else {
          reject('请求失败')
        }
      }).then((res)=>{
        console.log(res)
      }).catch((err) => {
        console.log(err)
      })
    }
    promise(0) // 控制台打印 请求成功
    promise(1) // 控制台打印 请求失败
  </script>

promise特点：

1. 状态一旦发生就不能改变

<script>
    function promise() {
      return new Promise((resolve, reject) => {
        resolve('请求成功')
        reject('请求失败')
      }).then((res)=>{
        console.log(res)
      }).catch((err) => {
        console.log(err)
      })
    }
    promise() // '请求失败'
  </script>

先resolve 后 reject ，但是只执行 resolve，因为执行到 resolve ，Promise 状态就已经变成了 resolve，不可再更改为 reject

2. Promise 中 .then 方法期望是函数，传入非函数则会发生值穿透

function promise() {
      return new Promise((resolve, reject) => {
        resolve('请求成功')
      }).then('11').then((res) => {
        console.log(res)
      }).catch(() => {
        console.log('err')
      })
    }
    promise() // 请求成功

第一个 then 传入的不是函数，而是一个字符传，所以想当于这个then没有起作用，直接执行了第二个then

如果第二个then传入的也不是函数，则执行第三个....以此类推，这就是值穿透~

3. promise的回调是同步的，而then的回调是异步的

function promise() {
      return new Promise((resolve, reject) => {
        console.log(1)
        resolve('请求成功')
      }).then((res) => {
        console.log(2)
      }).catch(() => {
        console.log('err')
      })
    }
    promise()
    console.log(3)
    // 执行结果 132

4. 链式调用 .then，上一个 then 的返回值是下一个 then 接收到的的参数，如果返回错误，会返回一个状态为 reject 的 promise。

第一个 then 拿的是 promise 的 resolve() 括号中传入的值，第二个 then 的 res 是第一个 then 的 return~依次类推...

function promise() {
      return new Promise((resolve, reject) => {
        resolve(123)
      }).then((res) => {
        console.log(res) // 123
        return 456
      }).then((res1) => {
        console.log(res1) // 456
      }).catch(() => {
        console.log('err')
      })
    }
    promise()

输出 123 然后456

如果 .then 链式中任何一个 抛出错误，都会进入 .catch 

function promise() {
      return new Promise((resolve, reject) => {
        resolve(123)
      }).then((res) => {
        console.log(456)
      }).then((res1) => {
        console.log(789)
        throw new Error('this is error1')
      }).catch((err) => {
        console.log(err)
      })
    }
    promise()

// 123
// 456
// Error: this is error1

5. .then() 的回调里return 一个 promise 会进入等待状态，知道return 的 promise 改变

<script>
    function promise() {
      return new Promise((resolve, reject) => {
        resolve(123)
      }).then((res) => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(4)
          }, 3000)
        })
      }).then((res1) => {
        console.log(res1)
      }).catch((err) => {
        console.log(err)
      })
    }
    promise() // 3秒之后打印4
  </script>