vue에서 debounce 사용, 타입정의, Promise 객체 반환 이슈

사용자가 글자를 입력하는 것을 기다렸다가 중복체크를 하는 로직을 구현하고 싶었다.

 

이것을 구현하기 위해 해당 글자를 watch하고 debounce를 걸어 상황에 맞게 method를 호출시키고 싶었지만 생각보다 이슈를 여러번 맞닥들이게 되었다.

 

1. watch에 debounce 연결하기

import { debounce } from 'lodash';

watch: {
// 객체안의 값을 wath하려면 아래처럼 하면된다.
	'ownDomain.value': debounce(function(newVal) {
    	this.canUseDomain(newVal);
    }, 500)
}

methods: {
	async canUseDomain(domain: string) {
    	// await apiCall;
        return domain === 'test.com'
    }
}

 

우선 가장 처음 맞이했던 이슈는 watch에 debounce를 걸 수 있나? 였고 위처럼 작성하게 되면 사용할 수 있게 된다.

하지만 warning과 error를 만날 수 있는데,

function에는 노란줄

this, newVal에는 붉은 줄

메소드에는 return type정의와 같은 것들이 있다.

 

2. 우선 this에 에러가 발생하는 이유는 this가 가리키고 있는 것이 vue가 아닌 function이기 때문이다. 따라서 우리가 쓰는 this에서 사용할 변수나 메소드를 선언해주는 방법이 있다.

 

그럼 코드는 아래와 같이 변경된다.

import { debounce } from 'lodash';

watch: {
	'ownDomain.value': debounce(function(
    	this: { ownDomain: domain; canUseDomain: (domain: string) => boolean },
      	newVal,
    ) {
    	this.ownDomain.canuse = this.canUseDomain(newVal);
    }, 500)
}

methods: {
	async canUseDomain(domain: string) {
    	// await apiCall;
        return domain === 'test.com'
    }
}

 

3.  이제 canUseDomain을 살펴보자, 이것은 async로 비동기 처리가 되어 있기 때문에 해당 함수의 반환 타입은 boolean이 아닌 Promise<boolean> 이 된다.

 

하지만 이렇게 될 경우에 Promise객체를 반환하기 때문에 `this.ownDomain.canUse`에 Promise가 들어가는 현상을 겪게 되는 것이 있다.

 

 

다른 이슈 이긴 하지만 function에는 린트에러가 있는데 함께 처리해보도록 하자.

 

import { debounce } from 'lodash';

watch: {
	'ownDomain.value': debounce(async function checkOwnDomain(
    	this: { ownDomain: domain; canUseDomain: (domain: string) => boolean },
      	newVal,
    ) {
    	this.ownDomain.canUse = await this.canUseDomain(newVal);
    }, 500)
}

methods: {
	async canUseDomain(domain: string): Promise<boolean> {
    	// await apiCall;
        return domain === 'test.com'
    }
}

 

Promise 객체 안의 value에 접근하기 위해 await를 해서 resolve를 하게 되면 값이 반환되는 것을 볼 수 있었다.

또한 린트에러는 이름을 설정해줌으로서 해결할 수 있었다.