promise的介绍和基本使用

最新推荐文章于 2025-02-17 14:25:17 发布

cdgogo

最新推荐文章于 2025-02-17 14:25:17 发布

阅读量364

点赞数

分类专栏： vue.js

本文链接：https://blog.youkuaiyun.com/cdgogo/article/details/107895393

版权

vue.js 专栏收录该内容

23 篇文章

订阅专栏

Promise是ES6中用于解决异步编程的方案，它有三种状态：pending、fulfilled和rejected。一旦状态改变，就不会再变。Promise提供链式调用和all方法，便于管理复杂的异步操作。回调地狱问题可以通过Promise来改善，例如Promise.all方法可以等待多个Promise全部完成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Promise是异步编程的一种解决方案，在ES6中Promise被列为了正式规范，统一了用法，原生提供了Promise对象。

网路请求的回调地狱

在这里插入图片描述

基本使用


// 1、使用setTimeout
//setTimeout(() => {
//    console.log("hellow world");
//},1000)

// 参数 -> 函数（resolve,reject）
// resolver。reject本身他们又是函数
//new Promise((resolve,reject) => {
//    setTimeout(() => {
//       console.log("hellow world");
//    },1000)
})

new Promise((resolve,reject) => {
    setTimeout(() => {
       resolve()
    },1000)
}).then(() => {
    console.log("hellow world");
})

// 多次调用
// new Promise((resolve, reject) => {
//     setTimeout(() => {
//         resolve()
//     }, 1000)
// }).then(() => {
//     console.log("hellow world");
//     console.log("hellow world");
//     console.log("hellow world");
//     console.log("hellow world");

//     setTimeout(() => {
//         console.log("hellow vue.js");
//         console.log("hellow vue.js");
//         console.log("hellow vue.js");
//         console.log("hellow vue.js");

//         setTimeout(() => {
//             console.log("hellow phthon");
//             console.log("hellow phthon");
//             console.log("hellow phthon");
//             console.log("hellow phthon");
//         }, 1000)

//     }, 1000)
// })

new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve()
    }, 1000)
}).then(() => {
    console.log("hellow world");
    console.log("hellow world");
    console.log("hellow world");
    console.log("hellow world");

    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve()
        }, 1000)
    }).then(() => {
        console.log("hellow vue.js");
        console.log("hellow vue.js");
        console.log("hellow vue.js");
        console.log("hellow vue.js");

        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve()
            }, 1000)
        }).then(() => {
            console.log("hellow phthon");
            console.log("hellow phthon");
            console.log("hellow phthon");
            console.log("hellow phthon");
        })
    })

})

Promise的三种状态

1、pending[待定]初始状态
2、fulfilled[实现]操作成功
3、rejected[被否决]操作失败

当promise状态发生改变，就会触发then()里的响应函数处理后续步骤；

promise状态一经改变，不会再变。

Promise对象的状态改变，只有两种可能：
从pending变为fulfilled
从pending变为rejected。
这两种情况只要发生，状态就凝固了，不会再变了。

在这里插入图片描述

Promise的链式调用

// 网络请求： aaa -> 自己处理（10行）
// 处理： aaa111 -> 自己处理（10行）
// 处理： aaa111222 -> 自己处理
new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('aaa')
    }, 1000)
}).then(res => {
    console.log(res, '第一层的10行处理代码')

    return new Promise(resolve => {
        resolve(res + '111')
    }).then(res => {
        console.log(res, '第二层的10行处理代码')

        return new Promise(resolve => {
            resolve(res + '222')
        }).then(res => {
            console.log(res, '第三层的10行处理代码')
        })
    })
})


new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('aaa')
    }, 1000)
}).then(res => {
    console.log(res, '第一层的10行处理代码')

    return Promise.resolve(res + '111')

}).then(res => {
    console.log(res, '第二层的10行处理代码')

    return Promise.resolve(res + '222')
}).then(res => {
    console.log(res, '第三层的10行处理代码')
})

new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('aaa')
    }, 1000)
}).then(res => {
    console.log(res, '第一层的10行处理代码')

    return res + '111'

}).then(res => {
    console.log(res, '第二层的10行处理代码')

    return res + '222'
}).then(res => {
    console.log(res, '第三层的10行处理代码')
})

Promise的all方法使用

 Promise.all([
      new Promise((resolve, reject) => {
          setTimeout(() => {
              resolve("111")
          }, 2000)
      }),
      new Promise((resolve, reject) => {
          setTimeout(() => {
              resolve({
                  name:'得意小门生',
                  age:18
              })
          }, 1000)
      })
  ]).then( results => {
      console.log(results);
})