js使用 return new Promise写一个异步 根据接口返回的状态展示弹层的内容

前端 vue 开发遇到一个需求，点击按钮打开弹层组件，在打开弹层之前需要调一个接口，根据接口返回的状态展示弹层的内容。

<popup :before-open="getInfoFun" :is-before-open="true"/>

    getInfoFun() {
      return new Promise((resolve, reject) => {
        // ajax
        getInfo().then((response) => {
            const { code, data } = response;
            if (code === "0") {
              this.data = data
              resolve(true);
            }
          })
          .catch((error) => {
            reject(false);
          });
      });
    },

进入到弹层组件：

props: {
    // 是否需要调用 beforeOpen 方法,false 不调用
    isBeforeOpen: {
      type: Boolean,
      default: false,
    },
    // 打开弹层之前是否需要调用异步方法
    beforeOpen: { 
      type: Function,
      required: false,
      default: null
    },
}

    // 打开弹层之前的操作
    async beforeOpenFun() {
      // 打开弹层之前需要调接口
      if (this.isBeforeOpen) {
        // res:为 boolean 值，true/false
        const res = await this.beforeOpen()；
        this.visible = res;
      } else {
        // 直接打开弹层
        this.visible = true;
      }
    },

以上就是 js 使用 return new Promise 写一个异步 根据接口返回的状态展示弹层的内容的详细内容，更多请关注码云笔记其它相关文章！

以上关于js使用 return new Promise写一个异步 根据接口返回的状态展示弹层的内容的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。