프로젝트 예상 진행 시나리오
1. 백엔드가 서버를 구성한다
2. 서버 환경을 설정한다
3. 프론트=> 백 : 테스트 해보고 싶습니다!
4. 백 => 프론트: POST-MAN으로 결과 보세요!
5. 백 => 프론트: 서버 배포 후 api 만들어서 던져주기
6. 프론트 => 백: 만들어진 api 주소로 api test하기(postman)
7. 백: postman에서도 잘 안될 경우 서버 환경설정 구성이 잘 된건 지 다시한 번 봐야함
1-2-1 promise버전
fetch('https://api.cryptonator.com/api/ticker/btc-usd')
.then(res => {
console.log("Response, waiting to parse..", res)
return res.json()
})
.then(data => {
console.log("Data Parsed...")
console.log(data.ticker.price)
})
.catch(e => {
console.log("Oh No, error..", e)
})
1-2-2 await 버전
const fetchBitcoinPrice = async()=> {
try{
const res = await fetch ('https://api.cryptonator.com/api/ticker/btc-usd')
const data = await res.json()
console.log(data.ticker.price)
} catch(e) {
console.log("Something went wrong!", e)
}
}
script
앞에 axios
를 사용하고 싶은 곳에 넣기 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.get('https://api.cryptonator.com/api/ticker/btc-usd')
.then(res => { //이미 parsing이 되어있는 상태임
console.log(res.data.ticker.price)
})
.catch(err => {
console.log("Error", err)
}
axios - async 버전
const fetchBitcoinPrice = async() => {
try{
const res = await axios.get('https://api.cryptonator.com/api/ticker/btc-usd')
console.log(res.data.ticker.price)
} catch(e) {
console.log("Error", e)
}
}
header가 application/json인 경우로 받을 때
https://icanhazdadjoke.com/api
const getDadJoke = async () => {
const config = {headers:{Accept: 'application/json'}}
const res = await axios.get('https://icanhazdadjoke.com/', config)
console.log(res.data.joke)
}