Promise静态方法，then的顺延，resolve函数

最新推荐文章于 2024-02-01 21:45:38 发布

原创最新推荐文章于 2024-02-01 21:45:38 发布 · 902 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #typescript

本文详细介绍了Promise的几种静态方法，包括Promise.resolve(), Promise.reject(), Promise.all(), Promise.allSettled(), Promise.race() 和 Promise.any() 的使用场景及作用，并探讨了then的顺延机制以及resolve函数在不同参数情况下的表现。

一. Promise的静态方法都有哪些，各自有什么作用？

Promise.resolve()
直接创建一个成功的promise

let p = Promise.resolve("成功了");
    console.log(p);
    p.then(res=>{
        console.log(res);//失败了
    })

Promise.resolve()
直接创建一个失败的promise

 let p = Promise.reject("失败了");
    console.log(p);
    p.then(res => {
        console.log('res:',res);
    }).catch(err=>{
        console.log('err:',err);//err: 失败了
    })

Promise.all()
作用：
1.all中放N个promise
2.all表示所有的promise都成功后，得到所有的promise成功的结果；以数组的形式输出
3.如果有一个先失败了，直接得到的最先失败的promise失败的结果；

// 创建三个Promise
    const p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
            // resolve("p1 resolve")
            reject("p1 reject error")
        }, 2000)
    })
    const p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            // resolve("p2 resolve")
            reject("p2 reject error")
        }, 3000)
    })
    const p3 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("p3 resolve")
        }, 5000)
    })
    Promise.all([p1,p2,p3]).then(res=>{
    console.log('res:',res);
    }).catch(err => {
        console.log("err:", err);
    })

Promise.allSettled()
作用：得到所有的proise的结果，不管是成功还是失败

	const p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
            // resolve("p1 resolve")
            reject("p1 reject error")
        }, 3000)
    })
    const p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            // resolve("p2 resolve")
            reject("p2 reject error")
        }, 2000)
    })
    const p3 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("p3 resolve")
        }, 5000)
    })
    // allSettled 得到所有的proise的结果，不管是成功还是失败
    Promise.allSettled([p1, p2, p3]).then(res => {
        console.log("res:", res);
    }).catch(err => {
        console.log("err:", err);
    })

Promise.race()
作用：不管成功还是失败，会得到第一个先执行完的promise的结果
Promise.any()
作用：要么显示最成功的promise结果，如果promise都失败，就显示所有promise都失败了

二. 你是如何理解then的顺延的？

以下方代码为例，promise是失败的，需要走then的第2个回调函数，但是第2个回调函数是null，所以就会顺延到下一个then的第2个回调函数.
如果上一个then没有处理，就会自动顺延到下一个then的回调中

let promise = new Promise((resolve, reject) => {
        // resolve("成功了")
        reject("失败了")
    });
    promise.then(value1 => {
        console.log("value1:", value1);
    }, null).then(value2 => {
        console.log("value2:", value2);
    }, err2 => {
        console.log("err2:", err2);
    })

 let promise = new Promise((resolve, reject) => {
        resolve("成功了")
    });
    promise
        .then(null, err1 => {
            console.log("err1:", err1);
        })
        .then(null, null)
        .then(null, null)
        .then(null, null)
        .then(value2 => {
            console.log("value2:", value2);
        }, err2 => {
            console.log("err2:", err2);
        })

三. 调用resolve函数，一定得到一个成功的promise吗？

不一定

如果resolve中的参数是一个普通值，例如字符，数字，数组，对象等。那promise是成功的。
当resolve 参数是一个promise，最终promise是成功还是失败，取决于你传递的promise是成功还是失败。
当resolve的参数是一个thenable，promise是成功还是失败取决于，thenable是成功还是失败

let promise = new Promise((resolve, reject) => {
        // 1)传递一个普通值，字符串
        // resolve("包包")
        // resolve(123)
        // resolve(["malu"])
        resolve({name:"malu"})
    });
    promise.then(value => {
        console.log("value:", value);
    }, err => { })

let p = new Promise((resolve, reject) => {
        setTimeout(() => {
            // resolve("p的resolve")
            reject("p的reject")
        }, 2000)
    });
    let promise = new Promise((resolve, reject) => {
        resolve(p)
    });
    promise.then(value => {
        console.log("value:", value);
    }, err => {
        console.log("err:", err);
    })

 let promise = new Promise((resolve, reject) => {
        resolve({
            then(resolve, reject) {
                // resolve("包包")
                reject("没钱")
            }
        })
    });
    promise.then(value => {
        console.log("value:", value);
    }, err => {
        console.log("err:", err);
    })```