편집 기록

프로필 편집요청빌런님의 편집

날짜2022.11.18

[ vue.js ] forEach문에서 store.dispatch를 통한 API 통신 시 에러 문제점

vue.js

foreach

javascript

제목과 같이 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)
      })

프로필 ssangyongtt@gmail.com님의 편집

날짜2022.11.17