JavaScript/Web Development (21) 썸네일형 리스트형 [JavaScript] async 함수가 리턴하는 promise 객체 다음의 코드를 실행하면, async function fetchAndPrint() { return 3; } fetchAndPrint(); async 가 붙은 함수는 항상 promise 객체를 return 한다. 따라서, fechAndPrint 함수는 promise 객체를 return 하며, 이는 fulfilled 상태이고 그 작업성공결과는 3이다. 다음 함수를 실행하면, async function fetchAndPrint() { return fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()); } fetchAndPrint(); 리턴된 promise 객체와 동일한 상태, 작업성공결과를 가진 promis.. [JavaScript] async/ await 의 catch/ finally 문 다음과 같이 잘못된 url 주소를 입력한 코드를 실행하면, async function fetchAndPrint() { const response = await fetch('https://jsonplaceholder.typicode.commm/users'); const result = await response.text(); console.log(result); } fetchAndPrint(); 다음과 같이 에러가 발생. [try catch 문] 이 문제를 해결하기 위해 try catch 문을 사용하면, async function fetchAndPrint() { try { const response = await fetch('https://jsonplaceholder.typicode.commm/users'.. [JavaScript] async/ await 다음 코드를 실행하면, // fetch('https://jsonplaceholder.typicode.com/users') // .then((response) => response.text()) // .then((result) => { console.log(result); }); async function fetchAndPrint() { const response = await fetch('https://jsonplaceholder.typicode.com/users'); const result = await response.text() console.log(result); } fetchAndPrint(); 위의 주석처리한 promise chain 코드를 실행했을 때와 똑같이 response 가 잘 출력됨... [JavaScript] axios fetch 함수는 Ajax 통신을 하는 함수이다. 그런데 오늘날 개발 실무에서는 이 fetch 함수 말고도 Ajax 통신을 할 수 있는 방법이 존재하는데, 그것은 바로 axios 라고 하는 외부 패키지를 사용하는 것이다. axios 패키지를 사용한 코드를 보면, axios .get('https://jsonplaceholder.typicode.com/users') .then((response) => { console.log(response); }) .catch((error) => { console.log(error); }); 이 코드는 axios 패키지에서 제공하는 axios 객체를 사용해서 GET 리퀘스트를 보내고 그 리스폰스를 받는 코드이다. 자세히 보면 지금 코드에서 axios.get이라고 쓰여 있는.. [JavaScript] Ajax [Ajax] Ajax는 웹 브라우저가 현재 페이지를 그대로 유지한 채로 서버에 리퀘스트를 보내고 리스폰스를 받아서, 새로운 페이지를 로드하지 않고도 변화를 줄 수 있게 해주는 기술이다. Ajax는 Asynchronous JavaScript And XML의 줄임말로, 이는 자바스크립트를 사용해서 비동기적으로(=사용자가 보고 있는 현재 화면에 영향을 미치지 않고 별도로 백그라운드에서 작업을 처리한다는 뜻) 리퀘스트를 보내고 리스폰스를 받는데 기반이 되는 기술들의 집합을 의미한다. 예를들어, 구글 맵 웹페이지를 들 수 있는데 구글 맵에서 서울특별시 중구 을지로 쪽을 보다가 '명동 성당'의 정보가 보고 싶어졌다고 가정하면 명동 성당 아이콘을 클릭하면 됨. 이렇게 명동 성당을 클릭했을 때, 초창기의 웹이었다면 아.. [JavaScript] Promise 객체 만들기 [Promise 객체 만들기] new Promise () : 새로운 promsie 객체를 생성하는 코드 위 함수를 가르켜 'Executor' 함수 라고 한다. 여기서 두 파라미터 resolve, rejected 는 특별한 기능을 가지고 있음. resolve : 생성될 promise 객체를 fulfilled 상태로 만들 수 있는 함수가 연결 됨. reject : 생성될 promise 객체를 rejected 상태로 만들 수 있는 함수가 연결 됨. [promise 객체가 fulfilled 인 경우] const p = new Promise((resolve, reject) => { setTimeout(() => { resolve('success'); }, 2000); }); p.then((result) => { .. [JavaScript] finally 메소드 [finally 메소드] 어떤 작업의 성공 유무 (fulfilled, rejected) 에 상관없이, 항상 실행하고 싶은 콜백이 있을 때 사용하는 메소드 fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .then((result) => { console.log(result); }) .catch((error) => { console.log(error); }) .finally(() => { console.log('exit'); }); 어떤 경우에도 exit 이 출력되며, .finally 메소드 안의 콜백은 작업성공 결과, 작업실패 정보가 필요 없어서 파라미터가 필요하지 않음. 위와 같은 결과가 출력됨.. [JavaScript] 마지막에 써야하는 catch 메소드 [catch 메소드가 마지막에 있지 않은 경우] 다음 코드를 실행시키면, fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .catch((error) => { console.log(error); }) .then((result) => { console.log(result); throw new Error('test'); }); fetch 함수는 정상실행되어 response 가 잘 전달 되었으나, 그 뒤에서 발생한 에러는 잡지 못했음. rejected 상태의 promise 가 남고 딱히 처리를 안해주면 웹 브라우저는 에러로 인식함. [catch 메소드가 마지막에 있는 경우] 다음과 같이 catch 함수.. 이전 1 2 3 다음
