Promise 中的 then、catch、finally方法

这三个方法都是存在 Promise 原型上的方法

then 方法的回调用来捕获 resolved 的 Promise

catch 方法的回调用来捕获 rejected 的 Promise（catch其实是一种语法糖，catch的回调可以写在then方法的第二个参数里面）

finally 方法的回调上面两种情况都会执行，就是不管怎么样都会执行

注意点

注意then和catch和finally方法的返回值都是一个新的promise对象（是为了更加优雅地使用链式语法），状态要看then里面回调的返回值是什么（await只有then的方法，catch要使用try-catch捕获）

下面以then为例，其他两个是同样的

const p = axios().then(()=>{
    // return undefined// 不返回就默认是undefined Promise.resolve(undifined)或者Promise.resolve()
    // return 1  // then方法返回 Promise.resolve(1)
    // return Promise.resolve(2) then方法返回 Promise.resolve(2)
    // return Promise.reject(2) then方法返回 Promise.rejecte(2)
    // throw 2 then方法返回 Promise.reject(2)
})

小结：

then 方法回调的返回值

• 通过return一个非promise的值，则新promise的状态为fulfilled，值为return的值
• 不作任何处理（不return === return undefined ），则新promise的状态为fulfilled，值为undefined
• 通过throw主动抛出错误或者代码出现错误，则promise的状态为rejected，值为throw的值
• 通过return返回一个promise对象，则新promise就是return的promise

小案例

将下列代码修改成 async-await

axios.get().then(res=>{
  const {data} =res
  return data
})
.catch(err=>console.log(err))
.then(datas=>console.log(datas))
.finally(()=>{})

结果

;(async function(){
  try{
    // 两个then一起触发
    const { data } = await axios.get()
    const datas = await Promise.resolve(res.data)
    console.log(datas)
  }catch (err) {
    // 请求出错用catch捕获
    console.log(err)
    // 然后catch方法返回一个fulfilled的promise值为undefined，再触发下面的then方法
    const datas = Promise.resolve(undefined)
    console.log(datas)
  }finally(){
    //...
  }