JavaScript를 배우면 만날 것입니다. 비동기. ‘콜백 지옥’, ‘약속’및 ‘Async/Await’라는 용어는 어려울 수 있습니다. 비동기식의 개념과 흐름을 이해하는 것이 훨씬 쉬워 질 수 있습니다. 이 기사에서는 초보자조차도 쉽게 따라갈 수 있도록 비동기 처리의 기본 개념과 예를 설명합니다.
동기 대 비동기
| 분류 | 설명 | 예 | | —— | – – | —— | | 동기 부여 | 코드는 순차적으로 실행됩니다 | 다음에 계산 후 실행 | | 비동기 | 첫째, 작업의 끝이 실행됩니다 | 네트워크 요청, 타이머 등 | 🧩 케이블 : 동기 부여는 여러 숫자, 비동기 태그 및 메소드가 호출 될 때 처리됩니다.
JavaScript의 대표적인 비동기 작업
settimeout (), setInterVal () ajax request (fetch, xmlhttprequest) 파일 읽기
1 단계 : Settimeout과 비동기식 이해
“JavaScript Console.Log (“start “); settimeout () => {console.log (“3 초 후 실행 “); settimeout ()는 지정된 시간 후 코드 흐름을 중지하지 않고 콜백을 실행합니다.
2 단계 : 콜백 함수 (콜백)
“”JavaScript 함수 greet (이름, 콜백) {console.log ( “hello”, + name); 콜백 (); 콜백 (); 콜백 (); }); 콜백 지옥 : 겹치는 콜백이 많으면 코드 가독성이 급격히 떨어집니다.
3 단계 : 약속으로 구조 개선
“JavaScript 함수 fetchData () {return new Promise ((Resolve, Reject) => {settimeout (() () () => {resolve (“data loading “);};};};} fetchData (). 해결하다 | 성공할 때 실행 | | 거부하다 | 작동 실패시 실행 | | .그 다음에() | 결과를 얻으십시오 |
4 단계 : 비동기/대기로 깔끔하게
“JavaScript Async 함수 loadData () {consover result = recetchData (); console.log (“비동기 처리 결과 :”, 결과);} 기능은 항상입니다 Returns Promise는 약속을 기다리는 대기중인 약속을 기다리고 있습니다. Async/Await도 가독성을 개선하고 코드 흐름을 이해하기 쉽기 때문에 실제로 널리 사용됩니다.
실습의 예 : API 데이터 가져 오기
““javaScript Async 함수 getUserData () {const response = await fetch ( ‘https://jsonplaceholder.typicode.com/users/1’); const user = await response.json (); console.log (“이름 :”, user.name);}“`🖼 bel alt 태그 태그 예시 :
비동기 처리에 대한 메모
Or Promise.all () 활용
마치다
JavaScript의 비동기 처리의 개념은 처음에는 어려울 수 있지만 개념 → 콜백 → 약속 → 비동기/대기 단계별로 이해하면 빨리 익숙해 질 수 있습니다. 실제로 API 통화, 사용자 입력 처리 및 파일 업로드와 같은 다양한 장소에서 사용되기 때문에 마스터 해야하는 필수 개념입니다. 🔎 다음 게시물 주제 추천 → 24 번 : 실제로 널리 사용되는 JavaScript 기능 컬렉션 → 31 : JavaScript 이벤트 처리 완벽한 가이드
참조
https://developer.mozilla.org/ko/docs/learn/javaScript/asynchronous https://javaScript.info/async