<수정필요>[Vue] promise/axios 비동기 처리

axios

 

Vue에서 권고하는 promise(js비동기처리패턴) 기반의 HTTP 라이브러리이다.

 

promise를 사용하면 비동기식 처리 상에서 데이터가 넘어오지 않으면 다음 코드가 실행되지 않도록, 즉 데이터가 넘어왔을 때만 다음 코드가 실행되도록 하는 콜백 처리를 해줄 수 있다.

 

js 비동기 처리 패턴

 

1. callback
2. promise
3. promise + generator
4. async & await

대표적인 Promise 인스턴스 메서드는

then()과 catch(), finally() 가 있어 요청이 성공/실패/보류됐을 때 처리해줄 수 있습니다.

 

비동기를 이해하기 위해선 자바스크립트의 동작원리: 엔진, 런타임, 호출 스택을 아는 것이 중요합니다. 자바스크립트는 

싱글 스레드 기반이라 동시에 두가지 작업을 할 수 없다.(이전 글에서 설명한 비동기 처리가 그래서 필요하다 작업결과를 바로 받지않아고 다음 작업이 진행될 수 있도록)

 

. 특히 이미지 프로세싱 작업같은 경우 긴 시간이 소요되기 때문에 이 함수가 실행되는 동안 브라우저는 아무 작업도 못하고 대기 상태가 되버린다. 이 시점이 바로 비동기 콜백이 필요한 부분이며 Promise는 비동기 처리를 위한 라이브러리이다.

 

promise

JavaScript에서 Promise는 비동기적으로 실행하는 작업의 결과(성공 or 실패)를 나타내는 객체이다. 여기서 주목해야 하는 점은 객체라는 것인데, 비동기의 결과를 객체화 시킨다는 점이 Promise의 가장 큰 장점이자 특징이 된다.
싱글스레드인 자바스크립트에서 비동기 처리를 위해 사용한 Callback 함수의 에러/예외처리의 어려움, 중첩으로 인한 복장도 증가라는 단점을 해결하기 위해 promise 객체를 ES6에서 언어적 차원으로 지원한다.

 

promisr가 콜백을 대체하는 것은 아니지만, 콜백을 예측 가능한 패턴으로 사용할 수 있게 하며 Promise 없이 콜백만 사용 했을 때 예상치 못한 동작을 막아주거나 찾기 힘든 버그를 상당 수 해결해준다.

 

<Promise 만들기>

 

예시 나머지는 아래블로그가서 확인해보자

 

https://hi-zini.tistory.com/entry/%EB%B9%84%EB%8F%99%EA%B8%B0%EC%A0%81-%EB%B0%A9%EC%8B%9D-%EC%B2%98%EB%A6%AC-%EB%B0%A9%EB%B2%95-Callback-Promise-async-await

비동기적 방식 처리 방법 (Callback, Promise, async &await)

 

또다른 예시는 아래블로그에 자세하게 나와있어서 꼭 읽어보도록 하자

https://velog.io/@cyranocoding/2019-08-02-1808-%EC%9E%91%EC%84%B1%EB%90%A8-5hjytwqpqj

JavaScript 비동기 처리를 위한 promise 이해하기

 

 

 

참고 블로그

https://klyhyeon.tistory.com/259

[Vue.js] axios (비동기식 처리)