javascript - 为什么在for循环里的promise,无法读取到index
本文介绍了javascript - 为什么在for循环里的promise,无法读取到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)
})
}
}
第二次输出的是$remove
或者告诉我怎样在.then里获取到key
解决方案
这个问题是比较典型的循环变量作用域的问题。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}`);
});
这篇关于javascript - 为什么在for循环里的promise,无法读取到index的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文