해결된 질문
23.10.18 12:40 작성
·
427
1
콘솔창에서 아래와 같이 입력해서 확인해보면 데이타가 잘 들어옵니다.
근데 강사님이 작성하신 utils.js 파일을 넣고 실행을 하면 데이타가 들어오지 않는거 같아서요
혹시 뭐가 잘못된걸까?
fetch('https://cataas.com/cat?json=true')
.then((response) => response.json())
.then((data) => console.log(data));
위의 소스로 확인해보면 데이타가 들어옵니다.
//(1)utils.js에서 API함수 추가
const fetchCat = async (text) => {
const OPEN_API_DOMAIN = "https://cataas.com";
const response = await fetch(`${OPEN_API_DOMAIN}/cat/says/${text}?json=true`);
const responseJson = await response.json();
return `${OPEN_API_DOMAIN}/${responseJson.url}`;
console.log(fetchCat);
};
//(2)수정
async function updateMainCat(value){ //수정
const newCat = await fetchCat(value); //추가
setMainCat(newCat); //수정
const nextCounter = counter +1;
setCounter(nextCounter);
jsonLocalStorage.setItem("counter", nextCounter);
}
function handleFormSubmit(e){
e.preventDefault();
setErrorMessage("");
if(value ===""){
setErrorMessage("빈 값으로 만들 수 없습니다.");
return;
}
updateMainCat(value); //(3)수정
}
며칠동안 계속 안되길래 무료 API 라 연결이 안될수 있다고 해서 기다리다가 며칠이 지나도 계속 안되는 상태여서 확인해보니 연결이 안되는거 같지는 않아서요,
실제고양이 api 데이터 받아오는 강의부분의 소스인데요, 생성버튼을 누르면 이미지에 엑박표시가 나면서
콘솔창에 보면 Failed to load resource 라고 뜹니다.
답변 4
0
2024. 01. 27. 17:34
모두 감사합니다. 정확하게 답변 주셨어요.
강의 코드와 노트 수정했습니다.
https://github.com/milooy/cat-jjal-maker/blob/main/answers/29-useEffect.html#L48
이 코드 참고해서 fetchCat 함수를 변경해주시면 됩니다.
0
그 동안 open api 에서 json으로 들어오는 속성값을 변경하여서 안되는 것입니다.
responseJson.url 여기서 url 이라는 속성이 없기때문에 undefinded 로 나오며 주소역시 'https://cataas.com/undefinded' 로 나오니 엑박으로 뜰 수 밖에 없어요, 사용하시려면 콘솔창 찍어보시고 다시 잘라서 사용해야 뜹니다,, 저도 그렇게 잘라서 하니 나와요
2023. 10. 23. 15:06
네네...자세하게 알려주셔서 정말 감사드립니다.
api 를 많이 사용해보지 않아서 좀 많이 서툰데 자세히 답변 달아주셔서 잘 해결했습니다.
감사드려요^^