작동한 소스
export const SearchBar = ({ placeholderTxt = "검색어를 입력해주세요." }) => {
const [bottomInfo] = useRecoilState(BottomDrawerState); //setBottomInfo
const [materialList, setMaterialList] = useRecoilState(materialListState);
const ref = useRef();
let cancelToken: any = null; //<- 1: 선언
const onChange = (t: { target: { value: any } }) => {
if (cancelToken) { //<- 2: 이미 있으면 axios 중지
cancelToken.cancel("Operation canceled due to new request.")
}
cancelToken = axios.CancelToken.source()//<- 3: 새로 토큰 생성
if (bottomInfo.type === "place") {
getPlaceAPI(t.target.value);
} else if (bottomInfo.type === "material") {
getMaterialAPI(t.target.value, cancelToken.token)?.then((e) => { //<- 4: 토큰 넘기기
if (t.target.value !== "") setMaterialList(e)
else setMaterialList([])
});
}
};
export const getMaterialAPI = (t = "", cancelToken?: any): Promise<[]> => {
if (t !== "") {
const url = (isDev ? ProxyURL : "") + `https://openapi.naver.com/v1/search/shop.json?query=${t}`;
return new Promise((resolve, reject) => {
axios
.get(url, {
headers: {
Accept: "application/json",
"Content-Type": "application/json",
...
},
cancelToken: cancelToken //<-5: 넘겨진 토큰 적용!
})
.then((r) => resolve(r.data.items))
.catch((e) => reject(e));
});
}
return new Promise((resolve, reject) => resolve([]));
};
핵심 소스
let cancelToken: any = null; //<- 1: 선언
if (cancelToken) { //<- 2: 이미 있으면 axios 중지
cancelToken.cancel("Operation canceled due to new request.")
}
cancelToken = axios.CancelToken.source()//<- 3: 새로 토큰 생성
getMaterialAPI(t.target.value, cancelToken.token)?.then((e) => { //<- 4: 토큰 넘기기
if (t.target.value !== "") setMaterialList(e)
else setMaterialList([])
});
axios
.get(url, {
headers: {
Accept: "application/json",
"Content-Type": "application/json",
...
},
cancelToken: cancelToken //<-5: 넘겨진 토큰 적용!
})