学习以下内容

Promise.then() 可以传入两个回调

promise 的 .then 方法可以传入两个回调, 一个是成功的回调, 另一个是失败的回调, 如下代码

function success(res) {
    console.log('成功')
}

function failed(rej) {
    console.log('失败')
}

axios.get('/').then(success, failed)

Promise 有三个状态

pending(待定):

执行 executor (new 类时传入的回调函数) 后，状态还在等待中，没有执行 resolve，也没有执行 reject

fulfilled(成功):

执行了 resolve 函数则成为成功状态

rejected(失败):

执行了 reject 函数则成为失败状态

Promise 只要更改过状态, 就不能再改变

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('失败')
    resolve('成功')
  }, 3000);
})

promise.then(res => console.log(res)).catch(err => console.log(err))

//失败

调用reject之后，再调用resolve是无效的，因为状态已经发生改变，并且不可逆

传入 resolve 不同参数的区别

普通值或对象

如果传入一个普通的值或对象(只能接受一个参数)，那么这个值会作为then回调的参数, 如下示例

const promise = new Promise((resolve, reject) => {
  resolve({name: 'ice', age: 22})
})

promise.then(res => console.log(res))

// {name: 'ice', age: 22}

传入新的 Promise

如果传入的是另一个Promise，那么传入的这个Promise会决定原来的Promise状态, 如下实例

const promise = new Promise((resolve, reject) => {
  resolve(new Promise((resolve, reject) => {
      reject()
  }))
})

promise.then(res=>console.log('成功')).catch(err=>console.error('失败'))

// 失败

传入对象, 并且有 then 方法

如果传入的是一个对象，并且含有实现then方法，那么就会执行该then方法，并且会传入resolve，reject函数。此时的promise状态取决于then方法内调用了resolve，还是reject函数。

这种模式称为: thenable

示例:

const promise = new Promise((resolve, reject) => {
  resolve({
    then(res, rej) {
        setTimeout(() => {
            res('成功')
        }, 3000);
    }
  })
})

promise.then(res => console.log(res))

// 3s后输出成功

Promise.all

Promise.all 方法接收一个可迭代类型(Array，Map，Set 都属于 ES6 的可迭代类型) 返回Promise

当传入的所有Promise都为fulfilled状态时才会调用.then方法

当传入的Promise有任意一个状态为rejected时, 则会调用.catch方法

当遇到rejectd的时候，会把reject的实参传给catch, 并且后续的promise成功的结果我们是获取不到的

fulfilled 状态

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('hi ice')
  }, 1000);
})

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('hi panda')
  }, 2000);
})

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('hi grizzly')
  }, 3000);
})


Promise.all([promise1,promise2,promise3]).then(res => console.log(res))

//[ 'hi ice', 'hi panda', 'hi grizzly' ]

rejected 状态

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('hi ice')
  }, 1000);
})

const reject = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('失败')
  }, 2000);
})

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('hi grizzly')
  }, 3000);
})

Promise.all([promise1, reject, promise2])
    .then(res => console.log(res))
    .catch(err => console.log(err))

// 失败

第五届青训营阅读打卡 Day2