반응형
async / await
비동기 함수인 fetch를 이용하면, json 파일을 읽을 수 있다.
입력 칸에 색을 입력한 후 버튼을 클릭하면,
해당 색에 해당하는 헥사 코드를 json 데이터에서 찾아 화면에 나타내는 코드를 async/await로 작성
const inputElem = document.querySelector('#inputColor');
const buttonElem = document.querySelector('#buttonSubmit');
const hexaCodeElem = document.querySelector('#hexaCode');
async function getHexaCode(e) {
// 새로고침 방지
e.preventDefault();
const userInputColor = inputElem.value;
// await를 반드시 fetch(), json() 앞에 붙여야 함
const result = await fetch('data.json');
const datas = await result.json();
// 배열의 요소 중, color 가, 사용자가 입력한 색과 일치하는 요소를 찾음.
const findData = datas.find(data => data.color === userInputColor);
// 찾은 요소는 객체인데, 그 value값이 헥사코드임.
hexaCodeElem.innerHTML = findData.value;
// 참고로, 아래 코드를 추가하면 색상도 반영됨 (채점과는 무관합니다).
hexaCodeElem.style.color = findData.value;
}
buttonElem.addEventListener('click', getHexaCode);
Fetch API 사용하기
fetch() 이용하며 헤더를 반드시 명시한다.
body에 JSON.stringify()를 사용해서 유저 정보(“첫번째 참가자”)라는 name을 서버에 업데이트
fetch('https://reqres.in/api/users', {
method: 'POST',
headers: { 'Content-type': 'application/json' },
body: JSON.stringify({
name: '첫번째 참가자',
}),
})
response.ok 는 HTTP Status code가 200-299 사이면 true, 그외는 false
만약 res.ok일 경우 “Success!” 라는 메시지와 함께 res.json()을 반환하고,
ok가 아닐 경우, “failed”라는 메시지를 콘솔에 띄운다.
//fetch()의 인자로 'https://reqres.in/api/users' 라는 가짜 사용자 정보 API url을 패스.
fetch('https://reqres.in/api/users', {
method: 'POST',
//3. 헤더를 반드시 명시합니다.
headers: { 'Content-type': 'application/json' },
//4.body에 `JSON.stringify()`를 사용해서 유저 정보(Object)를 서버에 업데이트.
body: JSON.stringify({
name: '첫번째 참가자',
}),
})
.then(res => {
// response.ok는 HTTP Status code가 200-299 사이면 true, 그외는 False.
// 만약 res.ok일 경우 "Success!" 라는 메시지와 함께 `res.json()`을 반환하고,
if (res.ok) {
console.log('success!');
return res.json();
}
// ok가 아닐 경우, "failed"라는 메시지를 콘솔에 띄운다.
else {
console.log('failed');
}
})
.then(data => console.log(data))
.catch(error => console.log('Error'));
await 이미지 띄우기
1. 구글에서 이미지 주소를 가져와 fetch인자로 불러온다.
import 'babel-polyfill';
async function fetchImage() {
// fetch() 메서드를 호출하여 구글에 검색된 이미지를 가져오고 변수(response)에 저장.
// 이때 await을 사용
let response = await fetch(
'https://pbs.twimg.com/profile_images/799445590614495232/ii6eBROd_400x400.jpg'
);
const error = false;
if (!response.ok || error) {
throw new Error(`HTTP error! status: ${response.status}`);
} else {
document.write("here's the image");
return await response.blob();
}
}2. then()블록을 사용하여 promise가 성공적인 실행에 응답하며 catch()로 에러가 발생했을때 대처하는 코드를 작성
// then() 블록을 사용하여 promise가 성공적인 실행에 응답하고 에러가 발생했을때 catch를 하는 코드를 작성하세요.
fetchImage()
//then()의 인자로 blob을 받는다.
.then(blob => {
//실행코드
// 이미지를 변환해서 <img>의 src를 객체 URL로 설정하여 이미지에 html에 표시되도록 한다.
// Blob 객체를 가리키는 객체 URL을 생성
let objectURL = URL.createObjectURL(blob);
// blob(이미지)을 표시할 <img> 요소를 만든다.
let image = document.createElement('img');
// <img>의 src를 객체 URL로 설정하여 이미지에 표시되도록 한다.
image.src = objectURL;
// ADOM에 <img> 요소 추가
document.body.appendChild(image);
})
.catch(error => console.log(error));
반응형
'프론트엔드 > javascript' 카테고리의 다른 글
| [자바스크립트 문제집] Promise (0) | 2022.11.30 |
|---|---|
| [자바스크립트 문제집] 동기/비동기 처리 (0) | 2022.11.30 |
| [javascript] 이벤트 루프 ★★★ (0) | 2022.10.11 |
| [javascript] Axios API 사용하기 (0) | 2022.10.11 |
| [javascript] 비동기3 - async/await, fetch API (Post 정보 조합하기) (0) | 2022.10.05 |
