sychronous 동기적처리 : 순서대로 처리
Asychronous 비동기적처리 : 빨리 실행되는거 부터 처리
그리고 이 글은 나만 이해하기 위해서 만든글
자바스크립트에선
먼저 작동되는걸 하고 오래걸리는건 나중에 한다.
이런 동작 방식이 비동기식 영어론 에이싱크로노로오수~~ ㅋㅋㅋ
ㅇㅋ? 이해함?
몇가지가 오래걸리는데
지금은 두개만 알려줄께
1.setTimeout(function(){},1000)
2.addEventListerner('click', 함수)
개념
동기
순차적으로 일을 처리하는것을 말해
하나 시작하고 끝내고
다음 시작하고 끝내고
이러면 장점은 정말 일하나는 잘하지..하지만...너무 느려 .. 속터져
영어론 sychronous 라고해
그래서 나타난 비동직적이 생겼지
비동기
영어론 Asychronous
대장한명이 여러사람들한테 일을 분배해줘 그려면 일이 정말 빨라지겠지?
그래서 정말 대장을 잘 만들어야해 ~~ㅇㅋ?
자바스크립트는 정말 동기적으로 작동해
순차적으로 기능을 실현하지..
그런데...
1.setTimeout(function(){},1000)
2.addEventListerner('click', 함수)
와 같은 시간이 오래걸리는 기능은 뒤로 미뤄도
그리고 그걸 큐라는곳에 보내
그리고 빨리 실행되는거 시킨후에 오래걸리는 함수를 실행하지
이러면 시간이 좀 빨라져 ㅇㅋ? 이해됨
이 개념은 다시 스택,큐로 연재할께
promise
콜백함수가 싫을때 찾아주세요.
then : 프로미스가 성공일 경우 실행해주세요.
catch : 왼쪽에 실패했을때 실행해주세요.
finally : 성공이든 실패든 실행후 실행해주세요.
let 프로미스 = new Promise(function(resolve, reject){
resolve(); // 성공
reject(); // 실패
}); // 성공/ 실패 판정기계다. //두개 파라미터를 넣어줘야한다.
프로미스.then(function(){
}).then(function(){
}).then(function(){
}) // 계속 이어 붙힐수 있다.
프로미스.catch(function(){
})
프로미스.finally(function(){
})Promise & then 사용법
let 프로미스 = new Promise(function(resolve, reject){
let 여러운연산 = 1 + 1 ;
resolve();
}); // 성공/ 실패 판정기계다. //두개 파라미터를 넣어줘야한다.
프로미스.then(function(){
console.log('성공했어요')
})Promise & catch 사용법
let 프로미스 = new Promise(function(resolve, reject){
let 여러운연산 = 1 + 1 ;
reject();
}); // 성공/ 실패 판정기계다. //두개 파라미터를 넣어줘야한다.
프로미스.catch(function(){
console.log('실패했어요')
})
promise의 3가지 상태
1.성공하면 "resolved"
2.판정 대기중 "pending"
3.실패하면 "reject"
pending 사용법
let 프로미스 = new Promise(function(resolve, reject){
setTimeout(function(){
resolve();
},5000);
}); // 성공/ 실패 판정기계다. //두개 파라미터를 넣어줘야한다.
프로미스.then(function(){
console.log('성공')
})
promise 사용이유
:간지나서
(동기를 비동기로 바꿔주는건 아님)
코딩적으로 이런 디자인이 있음 ...
$.ajax().done(function(){}).fail()
fetch()
이런식으로 만들어진 메소드가 있다.
그래서 알아야만 한다..
(다음생엔 재벌로 태어나자)
사용예제
콜백함수는 순차적으로 기능을 실행시킬때 사용한다고 했다.!!
(했나?...ㅋㅋ)
근데
여러가지 표현방법이 있다.
왜 이렇게 여러가지 만들었는지는 ...모르겠다.
자바스크립트 버젼 (promise)
let 이미지로딩 = new Promise(function(resolve, reject){
let img = document.querySelector('#test');
img.addEventListener('load', function(){
resolve();
})
img.addEventListener('error', function(){
reject()
})
})
이미지로딩.then(function(){
console.log('성공')
}).catch(function(){
console.log('실패')
});Ajax 버젼
먼저 제이쿼리를 사용하기 때문에
제이쿼리를 설치해주세용
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 설치후에 제이쿼리 문법으로 작성
let 프로미스 = new Promise((성공,실패) => {
$.get('https://codingapple1.github.io/hello.txt')
.done(function(결과){
성공(결과)
});
});
프로미스.then(function(결과){
console.log(결과);
})async / await 사용
async 함수 앞에만 붙일수 있음요
프로미스 만들기 귀찮을때 사용
function 더하기(){
1 + 1
}
더하기().then(function(){
})1단계 함수 앞에 async 붙혀주세요.
2단계 다음 기능발생할 함수앞에 await 넣기
async function 더하기(){ // async 더해주기
var 프로미스 = new Promise(function(성공,실패) {
var 힘든연산 = 1 + 1;
성공(힘든연산);
});
var 결과 = await 프로미스;
console.log(결과)
}3단계 실패를 넣고 싶을때
try{} catch{}
async function 더하기(){ // async 더해주기
var 프로미스 = new Promise(function(성공,실패) {
var 힘든연산 = 1 + 1;
실패(100);
});
try {
var 결과 = await 프로미스;
console.log(결과);
} catch {
console.log('프로미스 연산이 잘 안되었군요')
}
}연습하자
버튼을 눌렀을때 콘솔창에 성공했다고 띄우기
button id="btn">회원가입</button>
<script>
async function 더하기 (){
var 프로미스 = new Promise(function(성공,실패){
document.getElementById('btn').addEventListener('click',
function(){
성공('성공했어요')
})
})
var 결과 = await 프로미스;
console.log(결과);
}
더하기();