为什么在for循环里的promise,无法读取到index

Vagor
  • 716
for (var key in arr) {
  if (arr.hasOwnProperty(key)) {
    console.log('这一次可以输出key'+key)
    this.$http.post('/getPaperListByCIdAndTId', {
      teacherId: window._const.teacherId,
    }).then((res_in) => {
      console.log('这一次不能输出key'+key)
    })
  }
} 

第二次输出的是$remove

clipboard.png

或者告诉我怎样在.then里获取到key

回复
阅读 3.1k
5 个回答
边城
  • 53.6k
✓ 已被采纳

这个问题是比较典型的循环变量作用域的问题。then() 中的回调被调用的时候 key 可能已经循环到最后一个了(也可能是间的某个值),所以里面使用的 key 值是当时的 key 值。这在 ES6 中要可以用 let 代替 var 来解决(因为我看你已经用了 ES6 的箭头函数,所以先用 ES6)

for (let key in arr) {
    if (arr.hasOwnProperty(key)) {
        console.log("这一次可以输出key" + key);
        this.$http.post("/getPaperListByCIdAndTId", {
            teacherId: window._const.teacherId
        }).then((res_in) => {
            console.log("这一次不能输出key" + key);
        });
    }
}

如果要写 ES5,可以用个 IIFE 来封局部化 key 值(通过参数传入,所以不会变了)

for (var key in arr) {
    if (arr.hasOwnProperty(key)) {
        (function() {
            console.log("这一次可以输出key" + key);
            this.$http.post("/getPaperListByCIdAndTId", {
                teacherId: window._const.teacherId
            }).then(function(res_in) {
                console.log("这一次不能输出key" + key);
            });
        })(key);
    }
}

推荐函数式写法,看起来比较简洁,ES6 可以这样干

Object.keys(arr)
    .filter(key => arr.hasOwnProperty(key))
    .forEach(key => {
        console.log(`这一次可以输出 key:${key}`);
        this.$http.post("/getPaperListByCIdAndTId", {
            teacherId: window._const.teacherId
        }).then(res_in => {
            console.log(`这一次不能输出 key 才怪:${key}`);
        });
    });

ES2017 还可以用 async,语法更简洁

Object.keys(arr)
    .filter(key => arr.hasOwnProperty(key))
    .forEach(async key => {
        console.log(`这一次可以输出 key:${key}`);
        const res_in = await this.$http.post("/getPaperListByCIdAndTId", {
            teacherId: window._const.teacherId
        });
        console.log(`这一次不能输出 key 才怪:${key}`);
    });

刚测试了下,是可以的,而且一定要用let而不是var,否则输出的都是最后一个key

clipboard.png

关键字:闭包

用array.map解决会更优雅

闭包了 es6中将var换成let即可

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏