javascript - 如何在 javascript 类完成后获得最终响应

Question

我编写了一个 JavaScript 类来用数据填充表单。但是，如果还有剩余的输入未放入表单中，我希望它们在响应中返回。表单填充后如何获取剩余的 json。

类(class)

 class Deserialize 
    {
        constructor(o)
        {
            this.o = o;
            this.leftovers = null;
            this.get();
            return new Promise((resolve,reject) => {

            resolve(this.leftovers);
        });
    }

    get()
    {
        console.log(1);
        let parent = this;
        return axios.get(this.o.url).then(function(response) {
            parent.o.data = response.data;
            console.log(2);
            parent.populate();
        });
    }

    populate()
    {
        console.log(3);
        let parent = this;
        let inputs = document.querySelectorAll(this.o.form + ' input, ' + this.o.form + ' textarea, ' + this.o.form + ' select');

        inputs.forEach(function(v, i) {
            let name = v.name;
            let type = v.type;
            let data = parent.o.data;

            Object.keys(data).forEach(function(i) {
                if (i == name) {
                    switch (type) {
                        case 'checkbox':
                            v.checked = true;
                        break;
                        case 'radio':
                            if (v.value == data[i]) v.checked = true;
                        break;  
                        case 'select-one':
                        case 'textarea':
                        case 'text':
                        case 'tel':
                        case 'date':
                        case 'time':
                        case 'email':
                        case 'hidden':
                        case 'password': 
                        case 'color':
                            v.value = data[i];
                        break;
                    }

                    delete parent.o.data[i];
                }
            }); 
        });

        this.leftovers = parent.o.data;
    }
}

我这样初始化

const deserialize = new Deserialize({
    form: '#account-form',
    url: '/account/getAccountJson/'
}).then(function(response) {
    console.log(response);
});

如何获取表单填充后剩余的输入？

Answer 1

你可以简化它。

class Deserialize {
  constructor(o) {
    this.o = o;
    this.leftovers = null;
    return this.get();
  }

  get() {
    console.log(1);
    let parent = this;
    return axios.get(this.o.url).then((response) =>{
      parent.o.data = response.data;
      return parent.populate();
    });
  }

   async populate() {
    console.log(3);
    // Rest of the code
    this.leftovers = parent.o.data;
   return this.leftovers;
  }
}

不要在构造函数中进行异步调用。 反模式。

class Deserialize {
  constructor(options) {
    this.options = options;
    this.leftovers = [];
  }
  get() {
    return axios.get(this.options.url).then((response) => {
      this.options.data = response.data;
      return this.populate();
    });
  }
  populate() {
    let inputs = document.querySelectorAll(
      this.options.form +
        " input, " +
        this.options.form +
        " textarea, " +
        this.options.form +
        " select"
    );
    inputs.forEach((v, i) => {
      let name = v.name;
      let type = v.type;
      let data = this.options.data;
      data.forEach((i) => {
        if (i == name) {
          switch (type) {
            case "checkbox":
              v.checked = true;
              break;
            case "radio":
              if (v.value == data[i]) v.checked = true;
              break;
            case "select-one":
            case "textarea":
            case "text":
            case "tel":
            case "date":
            case "time":
            case "email":
            case "hidden":
            case "password":
            case "color":
              v.value = data[i];
              break;
          }
        } else {
          this.leftovers.push(this.options.data[i]);
        }
      });
    });
    return this.leftovers;
  }
}

const deserialize = new Deserialize({
  form: "#account-form",
  url: "/account/getAccountJson/",
})
  .get()
  .then(function (response) {
    console.log(response);
  });