[C/F TIL] 26일차 - JS/NODE 비동기 2, fetch API, axios

Code States
Front-end boost camp
Today
I
Learned

🌱 5월 17일 수요일~ 26일차 수업 시작!

🌱 fetch

• 특정 URL로부터 정보를 받아오는 역할
• 이 과정은 비동기로 이루어짐
• blocking이 발생하면 안되므로 특정 DOM에 정보가 표시될 때까지 로딩 창을 대신 띄우기도 함

let url =
  "https://koreanjson.com/posts/1";
fetch(url)
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.log(error));

🌱 Axios

• fetch API와 비슷한 역할
• 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리
• fetch 보다 사용이 간편
• 추가적인 기능 O

✔️ 사용법

// 다음 명령을 통해 axios 다운로드
npm install axios

• get 요청 : 일반적으로 정보를 요청하기 위해 사용되는 메서드

// 첫 번째 인자에는 url 주소(필수)
// 두 번째 인자에는 요청 시 사용할 수 있는 옵션 설정
axios.get("url"[,config])

• post 요청 : 서버에게 데이터를 보내기 위해 사용되는 메서드

// 첫 번째 인자에는 url 주소 (필수)
// 두 번째 인자에는 요청 시 보낼 데이터 설정(필수는 아니지만 상황에 따라 설정)
axios.post("url"[, data[, config]])

🌱 Fetch API vs Axios

🌱 fs 모듈 (과제 part.2)

1. callback

const fs = require("fs");

const getDataFromFile = function (filePath, callback) {
  // callback은 두가지 인자를 받는다.

  fs.readFile(filePath, "utf8", (err, data) => {
    if (err) {
      // 파일을 읽는데 예상치 못한 에러가 발생했다? -> 1
      // 1. 첫번째 인자로 err를 전달 해준다.
      callback(err, null)
    }
    else {
      // 파일을 읽는 코드를 실행했을때 잘 읽어왔다면 -> 2
      // 2. 두번째 인자로 파일 내용을 전달 해준다.
      callback(null, data)
    }
    console.log(data);
  })
}
 
getDataFromFile('README.md', (err, data) => console.log(data));

module.exports = {
  getDataFromFile,
};

2. promiseConstructor

const fs = require("fs");

const getDataFromFilePromise = filePath => {
  // return new Promise()
  // TODO: Promise 및 fs.readFile을 이용해 작성합니다.
  let primise = new Promise((resolve, reject) => {
    fs.readFile(filePath, "utf8", (err, data) => {
      if (err) {
        reject(err);
      }
      else {
        resolve(data);
      }
    })
  });
  return primise;
};


// 콜백이었다면?
// getDataFromFile('README.md', (err, data) => console.log(data));
getDataFromFilePromise('README.md').then(data => console.log(data));

module.exports = {
  getDataFromFilePromise
};

3. basicChaining ... 업데이트 중

🌱 fetch API 과제

1. 업데이트 중

🌱 26일차 수업을 마치며...

어려워 죽는 중