FRONT언어/Javascript

비동기와 동기

15881588개발개발 2020. 12. 3. 16:47

동기 -

동시에 일어난다는 뜻이다. 요청과 동시에 결과가 일어남 / 결과가 나올때까지 다른작업은 대기 

직렬적으로 처리하는 방식 

비동기-

요청한그자리에서 결과가나오지 않을수도있음 / 결과가 일어나는동안 다른작업도 가능 자원이 효율적으로 돌아간다

병렬적으로 처리한다. 

 

자바스크립트의 대부분의 DOM 이벤트와 Timer 함수(setTimeout, setInterval), Ajax 요청은 비동기식 처리 모델로 동작한다.

 

예를들어

function A (){
	axios.get (ㄱ)
    }
function B (){
	axios.get(ㄴ)
}
A() //a실행
B() //b실행


A함수먼저 호출하고 B함수를 호출했을때 ㄱ데이터가 먼저나올지 ㄴ 데이터가 먼저 나올지는 모른다.
비동기란 바로 그런것이기 때문이다.

 

다른예로 

function func1() { 
	console.log('func1');
    func2(); 
    }


function func2() {
	setTimeout(function() {
    	console.log('func2'); 
    }, 0);
   func3(); 
 }

function func3() {
	console.log('func3'); 
    }
func1();

실제 찍어보면  func1 , func2, func3 으로 찍히지 않는다.

 

 

비동기를 직렬로 처리하는 방법은 여러가지가 있는데 callBack 함수등등이 있다

 


xmlHttpRequset 
객체는 서버와 상호작용하기 위해 사용된다.
ajax프로그래밍에주로 사용되는데 


ajax이전의 데이터 전달은 통째로 보내주던 방식이ㅓ었다.
그니까 버튼을 하나 클릭하면 지금은 데이터를 따로 받아 와서 실행하지만 과거에는 그 페이지 전체의 데이터를 받아왔다는 것이다.

ajax로 인해 비동기 정보요청이 가능해졌다.