[JAY⌨️JS] fetch()를 활용해 API를 호출하기 위한 사용자 정의 스니펫 만들기!

 🤔 포스팅 작성에 앞서 권고드립니다!

• 혹시 자바스크립트 입문자 분이 이 글을 읽고 계시다면 fetch(), promise 객체에 대해 충분한 이해를 먼저 진행하시기를 권장드립니다.
• 저 역시 입문자로 API 호출 패턴에 대해 충분히 반복학습을 진행한 뒤에 반복되는 코드를 발견하고 생산성을 높이기 위해 스니펫 제작을 진행하게 되었습니다.
• 해당 게시물은 fetch() 메소드를 promise.then 메소드를 활용해 실행하는 방식과, async/await을 활용해 실행하는 방식 두 가지로  구성되어 있으며 Visual Studio Code 프로그램을 기준으로 작성되었습니다.

 

 

 

 😎 스니펫 설정 방법

1. vscode 에서 사용자 코드 조각 구성(snippets) 설정으로 이동.
2. 전역(global.code-snippets), 혹은 javascript.json을 선택해서 스니펫 정의.
3. json 형식으로 스니펫 작성.

 

사용자 코드 조각 구성(snippets) 설정으로 이동

 

 

 

 1️⃣ Promise.then을 사용하여 스니펫 만들기.

• 스니펫 호출 시 fetchPromise 코드 실행
• 해당 스니펫의 fetch()는 가져오고자 하는 API 호출 경로를 나타내는 하나의 arguments만 받는다.
• 실행 시 '$1' 구문에 API 호출 주소를 입력하면 된다.
• 응답은 Response 객체로 표현되므로 JSON 본문 콘텐츠를 추출하기 위해 .json()메서드를 통해 Parsing을 진행하고 Promise를  한번 더 반환한다.
• promise가 이행(resolve)될 때 console.log를 통해 데이터가 잘 들어왔는지 확인한다.
• promise가 거부(reject)될 때 호출되는 catch() 메서드를 통해 에러메시지 출력한다.

 

{
  "[Fetch API] Promise.then": {
    "prefix": "fetchPromise",
    "body": [
      "fetch('$1')",
      "  .then(response => response.json())",
      "  .then(data => console.log(data))",
      "  .catch(error => console.error('Error:', error));"
    ],
    "description": "[Fetch API] Promise.then"
  }
}

 

 

 

 2️⃣ Async/await을 사용하여 스니펫 만들기.

• 스니펫 호출 시 fetchAsync 코드 실행
• 해당 스니펫의 fetch()는 가져오고자 하는 API 호출 경로를 나타내는 하나의 arguments만 받는다.
• 실행 시 '$1' 구문에 API 호출 주소를 입력하면 된다.
• function 키워드 앞에 async 만 붙여주고, 비동기로 처리되는 부분 앞에 await 만 붙여주면 되기 때문에 더 간결한 로직 실행 가능.
• await는 이름과 같이 Promise 비동기 처리가 완료될 때까지 코드 실행을 일시 중지한다는 의미.
  fetch() 메서드를 통한 API호출, json() 메서드를 통한 Parsing을 진행할 때 일반적으로 2번 붙여준다.

 

{
  "[Fetch API] Async/Await": {
    "prefix": "fetchAsync",
    "body": [
      "async function fetchData() {",
      "  const response = await fetch('$1');",
      "  const data = await response.json();",
      "  console.log(data);",
      "}"
    ],
    "description": "[Fetch API] Async/Await"
  }
}

 

 

 3️⃣ Try/Catch 예외처리를 추가한 Async/Await 스니펫 만들기

• 스니펫 호출 시 fetchTryAsync 코드 실행.
• 해당 스니펫의 fetch()는 가져오고자 하는 API 호출 경로를 나타내는 하나의 arguments만 받는다.
• 실행 시 '$1' 구문에 API 호출 주소를 입력하면 된다.
• 응답(200-299 범위의 HTTP 상태 코드)이 성공했는지 확인하고 에러메시지를 전달하는 if(!response.ok) 조건문 추가.
• 비동기 처리에 대한 에러를 처리할 때 사용하는 try/catch문으로 감싸서 예외처리.
• 1️⃣, 2️⃣ 번 스니펫 구조에 예외처리를 추가함으로써 더 견고해진 코드라고 할 수 있다.

 

{
  "[Fetch API]Async/Await with Try/Catch": {
    "prefix": "fetchTryAsync",
    "body": [
      "async function fetchData() {",
      "  try {",
      "    const response = await fetch('$1');",
      "    if (!response.ok) {",
      "      throw new Error('HTTP error ' + response.status);",
      "    }",
      "    const data = await response.json();",
      "    console.log(data);",
      "  } catch (error) {",
      "    console.error('Error:', error);",
      "  }",
      "}"
    ],
    "description": "[Fetch API] Async/Await with Try/Catch and HTTP error check"
  }
}

 

 

 

4️⃣ Promise.all 메소드를 통한 병렬처리 스니펫 만들기

• 스니펫 호출 시 fetchMultipleAsync 코드 실행.
• 해당 스니펫의 fetch()는 가져오고자 하는 API 호출 경로를 나타내는 두 개의 arguments를 받는다.
• await 키워드를 쓰면 비동기가 강제적으로 동기 처리가 되어 코드가 순차적으로 수행되므로
  한 개 이상의 API를 호출할 때 순차적으로 실행시킬 필요가 없는 경우 promise.all() 메소드를 사용해서
  병렬로 비동기 함수를 동기적으로 실행시킬 수 있다.
• Promise.all() 은 배열 내의 인자로 받은 promise 모두가 이행(resolve)되어야  결과를 리턴 받는다. 
  배열 인자의 각 프로미스 함수들은 제각각 비동기로 즉시 실행되어 시간이 단축되는 특징이 있으며, 배열에 값을 담아서 반환한다.

 

{
  "[Fetch Multiple APIs] Promise.all and Async/Await": {
    "prefix": "fetchMultipleAsync",
    "body": [
      "async function fetchData() {",
      "  try {",
      "    const [response1, response2] = await Promise.all([fetch('$1'), fetch('$2')]);",
      "    if (!response1.ok || !response2.ok) {",
      "      throw new Error('HTTP error ' + response1.status + ' or ' + response2.status);",
      "    }",
      "    const [data1, data2] = await Promise.all([response1.json(), response2.json()]);",
      "    console.log('Data1:', data1);",
      "    console.log('Data2:', data2);",
      "  } catch (error) {",
      "    console.error('Error:', error);",
      "  }",
      "}"
    ],
    "description": "[Fetch multiple APIs] Promise.all and Async/Await"
  }
}