js闭包取值

Question

嵌套调用接口函数来获取并更改信息，但是第二个接口函数取不到循环的i值，尝试传参，但是then方法又不太了解
fetchUserList(this.listQuery).then(response => {

    this.list = response.data.list
    for(var i=0;i < this.list.length;i++){
      this.list[i] = Object.assign({},this.list[i],this.list[i].sysUser)
      // this.list[i].office = getOfficeInfoById(this.list[i].officeId)
      getOfficeInfoById(this.list[i].officeId).then(response =>{
        this.office = response.data.data.name
        console.log(i)
      })
    }
    console.log(this.list)
    this.total = response.data.total 
    this.listLoading = false
  }) 
  

Answer 1

解决

把循环里面的var 换成let

for (let i=0;)

原因

你这种写法.每次都是取的最后一个i的值,即i总是等于this.list.length -1

原理

• 何为异步

  • 就是把所有同步方法执行完毕之后,再开始执行异步方法.即,如果你的循环是5次,那么系统会先执行循环这个代码,执行完一次循环,就在最后面排一个异步方法,一共排上5个,等循环代码执行完了,再依次执行这5个异步方法
  • 等你循环代码执行完的时候,i已经变成5了,所以每个异步方法取的值都是5

• 何为闭包

  • 闭包就是在异步方法里面,能够取到异步方法外的变量值...你这里的需求是,每个异步方法,取第一次循环的i值.所以必须定义局部变量传参

Answer 2

可以通过闭包的形式来取到循环的值：
循环代码修改如下：

for (var i = 0; i < this.list.length; i++) {
        this.list[i] = Object.assign({}, this.list[i], this.list[i].sysUser)
        // this.list[i].office = getOfficeInfoById(this.list[i].officeId)
        var _self = this;
        (function (officeId, i) {
            getOfficeInfoById(officeId).then(response => {
                _self.office = response.data.data.name
                console.log(i)
                //你的代码
            })
        })(this.list[i].officeId, i)
    }