728x90
반응형
Ajax
동기
--1이 완료해야 2를 완료하고 2가 완료해야 3이 실행된다.
그래서 1이 되어야 2가 되고 2가 되어야 c가된다.
비동기
--동기작업이 오래걸린다면 비동기 방식이 더 좋다.
--1이 되던말던 2도 실행하고 2가 되던말던 3이 실행된다.
웹 환경에서 비동기를 사용할때는 웹소켓아니면 ajax를 사용한다.
웹소켓은 서버와의 연결이 길어야하면 쓰고, 짧으면 ajax를 쓴다.
처음에는 xml을 썻는데, 메타태그가 많아서 무거워지다보니, json을 쓰기 시작함
Arrow function - 화살표 함수
// 매개변수 지정 방법
() => { ... } // 매개변수가 없을 경우
x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.
// 함수 몸체 지정 방법
x => { return x * x } // single line block
x => x * x // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.
() => { return { a: 1 }; }
() => ({ a: 1 }) // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.
() => { // multi line block.
const x = 10;
return x * x;
};
ECMAScrip(에크마 스크립트)의 Ajax
비동기 정보를 가져오려면 콜백함수를 다시 가져와야 함, 그때 콜백이 정말 많이 나옴 그래서 이런 방식이 생겨남
const getAjax = function(url, keyfield, keyword) {
// resolve, reject는 자바스크립트에서 지원하는 콜백 함수이다.
return new Promise( (resolve, reject) => {
$.ajax({
url: url,
method: 'POST',
dataType: 'json',
data: {
keyfield: keyfield,
keyword: keyword
},
success: function(data) {
resolve(data);
},
error: function(e) {
reject(e);
}
});
});
}Promise
안에있는 코드는 모두 비동기적 작업을 한다.
기본적으로 perdine상태
성공하면 fullfiled
실패하면 reject
Promise( (resolve, reject) )
resolve는 성공했을 때 콜백함수, reject는 실패했을 때 콜백함수임
async
해당 함수가 비동기를 포함하는 함수를 사용한다.
await 비동기처리메소드();
await 다음에는 비동기와 관련된 로직이 와야함
즉, 비동기처리메소드()는 promise 로 만들어진 함수의 resolve콜백함수 값을 가져온다.
무한정 기다릴수 없으니까 await를 작성해줌으로써 "완료되면 가져와라!"라고 명시해준 것
728x90
반응형