CodeIt_Sprint74 (8)자바스크립트_리퀘스트_axios문법 + try,catch,finally ● 이론0_리퀘스트 오류 종류 복습 :○ 종류1 _ 요청하는 url이 이상한 경우 || 헤더 정보가 이상한 경우 //status code : 400, 500 ○ 종류2 _ API는 접근했는데, 특정 데이터가 없음○ fetch()메소드에서 Promise 객체 상태 : 오류 종류1 => Rejected Promises오류 종류2 => Fulfilled Promises● 이론1_ axios문법에서 반환 Promise 객체 상태는 오류1, 오류2 의 반환이 모두 Rejected된다. //status가 200일때만 fulfilled 된다. ＠ fetch+try,catch 예시 코드 ://API 전부 fetch 하는 메소드async function fetch_getColorSurveys(id){ const url .. 2024. 12. 9. (7)자바스크립트_리퀘스트_fetch()메소드 대신 더 간편한 문법 => axios 문법 //시발 처음부터 이렇게 알려주던가 ● 이론0_리퀘스트 fetch 문법 복습//api.js//1_ limit, offset 설정 후, API 데이터 fetch하기export async function getColorSurveysLO(params = {}){ const url = new URL('https://learn.codeit.kr/api/color-surveys'); //url에 limit , offset 설정 코드 Object.keys(params).forEach((key)=>{ url.searchParams.append(key,params[key]); }); //설정된 url를 기반으로 API에 fetch const res = await fetch(url); const data.. 2024. 12. 8. (6)자바스크립트_리퀘스트_웹브라우저에서 리퀘스트 기록 확인 => F12 + Network 탭의 기능 ● Default 상황 :○ index.html 네트워크 요청 데모 리퀘스트 보내기 ○ demo.jsimport { getColorSurvey, createColorSurvey } from './api.js';const btn = document.querySelector('button');const statusPostDiv = document.querySelector('div.status_POST');const dataPostDiv = document.querySelector('div.data_POST');const statusGetDiv = document.querySelector('div.status_GET');const dataGetDiv = document.querySelect.. 2024. 12. 8. (5)자바스크립트_리퀘스트_API에서 리퀘스트 오류 종류와 그의 처리방법 => try,catch,finally문 || throw 오류처리(작성중..) ● 이론0_리퀘스트 오류 종류 //fetch 오류 종류 :○ 종류1 _ 요청하는 url이 이상한 경우 || 헤더 정보가 이상한 경우 => 결과: 반환되는 Promise 객체의 상태 : Rejected○ 종류2 _ 리퀘스트는 성공적이지만, 상태 코드가 이상한 경우 : //ex_ Get하려는 데이터 중 mbti값이 "FUCK", 데이터에 없는 mbti 검색 처리 => Promise 객체의 ok프로퍼티 로 처리한다.● 이론1_ 오류 종류1 처리하는 방법 => 함수 구현부가 아닌, 호출부분에 try catch finally문 작성- api.js//API 전부 fetch 하는 메소드export async function getColorSurveys(){ const url = new URL('https://lear.. 2024. 12. 7. 이전 1 2 3 4 ··· 19 다음
