JavaScript 数组有内容但 length === 0?

Question

代码如下，fetchData 通过 http 请求获取数据并放入 provinceList，但 provinceList.length 等于 0。通过控制台输出相关信息，provinceList 中应该是有内容的。

代码均位于 vue 文件中。

changeCountry(val) {
      this.fetchData(
        this.provinceList,
        `${this.API.province}/${this.countryCode}`,
      );
      this.provinceFlag = true;

      const prolist = this.provinceList;
      this.noProvince = (prolist.length === 0);
      console.log('changeCountry: 1 ', prolist);
      console.log('changeCountry: len ', prolist.length, 'noProvince ', this.noProvince);
      this.$emit('addressSelect', val);
    }
    
    fetchData(array, url) {
      this.axios
        .get(url)
        .then((resp) => {
          if (resp.status === 200) {
            const items = JSON.parse(JSON.stringify(resp.data.data));
            array.splice(0, array.length, ...items);
          } else {
            console.log(resp.status);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

Answer 1

楼上的几位说的都对，改成这样就好了：

changeCountry(val) {
      console.log(1);
      this.fetchData(
        this.provinceList,
        `${this.API.province}/${this.countryCode}`,
        () => {
          console.log(5);
          this.provinceFlag = true;
          const prolist = this.provinceList;
          this.noProvince = (prolist.length === 0);
          console.log('changeCountry: 1 ', prolist);
          console.log('changeCountry: len ', prolist.length, 'noProvince ', this.noProvince);
          this.$emit('addressSelect', val);
        }
      );
      console.log(3);
      
    }
    
    fetchData(array, url， done) {
      console.log(2);
      this.axios
        .get(url)
        .then((resp) => {
          console.log(4);
          if (resp.status === 200) {
            const items = JSON.parse(JSON.stringify(resp.data.data));
            array.splice(0, array.length, ...items);
          } else {
            console.log(resp.status);
          }
          // 获取完数据以后，再继续执行
          done();
        })
        .catch((err) => {
          console.log(err);
        });
    }

如果不太明白的话，可以打开控制台 - 网络：

然后选择offline或low3g，或是自定义一个比较低的带宽。就知道为什么了。

Answer 2

控制台的是快照，点开的时候才会去读取真实内容。

所以你可以深拷贝之后再打印看看。一般直接JSON.parse(JSON.stringify())

Answer 3

你这是一个很典型的异步请求的问题。

在你执行打印数组内容的时候， this.fetchData的时候数据并没有请求结束，

建议你的fetchData 这个方法也改写下

使用return new Promise的方法来包裹下 这样调用这个方法的时候 可以使用 promise或者async等方式来调用。保证异步完成之后，在执行剩下的操作