kohigowild
JavaScript fetch() ๋ณธ๋ฌธ
๐ฐ๏ธ Synchronous VS Asynchronous
Synchronous(๋๊ธฐ)
์์ฒญ ์ ์๊ฐ์ด ์ผ๋ง๊ฐ ๊ฑธ๋ฆฌ๋ ์์ฒญํ ์๋ฆฌ์์ ๊ทธ ๊ฒฐ๊ณผ๊ฐ ์ฃผ์ด์ง๋ค. ์์ ์๊ฐ๊ณผ ๊ด๊ณ์์ด ๊ฒฐ๊ณผ๊ฐ ๋์ฌ ๋๊น์ง ๊ธฐ๋ค๋ ธ๋ค๊ฐ ๊ทธ ๋ค์์ ์คํํ๋ค. ์ค๊ณ๊ฐ ๋งค์ฐ ๊ฐ๋จํ๊ณ ์ง๊ด์ ์ด๋ค.
Asynchronous(๋น๋๊ธฐ)
๊ฒฐ๊ณผ๊ฐ ์ฃผ์ด์ง๋ ์์ ์๊ฐ ๋์ ๋ค๋ฅธ ์์ ์ด ๊ฐ๋ฅํ๋ค. ๋๊ธฐ ๋ฐฉ์๋ณด๋ค ์ค๊ณ๊ฐ ๋ณต์กํ์ง๋ง ์์์ ํจ์จ์ ์ผ๋ก ์ธ ์ ์๋ค. fetch API๋ ๋น๋๊ธฐ ๋ฐฉ์์ด๋ค.
๐ฐ๏ธ fetch API
fetch API๋ Promise๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋์ํ๋ค.
let promise = fetch(url, [options])
- url ⇒ ์ ๊ทผํ๊ณ ์ ํ๋ URL
- options ⇒ ์ ํ ๋งค๊ฐ๋ณ์, method๋ header ๋ฑ์ ์ง์ ํ ์ ์์
options์ ์๋ฌด๊ฒ๋ ๋๊ธฐ์ง ์์ผ๋ฉด ์์ฒญ์ GET ๋ฉ์๋๋ก ์งํ๋์ด url๋ก๋ถํฐ ์ฝํ ์ธ ๊ฐ ๋ค์ด๋ก๋ ๋๋ค. ์ค์ ์ฌ์ฉ ๊ตฌ์กฐ๋ ๋ค์๊ณผ ๊ฐ๋ค.
fetch(url, (options))
.then((res)=> {
//url๋ก๋ถํฐ fetch์ ํธ์ถ์ด ์ฑ๊ณตํ์ ๋์ ๋์
})
.catch((error)=>{
//url๋ก๋ถํฐ fetch์ ํธ์ถ์ด ์คํจํ์ ๋์ ๋์
});
ํธ์ถ ์ฑ๊ณต ์์ ์๋ต ๊ฐ์ฒด res๋ HTTP์ status, ์๋ต ํค๋, ์๋ต ๋ณธ์ฒด(body) ๋ฑ์ ์ทจ๋ํ ์ ์๋ค.
๐ฐ๏ธ GET VS POST
HTTP ํต์ ๋ฐฉ์์๋ GET ๋ฐฉ์๊ณผ POST ๋ฐฉ์์ด ์๋ค. GET ๋ฐฉ์์ ํด๋ผ์ด์ธํธ๊ฐ ์๋ฒ๋ก๋ถํฐ ๋ฐ์ดํฐ ๋ฑ์ ์กฐํํ๊ธฐ ์ํ ๋ฐฉ์์ด๊ณ , POST ๋ฐฉ์์ ํด๋ผ์ด์ธํธ๊ฐ ์๋ฒ์ ๋ฐ์ดํฐ ๋ฑ์ ์ถ๊ฐํ๊ฑฐ๋ ์์ ํ๊ธฐ ์ํ ํต์ ๋ฐฉ์์ด๋ค.
- GET
fetch(url, (options))
.then((res)=> {
//url๋ก๋ถํฐ fetch์ ํธ์ถ์ด ์ฑ๊ณตํ์ ๋์ ๋์
})
.catch((error)=>{
//url๋ก๋ถํฐ fetch์ ํธ์ถ์ด ์คํจํ์ ๋์ ๋์
});
- POST
fetch(url, {
method: "POST",
headers: {
},
body: {
}
})
.then((res)=> {
})
.catch((error)=>{
});
๋ณด๋ด๋ ๋ฐ์ดํฐ์ ์์ด ๋ง๊ฑฐ๋, ๋น๋ฐ๋ฒํธ ๋ฑ ๊ฐ์ธ ์ ๋ณด๋ฅผ ๋ณด๋ผ ๋ POST ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ค. ์๋ก์ด ํฌ์คํธ๋ฅผ ์์ฑํ๊ธฐ ์ํด์๋ method ์ต์ ์ POST๋ก ์ง์ ํด ์ฃผ๊ณ , headers ์ต์ ์ผ๋ก JSON ํฌ๋งท์ ์ฌ์ฉํ๋ค๊ณ ์๋ ค์ผ ํ๋ค. body ์ต์ ์๋ ์์ฒญ ์ ๋ฌธ์ JSON ํฌ๋งท์ผ๋ก ๋ฃ๋๋ค.
๐ฐ๏ธ fetch API - response ๊ฐ์ฒด
<!DOCTYPE html>
<html>
<body>
<input
type="button"
value="fetch"
onclick="
fetch('test').then(function(response){
console.log(response);
});
"
/>
</body>
</html>
fetch()๋ฅผ ํตํด ์์ฒญํ์ ๋, ์๋ตํ ๊ฒฐ๊ณผ๋ฅผ ๊ฐ์ง ๊ฐ์ฒด๋ฅผ response ๊ฐ์ฒด๋ผ๊ณ ํ๋ค. response ๊ฐ์ฒด์ ์์ฑ ์ค ํ๋์ธ status๋ฅผ ํตํด ์๋ฒ๊ฐ ์ ์์ ์ผ๋ก ์๋ํ๋์ง ํ์ธํ ์ ์๋ค.
์น ์๋ฒ๊ฐ ์๋ตํ๋ฉด์ ํ์ผ์ ์ ์์ ์ผ๋ก ์ ์ฐพ์๋ค๋ ์๋ฏธ๋ก status์ ๊ฐ์ผ๋ก 200์ ๋ํ๋ธ๋ค. ํ์ผ์ด ๋น์ด ์๋ ๊ฒฝ์ฐ 404๋ฅผ ๋ํ๋ธ๋ค.
<!DOCTYPE html>
<html>
<body>
<input
type="button"
value="fetch"
onclick="
fetch('test2').then(function(response){
console.log(response);
if(response.status == '404') {
alert('file not found')
}
});
"
/>
</body>
</html>
Reference
https://bamtory29.tistory.com/entry/Javascript-Fetch-API
https://www.youtube.com/watch?v=ufjCFdG_4fo
https://www.youtube.com/watch?v=iyFHfzCRHA8
https://nyang-in.tistory.com/142?category=835170
'JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
์ต์ ๋ฒ ํจํด๊ณผ ์์ ์ฝ๋ (0) | 2022.12.13 |
---|---|
๋ฐ๋๋ผ JS๋ก ์น ์ปดํฌ๋ํธ ๋ง๋ค๊ธฐ (0) | 2022.12.11 |
JavaScript ๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ(DOM) (0) | 2022.11.16 |
JavaScript ES6 ๋ชจ๋ (0) | 2022.10.29 |
JavaScript ํ๋กํ ํ์ ๊ณผ ํ๋กํ ํ์ ์ฒด์ธ (0) | 2022.10.21 |