반응형 SMALL JavaScript7 [JS] Fetch API 사용하기 - fetch() 메서드는 가져오려는 리소스의 경로를 필수 인수로 사용한다. - 성공 여부와 관계없이 Promise를 반환한다. - fetch()의 결과로 리턴된 Promise는 HTTP 상태 에러(404, 500인 경우에도)가 발생해도 정상적으로 해결되고(ok상태는 false로 설정됨!) 네트워크 오류가 발생한 경우에만 거부된다. ex> 네트워크를 통해 JSON파일을 가져와서 콘솔에 인쇄 fetch('http://example.com/movies.json') .then(response => response.json()) // 응답에서 JSON 본문 컨텐츠를 추출하기 위해 json()메서드를 사용한다. .then(data => console.log(data)); const data = { username.. 2020. 10. 5. [JS] async와 await 이해 - 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하기 위해 사용 - 기본 문법 // 주의: 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작한다! async function 함수명() { await 비동기_처리_메서드_명(); } ex1> // 비동기 처리를 콜백으로 안해도 된다면.. function logName() { var user = fetchUser('domain.com/users/1'); if (user.id === 1) { console.log(user.name); } } // 그냥 콜백으로 처리 function logName() { // 아래의 user 변수는 위의 코드와 비교하기 위해 일부러 남겨놓음. var user = fetchUser('.. 2020. 10. 5. [JS] Promise 이해 - JS 비동기 처리에 사용되는 객체 (JS비동기 처리: 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 js의 특성) - 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용 - 콜백 지옥을 해결하기 위해 사용(async도 사용 가능) - 여러개의 프로미스를 연결하여 사용 가능 new Promise()로 프로미스 객체를 생성하고 종료될 때까지 3가지 상태를 갖는다. Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태 Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태 function getData(callback) { // new Promise() 추가.. 2020. 10. 5. 이전 1 2 다음 반응형 LIST
