通过promise优化回调嵌套来理解promise.then( )方法

**目前优化回调嵌套一般用的是async-await的方法.毕竟简单易读效率高,实在是比promise.then( )好用太多了.

不过最近偶然发现自己对.then( )方法的值和返回值的理解有一些混淆.刚好能够借用这个案例巩固对.then( )的理解.

有关then方法的前置笔记: 尤其要注意!then方法的返回值是一个对象,而非return值.then的return值有其它的含义和作用,可以利用then的return值来传参数

下面是一个地狱回调

axios.get('http://xxx').then(res => {
    let p1 = res.data;
    // 2. 携带p1作为参数获取p2
    axios.get(`xxx?p1=${p1}`).then(res => {
     let p2 = res.data;
        // 3. 携带p2作为参数获取p3
      axios.get(`xxx?p2=${p2}`).then(res => {
      let p3 = res.data;
      console.log(p3)
        })
    })
})

改写思路

将axios.get()作为.then()函数的return值.

当.then()函数的return值是一个promise对象的时候,.then()的值由这个promise对象的时候的值来决定,并由下一个.then()中的res来接收

这样就能实现axios.get()这个promise对象的值不仅能够被接收,还不用嵌套回调函数

        axios.get('http://xxx').then(res => {
            p1 = res.data
            return a axios.get(`xxx?p1=${p1}`)
        }).then(res => {
            const p2 = res.data
            return axios.get(`xxx?p2=${p2}`)
        }).then(res => {
            p3 = res.data.data
            console.log(p3);
        })