[vue] promise패턴, v-modal 클릭 이벤트 방지

1. new Promise( function(resolve, reject)) 패턴

프로미스를 사용할때는 2가지 패턴이 있다. new Promise(function(resolve, reject)){}, Promise.resolve(function())

에러처리를 할때 reject를 처리하냐 안하냐에 따라서 위의 두가지 방법중 하나를 선택하면 좋을 것 같다.

우선 백엔드에서 가져 온 값이 프로미스 기반이기때문에 A->B->C 로 전달해서 써야하는 상황이 왔다.

C는 뷰를 담당하는 화면이고 , A,B는 비지니스 로직단이다. 따라서 C는 vue파일로 되어있고, A,B는 js파일로 구성되어 있다.

A->B로 전달 클로져로 전달 받았는데, B에서 C로 갈때 그냥쓰면 undefined가 뜬다.

C에서는 우선 프로미스를 받기때문에 async, await으로 받아주고,(굳이 이걸 사용하지 않아도 된다)

//B
static async getTokenlist() {
	return new Promise(function(resolve, reject) {
		UniconAPI.getTokenlist(
	  	   function (response) {
            if (response.data.err_code == 0) {
				  resolve(response.data.data.result.data);
				} else {
				  ehandler.throw(Errors.raise(Errors.ERRCODE.OPERATION.ServerExecutionError,''));
				}
			 }, 
			 function (err) {
				logger.log.debug("err", err);
				reject(err);
				ehandler.throw(Errors.raise(Errors.ERRCODE.OPERATION.OtherError,'',err));
			 }
		);
	});
}

new Promise로 감싸주고 resolve('보내야하는 데이터')를 작성해 주면 받는 쪽에서 받을 수 있다.

resolve는 then으로 보면된다. 

2. b-modal 라이브러리 클릭이벤트 방지

b-modal을 사용하면 클릭이벤트를 조절 할 수 있다.

모달 외부를 클릭했을때 모달이 닫히게 하거나, ESC를 눌러서 닫게 하거나 등등 이런건 기본값으로 설정되어 있고,

만약에 그런 기능을 막고 싶을 경우 

no-close-on-esc //esc눌러도 모달 안꺼지게 
no-close-on-backdrop // 외부눌러도 모달 안꺼지게
등등

<b-modal id="ConfirmBox" title="Send modal" ok-disabled centered hide-footer no-close-on-backdrop>

이런식으로 추가해서 효과를 적용한다.

공식문서 : https://bootstrap-vue.js.org/docs/components/modal/