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 写一个异步 根据接口返回的状态展示弹层的内容的详细内容，更多请关注其它相关文章！