Ajax - 브라우저에서 밖에 안됨 XMLhttprequest가 브라우저에만 있음
선행 이해 Client - Server 이해 , Http 프로토콜에 대한 이해 , JSON , 비동기
done 4번 이벤트 ( 성공적으로 보냈다)
console.log(xhr.readyState); 프로퍼티 (현재의 상태)
200 그냥 201 (포스트 성공)
400 에러 404 리소스를 요청했는데, 요청한 리소스가 없는 경우
xhr.response , responseText (무조건 텍스트냐 아니냐) 스트링을 준다는 판단이 있을 때
const ajax = (method, url, callback, payload()) => {}; 순서가 옵션인 것을 맨 마지막
try { 여기서 트라이해보고
} catch(e) { 에러가 e로 넘어가 봄
}
PUT 특정 리소스의 데이터 싹 다 고쳐라, PETCH 특정 리소스의 일부 데이터를 고쳐라(아이디는 고치는 것 아님)
데이터를 다 고쳐라
[ , , ,] 이런 구조
특정 리소스 (한놈) ID 필요 거기에 아이디, 콘텐츠, 컴플리티드 다 고침
패치는 그중에 컴플리티드만 고침
'비동기 함수에도' 비동기적인 부분이 있고 아닌 부분이 있는데,
아닌 부분에서 에러는 잡을 수 있으나 비동기적인 부분에선 불가능
비동기 함수(Ajax)의 특징 :순서가 보장이 안된다 - 콜백 헬 문제
에러를 못 잡음 (catch를 못함)
버블링처럼 에러가 이벤트가 발생한 친구에게 해당되고 그 친구가 부모로 올라가면서 줌
foo(){
bar {} } bar가 에러면 foo가 갖고 되는데, caller 푸(부른 사람, callee 바 (불려진)
순서는 콜 스택에 먼저 들어가는 순서대로 정해지고, 그거는 우리가 알 수 없다
현업에서 쓸 수 없는 이유 : 콜백 헬은 어떻게든 한다 치고, 에러 처리를 할 수 없다 - 치명적
옵서버 패턴 - 리액티브 프로그래밍
. then(render) 직접 호출
. then(res => render(res)) 어떤 함수를 만들어서 호출
차이
then 메서드는 프로미스를 호출하게 되어 있으므로 (프로미스 체이닝) 순서대로 코드를 작성할 수 있다
쓰기 싫다 -> async await (프로미스 기반이라 프로미스를 알아야 함)
현업에서 비동기는 프로미스나 async await 둘 중 하나
비동기를 동기처럼 쓰는 것
(async function (){
const res = await promiseAjax('GET', 'http://localhost:3000/todosxx/1');
console.log(res);
})
프로미스 : 콜백 헬 (가독성을 해쳐 실수 유발) 및 에러를 못 잡아서 es6에서 추가된 패턴
우리의 할 일 :콜백 안에 할 일을 적는 것 resolve, reject함수를 넣어준다(프로미스가)
**fulfilled**비동기 처리가 수행된 상태 (성공) resolve 함수가 호출된 상태
| **rejected** | 비동기 처리가 수행된 상태 (실패) | reject 함수가 호출된 상태 |
then 메서드의 첫번쨰 콜백으로 잡는다
catch 메소드의 첫 번째 콜백으로 잡는다
then이 promise를 리턴하기 때문에, then then then 프로미스 체이닝이 될 수 있다
정적 메서드
promise all 병렬 처리 [프로미스 전체를 한방에 실행한다] = 인수 배열(이 트러블을 받음)
결괏값을 배열에 담아줌
처리 순서 보장
promise race 경쟁
먼저 처리된 게 먼저 나온다
제너레이터는 값을 가져오는 것을 최대한 늦춤
fetch, asyhn await
fetch 값 이하나 면 get
post는 두 번째 인자로 객체
delete 페이로드 없어서 생략
patch post랑 같음
async/await
async라는 이름이 붙은 함수를 만들고, 안에서 await를 쓰면 동기처럼 작성할 수 있다.