9/22[TIL]fetch API

blocking

쉽게 기다릴 수밖에 없는 상태

(응답 없음, 로딩 중 같은 경우는 일단 일을 하고 있기 때문에 이 사례에는 포함되지 않는다)

 

non-blocking

기다리는 상태에서도 다른 일을 할 수 있는 상태

 

 

비동기 호출의 대표적인 사례 쉽게 말해 중첩된 callback 생기는 사례에는

 

선형적인 에니메이션 / 파일 입출력(i/o) / 네트워크 요청 등 이 존재한다.

 

node.js 내장 모듈을 사용하는 방법

node.js의 경우 많은 부분의 API가 비동기로 작성되어 있고 node.js는 비동기 이벤트 기반 자바스크립트 런타임으로 앞서 배운 적이 있다.

 

node.js 에서는 자바스크립트 코드 가장 상단에 require 구문을 이용하는 것으로 시작한다.

const fs = require('fs') // 파일 시스템 모듈을 불러옵니다
const dns = require('dns') // DNS 모듈을 불러옵니다
 
// 이제 fs.readFile 메소드 등을 사용할 수 있습니다!

fs.readFile(path[, options], callback)

비동기적으로 파일 내용 전체를 읽는다.

path에는 파일 이름을 인자로 넘길 수 있고 네 가지 종류의 타입을 넘길 수 있지만 보통은 문자열(<string>)로 넘긴다.

두번째 인자 options는 넣을 수도 있고, 넣지 않을 수도 있다. 객체 형태 또는 문자열로 넘길 수 있으며 문자열로 전달할 경우 인코딩을 넘긴다.(ex)'utf8'))

콜백(callback) 함수를 넘긴다. 파일을 읽고 난 후에 비동기적으로 실행되는 함수로 에러가 발생하지 않으면 err는 null 이 되며, data에 문자열이나 Buffer라는 객체가 전달된다. datadata는 파일의 내용이다.

 

앞서 말한 fs.readFile 뿐만 아니라 많은 방법이 존재한다.

참조 : https://nodejs.org/dist/latest-v14.x/docs/api/fs.html#fs_fs_readfile_path_options_callback

 

동기

readFileSync(파일 용량이 적을 때 사용) 쓰기는 쉬우나 불러올 동안 아무것도 할 수 없기 때문에

 

비동기

readFile(파일 용량이 많을 때 사용) 쓰기는 상대적으로 어려우나 불러올 동안 다른 동작을 할 수 있다.

 

어제 앞서 말한 Promise의 세 가지 상태

 

1.Pending (아직 수립이나 에러가 나기 전의 대기 상태)

2.Fullfilled (비동기 요청이 성공적으로 완료 됐을 때)

3.Rejected (비동기 요청 중 에러가 생겼을 때)

++++++++++++++++++++++++++++++++++++++++++

추가적으로!! Settled (Fullfilled와 Rejected 합친 것)

 

어제 배웠던 Promise.all 의 사용법은 둘 다 성공해야 then으로 다음 액션을 진행하며 하나라도 실패하면 catch에 걸리게 된다.

 

Promise.all([promise, promise])

Promise 목록은 동시에 실행된다.

 

then([resp,resp] => { //콜백 실행 })

 

promise개수와 resp 개수는 같다!

 

fetch API

네트워크 요청 중, URL로 요청하는 경우가 가장 흔하다. 이를 가능하게 해주는 API가 바로 fetch API이다.

fetch(url)
  .then(response => response.json()) // 자체적으로 json() 메소드가 있어, 응답을 JSON 형태로 변환시켜서 다음 Promise로 전달합니다
  .then(json => console.log(json)) // 콘솔에 json을 출력합니다
  .catch(error => console.log(error)); // 에러가 발생한 경우, 에러를 띄웁니다

 

 

어떤 종류의 함수에 await 키워드를 사용할 수 있는지 있을까?

 

Promise로 리턴되는 것이 붙어야 하며 fetch도 가능하다.