Question

我在从javascript类对象中获取属性值时遇到了困难以下是类文件以及我如何尝试获取其属性值：

1：我在classes.js中定义了一个名为School的课程

export class School{
    constructor()
    {
        this.schools = []; //to store schools returned from backend

    }

    //used to get all schools 
    getall()
    {

        axios.get('/api/schools')
            .then(response =>{
                this.schools = response.data;
                console.error('School length: ' + this.schools.length);

                this.ok = true;
                //add origin data property
                for(let i = 0; i < this.schools.length; i++)
                {
                    this.schools[i]['orgValue'] = new tagChange();
                }
            })
            .
            catch(error => {
                this.ok = false;
                this.error = error.status;
                this.schools = [];

            });
        return this.schools;
    } //getall
}

2：我将这个School类导入另一个js文件

    //import School class
    import {tagChange, School} from './classes.js';



    export default {
        components: {
            modalAddSchool,
        },

        data() {
            return {
                schools: [], // my schools in

                mySchoolObj: new School(), //create a School object

            }
        },

        methods: {

            getAllSchools()
            {


                //after this call, mySchoolObj's schools property indeed contain 8 elements in array format,
                //However, this.schools can not be assigned successfully, so unexplainable
                this.schools = this.mySchoolObj.getall();

                //print zero element
                console.log(this.mySchoolObj.schools);

                //print zero element
                console.log(this.schools)
            }
        },

3：调用getAllSchools()方法后，mySchoolObj.schools确实包含8个学校元素，但this.schools无法成功分配，以下两个console.log调用只能打印为零长度

4：我真的想知道如何将mySchoolObj.schools全部归还this.schools，以及如何获取/访问其他属性值？

Answer 1

axios.get是异步的，这意味着当您return this.schools;时，ajax调用尚未完成，因此您返回一个空数组[]。

此处有更多信息： Synchronous and asynchronous requests

您可以返回axios给出的承诺或使用回调，例如：

//used to get all schools 
getall(callback) { // take a callback function
  axios.get('/api/schools')
    .then(response =>{
      this.schools = response.data;
      console.error('School length: ' + this.schools.length);
      this.ok = true;
      //add origin data property
      for (let i = 0; i < this.schools.length; i++) {
        this.schools[i]['orgValue'] = new tagChange();
      }
      if (typeof callback === 'function') {
        callback(this.schools, null); // call the callback with data and null (null because there is no error)
      }
    })
    .catch(error => {
      this.ok = false;
      this.error = error.status;
      this.schools = [];
      if (typeof callback === 'function') {
        callback(null, error.status); // call the callback with null data and the error status
      }
    });
  return this.schools;
}

然后你就可以使用你的方法：

methods: {
  getAllSchools() {
    this.mySchoolObj.getall((data, error) => {
      if (error) {
        return console.log(error);
      }
      this.schools = data;
      console.log(this.schools);
    });
  }
},

（此代码未经过测试，可能包含错误）

如何获取javascript类对象的属性值

1 个答案: