function increase(number, callback){
setTimeout(() => {
const result = number + 10;
if(callback){
callback(result);
}
}, 1000)
}
increase(0, result => {
console.log(result)
increase(result, result => {
console.log(result)
increase(result, result => {
...
})
})
})
function increase(number){
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
const result = number + 10;
if(result > 50){
const e = new Error('에러 메세지')
return reject(e)'
}
resolve(result);
}, 1000)
});
retrun promise;
}
increase(0)
.then(number => {
console.log(number);
return increase(number)
})
.then(number => {
console.log(number);
return increase(number)
})
.then(number => {
console.log(number)
return incrase(number)
})
.catch(e => {
console.log(e)
})
function increase(number){
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
const result = number + 10;
if(result > 50){
const e = new Error('에러 메세지')
return reject(e)'
}
resolve(result);
}, 1000)
});
retrun promise;
}
async function runTasks() {
try{
let result = await incrase(0);
console.log(result)
result = await increase(result);
console.log(result)
result = await increase(result);
console.log(result)
}catch(e){
console.log(e)
}
}
예외 처리를 try, catch를 이용해서 처리
axios와 같이 Promise 기반으로 처리되는 것이 있다면 그냥 async, await를 사용하면 됨.
현재 가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트.
HTTP 요청을 Promise 기반으로 처리한다 -> 바로 async, await 사용 가능
설치
yarn add axios
사용
const [data, setData] = useState(null);
const onClick= () => {
axios.get('https://jsonplaceholder.typicode.com/todos/1').then(resoponse=>{
setData(response.data);
})
}
async, await 사용
const [data, setData] = useState(null);
const onClick = async () => {
try{
const response = await axios.get(
'https://jsonplaceholder.typicode.com/todos/1',
);
setData(response.data);
}catch(e){
console.log(e)
}
}
newsapi에서 제공하는 API를 사용하기 위해 키 발급
클릭하면 row 데이터 생성하는 코드
const onClick = async () => {
try {
const response = await axios.get(
`http://newsapi.org/v2/top-headlines?country=kr&apiKey=74e7b5b66333419989303e6f693d732e`,
);
setData(response.data);
} catch (e) {
console.log(e);
}
};
NewsItem에 넘겨줄 props 설정 (title, description, url, urlToImage)
const sampleArticle = {
title: '제목',
description: '내용',
url: 'https://google.com',
urlToImage: 'https://via.placeholder.com/160',
};
const NewsList = () => {
return (
<div>
<NewsItem article={sampleArticle} />
</div>
)
화면에 처음 보이는 시점에 API 요청-> useEffect 사용
useEffet는 뒷정리 함수를 반환하기 때문에 async를 붙여선 안된다.
따라서 쓰고 싶다면 함수 내부에 async 키워드가 붙은 또 다른 함수를 만들어서 사용해야 한다.
useEffect(() => {
const fetchData = async () => {
setLoading(true);
try {
const response = await axios.get(
`http://newsapi.org/v2/top-headlines?country=kr&apiKey=74e7b5b66333419989303e6f693d732e`,
);
setArticles(response.data.articles);
} catch (e) {
console.log(e);
}
setLoading(false);
};
fetchData();
}, []);
if (loading) {
return <div>대기 중...</div>;
}
if (!articles) {
return null;
}
business, entertainment, health, science, sports, technology 6가지 카테고리
categories.js 설정.
const categories = [
{
name: all,
text: '전체보기'
}
...
]
return (
<CategoriesBlock>
{categories.map(c => (
<Category
key={c.name}
active={category === c.name}
onClick={()=> onSelect(c.name)}
>{c.text}</Category>
))}
</CategoriesBlock>
)
App.js
const [category, setCategory] = useState('all')
const onSelect = useCallback(category => setCategory(category), []);
return(
<>
<Categories category={category} onSelect={onSelect}>
<>
)
NewsList.js
const NewsList = ( {category} ) => {
useEffect(() => {
const fetchData = async () => {
setLoading(true);
try {
const query = category === 'all' ? '' : `&category=${category}`
const response = await axios.get(
`http://newsapi.org/v2/top-headlines?country=kr${query}&apiKey=74e7b5b66333419989303e6f693d732e`,
);
setArticles(response.data.articles);
} catch (e) {
console.log(e);
}
setLoading(false);
};
fetchData();
}, [category]);
}
단 하나의 페이지 사용
pages/NewsPage.js
const NewsPage = ( {match} ) => {
const category = match.params.category || 'all';
return (
<Category />
<NewsList category={category}>
)
}
App.js
const App = () => {
return <Route path="/:category?" component={NewsPage}>
}
<CategoriesBlock
key = {c.name}
activeClassName="active"
exact={c.name==='all'}
to={c.name === 'all' ? '/' : `/${c.name}`}
/>