비동기 API 처리

비동기 처리를 위해서 axios 를 사용했다.

 

그렇다면 비동기 처리는 무엇인가?

- 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고, 다음 코드를 먼저 실행하는 자바스크립트의 처리 방법

 

대표적인 예로, 물건을 여러건 배송보내는 것을 생각하면 쉽다.

순서에 상관없이 여러 목적지에 보내도 알아서 배송 프로세스 따라서 물품 배송이 멈추지 않고 진행된다.

 

 

axios는 무엇인가?

- axios 라이브러르에서 사용하는 Promose 객체에 대해서 먼저 살펴보도록 하자.

- 비동기 작업이 하게 되면 결과가 어쨋든 성공이거나 실패 아니면 둘도 아닌 진행중인 상태가 있을 것이다.

- 그래서 다음 3가지 결과에 대해서, 성공 했을때는 어떤 행동을 하고, 

- 실패를 했을때에는 어떤 행동을 해야하는지를 정해놓은게 바로 promise 객체이며

- 다음 3가지로 구별 가능한데

 

- 대기 get/post ./ 연산 요청을 보내놓고 이행하거나 거부되지 않은 초기 경우

- 이행 .then() / 연산이 성공한 경우

- 거부 .catch() / 연산이 실패한 경우

 

(코드)

function fetchMovies(title) {

  const OMDB_API_KEY = '7035c60c123'
  return new Promise(async (resolve, reject) => {
    try {
      const res = await axios.get(`https://omdbapi.com?apikey=${OMDB_API_KEY}&s=${title}`)
      // 이행( fulfilled ) : 연산이 성공적으로 완료됨
      resolve(res)
    } catch (hello) {
      // 에러 발생시
      console.log(hello.message)
      // rjqn(rejected) : 연산이 실패함  
      reject('test completed')
    }

  })
}

async function test() {
  try {
    const res = await fetchMovies('frozen')
    console.log(res)
  } catch (test) {
    console.log(test)
  }
}

test()

function hello() {
  fetchMovies('jobs')
    .then(res => console.log(res))
    .catch(test => { console.log(test)})
}
hello()

- omdb로 시작하는 url에 get 요청을 보내어

- axios 함수를 통해서 promise 객체를 받은 것을 res 변수에 저장한후

- 성공적으로 요청을 보낼시 resolve, 성공했을때 보내는 resolve 객체를 통해서 res 에 담긴 내용을 보내어

- resolve는 파라미터로 전달된 값을 바로 반환한다 ???

- test() 가 실행되면 res를 찍어보았다

 

-then, catch 를 사용하면 비동기 처리를 위한 async, await을 사용할 필요가 없다는 거 주의

 

- json 타입으로 출력되는 결과물은 다음과 같으며

- config, data, headers, request, [[Prototype]] 이 담겨 있었다

 

 

 

 

Axios

- cdn 형식으로 불러오기

- 최신버전 1.2.3

- https://cdnjs.com/libraries/axios

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js" integrity="sha512-L4lHq2JI/GoKsERT8KYa72iCwfSrKYWEyaBxzJeeITM9Lub5vlTj8tufqYk056exhjo2QDEipJrg6zen/DDtoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

- axios 라는 변수를 이용하여, get 메소드 실행 가능

 

axios.get

- 서버에서 데이터를 가져오는 메소드

 

axios.post

- 서버에 데이터를 새롭게 생성할때 사용하는 메소드

- 보낼 데이터는 객체 안에 담아서 보낸다.

axios.post(url, { movie: 'frozen'} )

 

axios.put

- 특정 데이터를 수정할때 요청하는 메소드

- 새로운 리소스를 생성

- 이미 존재하는 데이터를 대체

- post 는 새롭게 데이터를 생성해 나가서, 데이터의 양이 늘어나지만, put은 변경함

 

axios.delete

- 특정 데이터를 삭제할때 사용하는 메소드