关于Promise在vue动态组件中的应用

最新推荐文章于 2024-08-24 08:57:05 发布

RTau

最新推荐文章于 2024-08-24 08:57:05 发布

阅读量761

点赞数

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

本文链接：https://blog.csdn.net/Tausum/article/details/118427555

版权

本文探讨了如何在Vue动态组件中利用Promise进行异步控制，详细介绍了Promise的基本用法，Vue动态加载组件的步骤，以及一个具体的示例演示，包括组件代码、封装方法和在main.js中的配置。通过这种方式，可以实现组件加载和交互的精细化控制。

摘要由CSDN通过智能技术生成

关于Promise在vue动态组件中的应用

showPopupFrame(){
   
  this.showPopupFrameBtnDisable = true
  this.$loginFrame().then(res=>{
   
    // resolve时执行
    console.log(res)
  }).catch(err=>{
   
    // reject时执行
    console.log(err)
  }).finally(()=>{
   
    // 无论结果如何都执行
    this.showPopupFrameBtnDisable = false
  })
}

生成组件以后，调用组件的地方可以监听组件动向，并根据此做出不同的操作，非常适用于各种需要交互的弹窗

一、 Promise

Promise是在es6(ECMAScript 6.0)中的新特性，它是异步编程的一种解决方案。基本使用方法如下：

  // 定义一个Promise对象
  const wait = ms => {
   
    return new Promise((resolve,reject)=>{
   
        if(ms>10000){
   
          // 如果ms大于10000则提交错误，执行catch
          reject(ms+'毫秒太多了！')
        }else{
   
          // 否则执行then
          setTimeout(()=>{
   resolve(ms+'毫秒过去了...')},ms)
        }
    })
  }
  // 执行catch