JavaScript/Web Development (21) 썸네일형 리스트형 [JavaScript] catch 메소드 rejected 상태가 되면 실행할 콜백을 설정하는 방법으로는 다음과 같은 방법이 있음. 1. then 메소드의 두번째 콜백함수를 설정 fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text(), (error) => { console.log(error); }) .then((result) => { console.log(result); }); 2. catch 메소드 활용 : promise 객체가 rejected 상태가 되면 실행할 콜백을 등록하는 메소드 fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .. [JavaScript] rejected 상태에서 실행할 콜백 첫번째 then 메소드는 두개의 콜백을 가지고있음. 첫번째 콜백은 fulfilled 상태가 되면 실행할 콜백이고, 두번째 콜백은 rejected 상태가 되면 실행할 콜백임. 만약 promise 객체가 rejected 상태가 됐을 때 실행할 콜백을 설정하고 싶다면, then 메소드의 두번째 파라미터에 원하는 콜백을 넣어주면 됨. 첫 번째 콜백 : promise 객체가 fulfilled, 작업 성공 결과를 가져옴 두 번째 콜백 : promise 객체가 rejected, 작업 실패 정보 가져옴 [작업 성공 : 첫번째 콜백] fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text(), (error) => { con.. [JavaScript] Promise Chaining [Promise Chaining] 이처럼 fetch 함수에서 3번 콜백함수가 실행되면 4번 콜백함수가 이어서 실행되는데, then 메소드 뒤에는 이런식으로 계속해서 then 메소드를 붙이는 것이 가능하다. 다음 코드를 실행해보면, console.log('시작!'); fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .then((result) => { const users = JSON.parse(result); return users[0]; }) .then((user) => { console.log(user); const { address } = user; return address; }) .the.. [JavaScript] Promise 객체 [promise 객체] promise 객체는 작업에 관한 상태정보를 담고 있는 객체로, fetch 함수는 promise 객체를 return 함. promise 객체는 다음과 같이 상태에 따라 세 경우로 나눌 수 있음. pending : 진행 중 fulfilled : 성공 rejected : 실패 [JavaScript] 비동기 실행 함수 [동기실행] 한번 시작한 작업을 완료하기 전까지 코드의 실행 흐름이 절대 그 다음코드로 넘어가지 않는 것으로, 시작한 작업을 완벽하게 처리하고나서 그 다음코드로 실행 흐름이 넘어감. 동기 실행의 경우 코드가 보이는 순서대로 실행됨. [비동기실행] 한번 작업을 시작해두고, 그 작업이 완료되기 전이더라도 콜백만 등록해두고 코드의 실행 흐름이 바로 그 다음코드로 넘어감. 추후에 특정 조건이 만족되면 콜백함수가 실행됨으로써 해당 작업을 완료. 비동기 실행에서는 코드가 등장하는 순서대로 실행되는 것이 아님. 비동기 실행이 동기 실행에 비해 동일한 작업을 더 빠른시간내에 처리할 수 있음 [비동기 실행함수] 1. setTimeout 함수 setTimeout 함수는, 특정 함수의 실행을 원하는 시간만큼 뒤로 미루기 위.. [JavaScript] fetch 함수와 비동기 실행 다음 fetch 함수를 실행시켜보면 다음과 같은 결과가 출력됨. console.log('시작!'); fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .then((result) => { console.log(result); }); console.log('끝!'); console.log('끝!'); 이 fetch 함수보다 먼저 출력되는 것을 확인할 수 있는데, 이는 fetch 함수에 비동기실행이 되는 부분이 있기 때문 [fetch 함수의 비동기실행] 1. 1 에서 '시작!' 이 출력 2. fetch 함수가 실행되며 Request를 보내고 어떤 객체를 리턴함. 이 때 3, 4에서 그 객체의 then .. [JavaScript] Status code (상태코드) Request 와 마찬가지로, Response 도 head 와 body로 나눌 수 있음. 1. 개발자도구에서 fetch 함수로 GET request 를 전달 다음과 같이 Response가 잘 전달된 것을 확인할 수 있음. 2. Network > users > status code 확인 Status code는 response 의 head 에 들어있는 정보로 상태코드라고 하며, 100 ~ 500 번대까지 다양한 상태코드가 있다. [상태코드 의미] (1) 100번대 서버가 클라이언트에게 정보성 응답(Informational response)을 줄 때 사용되는 상태 코드 100 Continue : 클라이언트가 서버에게 계속 리퀘스트를 보내도 괜찮은지 물어봤을 때, 계속 리퀘스트를 보내도 괜찮다고 알려주는 상태 .. [JavaScript] PUT/ DELETE request 보내기 참고용 url : https://learn.codeit.kr/api/members https://learn.codeit.kr/api/members learn.codeit.kr 1. PUT request : 기존 직원의 정보를 수정 저번에 추가했던 새 직원 '신짱구' 의 부서를 engineering 에서 marketing 으로 옮기고자 함 const member = { name: '신짱구', email: 'zzangu123@codeitmall.kr', department: 'marketing', }; fetch('https://learn.codeit.kr/api/members/6', { method: 'PUT', body: JSON.stringify(member), }) .then((response) =>.. 이전 1 2 3 다음
