다른 js파일의 function 동기 처리

Question

Directory1. test.html2. func.js test.html ``` 중략 `````` 중략 ``` func.jsfunction getDog(){ var dog = {}; ``` 중략 ``` (API 통신 후 dog에 값 주입) console.log(dog) // 정상 출력 됨. return dog; }; Console111 // from test.htmlundefined // from test.htmldog object values // from func.js Console 기대값111 // from test.htmldog object values // from func.jsdog object values // from test.html Question노란줄 쳐진 부분의 undefined가 아닌 func.js의 getDog()의 return 값을 넣고 싶습니다. async-await와 Promise를 사용해보았는데, 원하는 결과가 도출이 되지 않았습니다...제대로 사용을 못하는 것일 수도 있고접근 방법이 잘못 되었을 수 있을 것 같고이런식으로 구조를 가져가는게 아닐 수도 있을 것이란 생각이 듭니다. 고수님들의 조언이 필요합니다 ㅠㅠ

yongsik · Answer

ajax 동기화 방식으로 진행해보셨나요?

Sroovb · Answer

&#64;yongsik ajax는 사용해보지 않았습니다. 근데 getDog() 내부에서 API통신 후 console.log를 찍어보면 값들이 정상적으로 출력이 됩니다. test.html의 getInfo의 console.log에서 먼저 호출이 되어서 undefined가 출력되는 것으로 파악하고 있습니다.

장독깨기 · Answer

기본적으로 비동기로 생각하고 처리하셔야 합니다.ajax, axios, fetch 모두 기본적으로 비동기로 처리합니다.비동기로 처리한다는 얘기는 api 를 호출 했을 때 데이터를 가져올 때 까지 기다리지 않는다는 뜻 입니다.그러니까, 콜백 함수를 넘겨주든지, Promise, then, async, await 이런 함수들을 이용해서 비동기로 처리 해야 하는거죠.물론, ajax 와 axios 는 옵션에 동기 방식을 지원합니다. (아마 fetch 는 없을 겁니다.)근데, 이 동기 옵션을 적용해 api 를 호출하게 되면 데이터가 도착할 때 까지 대기하게 되니 바람직 하지 않습니다.비동기 처리 방식을 자세히 알아보시는게 좋겠습니다.

다른 js파일의 function 동기 처리

3개의 답변

Q&A 목록