[ vue.js ] forEach문에서 store.dispatch를 통한 API 통신 시 에러 문제점
조회수 147회
제목과 같이 vue.js 언어를 통해 외부 API를 호출하는 기능을 개발 중입니다.
개발하다보니 아래와 같은 동작을 구현해야 되는데 forEach문 안에서 API를 호출 요청하니 에러가 자꾸 발생되어 문의드립니다...
[ 흐름도 ]
1) API-1 호출 (return값: array)
2) 받은 array 값을 forEach문 실행
3) array값에 있는 정보를 파라미터로 API-2 호출
에러메시지는 아래와 같습니다..
JsonToExcelAll > catch : TypeError: **Cannot read properties of undefined (reading '$store')**
at eval (d:\3.0\src\components\SideListContentsTable.vue?c027:697:1)
at Array.forEach (<anonymous>)
at eval (webpack-internal:///849:694:18) {stack: 'TypeError: Cannot read properties of undefine…
at eval (webpack-internal:///849:694:18)', message: 'Cannot read properties of undefined (reading '$store')'}
forEach문 밖에서 API-2를 호출하면 정상작동합니다... 왜 이런것인지 답변 좀 부탁드리겠습니다...ㅠㅠ
[ 소스 추가 ]
parseJsonToExcel2(getTabInfo, getDongInfo) { // 엑셀 다운로드 함수
const self = this
this.json_to_excel = []
this.$store.dispatch('postSystemInfo', { // API-1
header: {
cmd: '1'
}
}).then((data) => {
if (data.result.status == '000' && data.header.cmd == '2') {
_.forEach(_.orderBy(data.data.list, ['dong', 'ho'], ['asc', 'asc']), function (dong, i) {
arr_dong.push(dong) // 동 정보 array에 담음
})
// for문 안에서 array 값의 동 정보를 그대로 store 이용하여 파라미터 던지고 싶음
// API-2를 여기 안에서 호출 시 에러...
arr_dong.forEach(function (value, index) {
// console.log('TEST ====>> dong : ', value + " / i : " + index)
})
this.$store.dispatch('postDeviceStatus', { // API-2
header: { cmd: '1' }, data: { dong: arr_dong[0], floor: 'all', line: 'all' }
}).then((data) => {
_.forEach(_.orderBy(data.data.data.list, ['dong', 'ho'], ['asc', 'asc']), function (data, pos) {
getDong = data.dong
getHo = data.ho
getComm = data.comm
_.forEach(_.orderBy(data.devices, ['uid'], ['asc']), function (v) {
let json = {
'통신상태': getComm,
'기기ID': v.uid,
'기기상태': v.status,
}
self.json_to_excel.push(json)
})
})
if (!_.isEmpty(this.json_to_excel)) {
var worksheetByJson = XLSX.utils.json_to_sheet(this.json_to_excel);
var book = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(book, worksheetByJson, getDong + "동");
XLSX.writeFile(book, '상세_' + moment().format('YYYYMMDDHHmmss') + '.xlsx');
}
})
} else {
self.$store.commit('setAlertActive', { flag: true, msg: data.result.message })
}
}).catch((e) => {
console.log('JsonToExcelAll > catch : ', e)
})
1 답변
-
arr_dong.forEach(function (value, index) { // 여기 }) // API-2 this.$store.dispatch('postDeviceStatus', { header: { cmd: '1' }, data: { dong: arr_dong[0], floor: 'all', line: 'all' } }).then((data) => {API-2에서
this를 참조하고 있는데, 이 코드를 그대로여기에 넣어버리면this가 가리키는 게 달라져서 발생하는 단순한 참조 에러입니다. 함수 내에서this는 해당 함수를 소유한 객체가 되기 때문입니다.쉽게 말해서:
arr_dong.forEach(function (value, index) { this.$store.dispatch('postDeviceStatus', { // API-2 header: { cmd: '1' }, data: { dong: arr_dong[0], floor: 'all', line: 'all' } })... // 생략 })Array.forEach()에 제공한 함수가 익명함수이므로this는 브라우저의 전역 객체인window가 됩니다. 익명함수는 자바스크립트 실행체의 전역 객체가 소유하거든요. 그리고window는$store라는게 없겠죠?예외가 있는데 화살표 함수를 사용하면
this의 스코프가 달라지지 않습니다. 아래 예시를 참고하세요.let obj = { executeMe() { setTimeout(function() { console.log('function this:', this); }, 100); setTimeout(() => { console.log('arrow this', this); }, 100); } }; obj.executeMe(); // function this: Window ... // arrow this: Object ...
댓글 입력