search

Home  >  Q&A  >  body text

javascript - Why the promise in the for loop cannot read the index

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)
    })
  }
} 

The second output is $remove

Or tell me how to get the key in .then

给我你的怀抱给我你的怀抱2846 days ago693

reply all(5)I'll reply

  • 仅有的幸福

    仅有的幸福2017-05-19 10:22:43

    Keyword: closure

    reply
    0
  • 習慣沉默

    習慣沉默2017-05-19 10:22:43

    It will be more elegant to use array.map to solve it

    reply
    0
  • 滿天的星座

    滿天的星座2017-05-19 10:22:43

    It’s closed. Just replace var with let in es6

    reply
    0
  • 高洛峰

    高洛峰2017-05-19 10:22:43

    This problem is a typical loop variable scope problem. then() 中的回调被调用的时候 key 可能已经循环到最后一个了(也可能是间的某个值),所以里面使用的 key 值是当时的 key 值。这在 ES6 中要可以用 let 代替 var to solve it (because I see that you have already used the arrow function of ES6, so use ES6 first)

    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);
            });
        }
    }

    If you want to write ES5, you can use an IIFE to seal the localized key value (passed in through parameters, so it will not change)

    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);
        }
    }

    Recommended functional writing method, it looks simpler, ES6 can do it like this

    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 can also use async, the syntax is more concise

    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}`);
        });

    reply
    0
  • ringa_lee

    ringa_lee2017-05-19 10:22:43

    I just tested it, it works, and you must use let instead of var, otherwise the output will be the last key

    reply
    0
  • Cancelreply