promise

最新推荐文章于 2024-07-12 16:27:40 发布

就是个名称

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量111

点赞数

分类专栏： javascript 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_43845059/article/details/127533302

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Promise.then()

then 有两个参数一个是成功回调一个是失败回调都是可选

  let p = new Promise((resolve, reject) => {
        resolve('resolve')
        //reject('reject')
    }).then(res => {
        console.log(res)
    }, err => {
        console.log(err)
    })

需要有返回值 .then 才能链接起来没有返回值返回 undefined

  new Promise((resolve, reject) => {
            resolve('resolve1')
            //reject('reject')
    }).then(res => {
        console.log(res)
        return "dd"
    }, err => {
        console.log(err)
    }).then(res => {
        console.log(res)
    })

    let p = new Promise((res, rej) => {
        res(55)
    })
    new Promise((resolve, reject) => {
        resolve('resolve2')
            //reject('reject')
    }).then(res => {
        console.log(res)
        return p
    }, err => {
        console.log(err)
    }).then(res => {
        console.log(res)
    }))

// 打印
resolve1 
resolve2
dd
55

Promise 嵌套

不管嵌套多少层， .then 都会被替换，p1 状态替换p2， p状态替换p1

const p = new Promise(function(resolve, reject) {
        setTimeout(() => resolve("123"), 0)
    })
    const p1 = new Promise(function(resolve, reject) {
        setTimeout(() => resolve(p), 1000)
    })

    const p2 = new Promise(function(resolve, reject) {
        setTimeout(() => resolve(p1), 1000)
    })

    p2
        .then(result => console.log(result)) // 1s 后 123
        .catch(error => console.log(error))

Promise.finally()

不管成功还是失败都会执行

let a = 123
    const p2 = new Promise(function(resolve, reject) {
        reject(a)
        a = 500
    })

    p2
        .then(result => console.log(result))
        .catch(error => console.log(error))
        .finally(() => {
            console.log(456)
        })
    setTimeout(() => {
        console.log(a)
    })

// 打印
123
456
500

Promise.all()

需要全部成功

 const p1 = new Promise(function(resolve, reject) {
       
        resolve("1")

    })
    const p2 = new Promise(function(resolve, reject) {
       
        resolve("2")

    })
    const p3 = new Promise(function(resolve, reject) {
      
        resolve("3")

    })


    Promise.all([p1, p2, p3]).then(res => {
        // 全部成功
        console.log(res) // 1 2 3
    }).catch(err => {
        console.log(err)
    })

失败就立刻退出

 const p1 = new Promise(function(resolve, reject) {
        console.log(11)
        resolve("1")

    })
    const p2 = new Promise(function(resolve, reject) {
        console.log(22)
        reject("2")

    })
    const p3 = new Promise(function(resolve, reject) {
        console.log(33)
        resolve("3")

    })


    Promise.all([p1, p2, p3]).then(res => {
        console.log(res) 
    }).catch(err => {
        console.log(err) // 2
    })

必须全部成功后才会执行后续.then的操作

    const p1 = new Promise(function(resolve, reject) {

        setTimeout(() => {
            console.log(11)
            resolve("1")
        }, 1000)

    })
    const p2 = new Promise(function(resolve, reject) {

        setTimeout(() => {
            console.log(22)
            resolve("2")
        }, 2000)

    })
    const p3 = new Promise(function(resolve, reject) {

        setTimeout(() => {
            console.log(33)
            resolve("3")
        }, 5000)

    })


    Promise.all([p1, p2, p3]).then(([r1, r2, r3]) => {
        // 5秒是因为这几个定时器是同时设置的  new Promise 不是异步
        console.log(r1, r2, r3) // 5s后最后打印 11 22 33 1 2 3
    }).catch(err => {
        console.log(err)
    })

Promise.race（）

只要有一个promise改变状态就 race就改变状态还是上面这个例子

const p1 = new Promise(function(resolve, reject) {

        setTimeout(() => {
            console.log(11)
            resolve("1")
        }, 1000)

    })
    const p2 = new Promise(function(resolve, reject) {

        setTimeout(() => {
            console.log(22)
            resolve("2")
        }, 2000)

    })
    const p3 = new Promise(function(resolve, reject) {

        setTimeout(() => {
            console.log(33)
            resolve("3")
        }, 5000)

    })


    Promise.race([p1, p2, p3]).then(([r1, r2, r3]) => {
       
        console.log(r1, r2, r3) 
    }).catch(err => {
        console.log(err)
    })

// 打印结果
// 1s 
11
1 undefined undefined

// 2s
22

// 5s
33

Promise.allSettled()

Promise.allSettled()和 all不一样，他不会因为接受的promise里有一个失败就会回调失败，而是等所有结果都完事后再给出结果，还有不管是成功失败。都是.then第一个函数接受的

   const p1 = new Promise(function(resolve, reject) {

        resolve("1")

    })
    const p2 = new Promise(function(resolve, reject) {

        reject("2")

    })
    const p3 = new Promise(function(resolve, reject) {

        resolve("3")

    })


    Promise.allSettled([p1, p2, p3]).then(([r1, r2, r3]) => {

        console.log(r1, r2, r3) 
    }).catch(err => {
        console.log(err)
    })

Promise.any()

any() 类似race()，但是不同的是 race会立刻停止之后的promise，而any 只返回第一个成功的promise，如果全部失败，回调失败函数

const p1 = new Promise(function(resolve, reject) {

        reject("1")

    })
    const p2 = new Promise(function(resolve, reject) {

        resolve("2")

    })
    const p3 = new Promise(function(resolve, reject) {

        resolve("3")

    })


    Promise.any([p1, p2, p3]).then((res) => {

        console.log(res) // 2
    }).catch(err => {
        console.log(err)
    })

全部 reject

const p1 = new Promise(function(resolve, reject) {

        reject("1")

    })
    const p2 = new Promise(function(resolve, reject) {

        reject("2")

    })
    const p3 = new Promise(function(resolve, reject) {

        reject("3")

    })


    Promise.any([p1, p2, p3]).then((res) => {

        console.log(res) 
    }).catch(err => {
        console.log(err) // AggregateError: All promises were rejected
    })