본문 바로가기

CodeIt_Sprint/비동기_자바스크립트5

(5)비동기_자바스크립트_복습, Promise_all문법, try,catch,finally적용 ● 이론0_ 지난 시간에 API에서 employee를 빠르고 효율적으로 데이터 받기 코드 작성해보기 (힌트 : B잼민이의 벨튀 10명)async function getEmployee(id){ //fetch를 Parameter id에 따라 딱 그놈만 데이터 불러오기 const strData = await fetch(`https://learn.codeit.kr/api/employees/${id}`); const jsonData = await strData.json(); return jsonData;//Promise 객체로 반환}//APU Json 데이터는 인덱스 1부터임for(let i = 1;i● 이론1_ 여러 Promise 객체를 리퀘스트할 때, 사용하는 문법 => Promise.all()메소드○.. 2024. 12. 3.
(4)비동기_자바스크립트_API 불러오기 작업의 오류처리 => try,catch,finally문, 비동기함수 작성 then()문법 ,then()+try,catch,finally문, 작동원리 ● 이론0_ API 데이터 불러오고, 처리하는 코드 작성 시, 오류를 생각안했다.export async function getIntervers() { const strData = await fetch('https://learn.codeit.kr/api/interview-results'); const jsonData = await strData.json(); console.log(jsonData);}◇ 오류 요인fetch 하려고 하는 url이 잘못 기재url 내 데이터가 없다...등등● 이론1_ try{}Catch{}finally{} 문○ 정의 :try {..} : 비동기 작업과 최종 결과가 구현될 블록 , 중간에 오류가 날 시, catch 블록으로 이동됨catch {..} : try{}에서 넘어올 .. 2024. 12. 3.
(3)비동기_자바스크립트_★Promise문법 없이, API 데이터 다루기, Promise 문법 기초 : fetch() , await키워드,json()메소드 , 비동기 + 동기 작업하기 => async 키워드 ● 이론1_ Promise 문법 없이, 데이터 다루기 :○ 0단계 : json 데이터 출력법 => JSON객체 프로퍼티 메소드 stringify(jsonData,null,들여쓰기 개수?)# GPT 설명 (근데 중요한건 아니므로, 대략 읽으면서 끄덕 ㄱ)JSON.stringify(jsonData, null, 2)은 JavaScript에서 객체(jsonData)를 JSON 형식의 문자열로 변환하는 함수인 JSON.stringify를 사용하는 코드입니다.각 매개변수의 의미는 다음과 같습니다:jsonData: JSON 형식으로 변환할 데이터 객체. 예를 들어, { name: "Alice", age: 25 } 같은 객체를 JSON 문자열로 바꿉니다.null: replacer 매개변수로, 변환 시 특정 속성만 선택.. 2024. 12. 2.
(2)비동기_자바스크립트_비동기,동기의 작동 순서, 비동기 함수들 여럿 예시들 ● 이론1_비동기, 동기 콜백 순서○ 아래의 코드상황을 보자- 코드 :console.log('1');setTimeout(() => console.log('2'), 0); //바로 콜백함수를 호출하라는 뜻console.log('3');console.log('4');console.log('5');console.log('6');console.log('7');console.log('8');console.log('9');console.log('10');- 출력 결과 :13456789102- 이러한 출력 결과가 나온 이유 :내가 생각하기엔, 콜백은 함수 아래의 동기 함수들이 먼저 동작을 한 후, 비동기 함수인 콜백함수를 처리하는 것이 원칙인가봄 - 결론 :▶ 코드 순서 : 콜백함수 , 동기 함수 들▶ 수행 순서 :.. 2024. 12. 1.

티스토리툴바