关于Promise链式/all小记

链式

当需要实现 某一接口返回值作为另一接口的实际参数 时，可通过链式的方式。
优点 是不会出现调用接口的多重嵌套，同时统一异常处理，从而提高代码可读性。
原理 是 then 方法返回的是一个新的Promise实例。后面的 then 方法是为上一个 then 方法返回的Promise注册回调。前面 then 方法的返回值是后面 then 方法的参数。

const requireApi = (option)=>{
    return new Promise((resolve,reject)=>{
        if(option.code==200){
            setTimeout(()=>{
                resolve(option.str+"：200")
            },1000)
        }else{
            reject(option.str+"404")
        }
    })
}

requireApi({
    str:"第一层",
    code:200
}).then(res=>{
    console.log("第一层获得结果===")
    console.log(res)
    return requireApi({
        str:"第二层",
        code:201
    })
}).then(res=>{
    console.log("第二层获得结果===")
    console.log(res)
}).catch(rej=>{
    console.log("失败结果===>>")
    console.log(rej)
})

/**
 * 结果
    第一层获得结果===
    第一层：200
    失败结果===>>
    第二层404
 */

all

当需要实现 等待所有指定接口成功返回后 再就行统一处理 时，可通过all方法。
优点 如控制页面的加载模块的显示隐藏，同时在出现异常时能统一处理避免报错。

const requireApi = (option)=>{
    return new Promise((resolve,reject)=>{
        if(option.code==200){
            setTimeout(()=>{
                resolve({
                    msg:`${option.str}成功`,
                    code:200
                })
            },1000)
        }else{
            reject(option.str+"：404")
        }
    })
}

console.log("加载开启===")
//只调用并赋值，不做回调处理
const p1 = requireApi({
    str:'p1',
    code:200
})
const p2 = requireApi({
    str:'p2',
    code:200
})

//若都成功，则返回res。res是数组，对应每一个实例的返回值
//有一失败，则返回rej。rej是失败实例的返回信息
Promise.all([p1,p2]).then(res=>{
    console.log(res)
    console.log("加载关闭===")
}).catch(rej=>{
    console.log(rej)
    console.log("加载关闭===")
})

/**
 * 结果
    加载开启===
    [ { msg: 'p1成功', code: 200 }, { msg: 'p2成功', code: 200 } ]
    加载关闭===
 */