React Vernacular Movement 시리즈의 세 번째 기사에 오신 것을 환영합니다. 오늘은 JavaScript의 비동기 작업을 살펴보고 두 가지 중요한 키워드인 Async와 Await를 소개하겠습니다. 이 기사에서는 예제를 통해 비동기 작업의 개념과 Promise, Fetch, Async 및 Await를 사용하여 비동기 코드를 보다 효율적으로 처리하는 방법을 보여줍니다.
머리말
현대 웹 개발에서는 비동기 작업이 점점 더 중요해지고 있습니다. 이 기사에서는 기본 개념부터 시작하여 비동기 작업의 원리와 고급 JavaScript 구문을 사용하여 비동기 상황을 처리하는 방법을 자세히 살펴봅니다.
이 기사에서는 비동기 JavaScript에 대해 설명합니다.
- 비동기식
- 약속 및 가져오기
- 비동기 및 대기
- 약속 객체 구성
비동기식
비동기식은 개발에 있어 필수적인 개념입니다. 이전 프로그램 코드는 현재 동기식 개념으로, 이는 프로그램이 순차적으로 실행된다는 의미입니다.
그러나 웹 페이지를 개발하는 과정에서 비동기(Asynchronous) 작업을 수행해야 하는 경우가 있습니다. 예를 들어 사용자가 제출하기 위해 양식을 누르면 데이터가 전송될 때까지 기다렸다가 반환된 데이터를 가져와야 합니다. 성공 여부를 알기 전에 서버.
서버가 결과를 반환하기 전에 화면 성공이나 실패를 JavaScript를 통해 직접 실행하면 잘못된 것입니다.
다음에 소개될 Promise 및 Async & Await를 포함하여 비동기 실행을 구체적으로 처리하는 최신 JavaScript의 몇 가지 구문도 있습니다.
약속 및 가져오기
약속하다
비동기식 요청에는 일반적으로 성공과 실패라는 두 가지 결과가 있지만 실제로는 Fulfilled, Rejected, Pending이라는 세 가지 상태가 있습니다. Promise 객체를 통해 비동기 요청의 현재 상태를 알 수 있습니다.
술책
fetch 기능이 있기 전에는 API 데이터를 얻는 것이 상당히 번거롭고 20줄이 넘는 코드를 작성해야 할 수도 있었습니다. 그러나 이를 보다 편리하게 하기 위해 ECMA는 fetch 구문만 사용하는 새로운 fetch 구문을 추가했습니다. 한 줄 또는 두 줄의 "API 가져오기" 데이터를 완료할 수 있습니다.
API 인스턴스를 직접 예로 들어보겠습니다. 다음은 인터넷에서 찾을 수 있는 무료 API입니다.
https://api.thecatapi.com/v1/images/search
독자가 브라우저에 직접 입력하면 ID, URL, 너비, 높이가 포함된 반환된 개체를 볼 수 있습니다.
그렇다면 프로그램 코드를 사용하여 API 데이터를 얻는 방법은 무엇입니까?
fetch("https://api.thecatapi.com/v1/images/search") .then(res=>res.json) .then(console.log) .catch(console.error)
여기서는 fetch 함수를 이용하여 URL을 인자로 전달하기만 하면, then이나 catch 함수를 통해 순차적으로 실행하고 싶은 프로그램을 실행할 수 있습니다.
위의 코드를 예로 들면, 먼저 API를 호출하고 첫 번째 then 함수를 통해 반환 결과를 얻은 후 두 번째 then 함수를 통해 메시지를 출력합니다. 마지막으로 catch 함수를 통해 실패하면 실패 메시지가 인쇄됩니다.
비동기 및 대기
자바스크립트 비동기
더 일반적이고 널리 사용되는 또 다른 비동기 구문은 Async & Await 비동기 함수(Async Function)를 사용하는 것입니다. Promise & Fetch에 비해 Async & Await 구문은 더 간단하고 이해하기 쉬우며 우리의 독서 습관에 더 부합합니다. .
위의 가져오기가 비동기 및 대기 구문으로 다시 작성되면
const getCatData = async() => { let res = wait fetch("https://api.thecatapi.com/v1/images/search") let { results } = wait res.json() console.log(results) } getCatData() /* [ { id: "ac5", url: "https://cdn2.thecatapi.com/images/ac5.jpg", 너비: 565, 높이: 551 } ] */
함수의 첫 번째 줄에 async 키워드를 사용하여 이것이 비동기 함수임을 컴퓨터에 알립니다. 그런 다음 비동기 함수를 완료하기 위해 기다려야 하는 비동기 요청 앞에 wait 키워드를 추가하기만 하면 됩니다. 그러면 실패 메시지를 어떻게 받을 수 있나요? async & Wait에 try & catch 구문을 추가하는 한 먼저 try에서 프로그램을 실행하고 catch에서 Promise 실패 상태를 처리할 수 있습니다.
const getCatData = async() => { try { let res = wait fetch("https://api.thecatapi.com/v1/images/search") let { results } = wait res.json() console.log( 결과) } catch(오류) { console.log(error) } } getCatData()
약속 객체 구성
위에서 언급한 것처럼 Promise에는 Fulfilled, Rejected, Pending 총 3가지 상태가 있지만 결과적으로는 결국 성공과 실패라는 두 가지 결과로 요약할 수 있습니다. 따라서 비동기 함수를 실행할 때 실행 결과를 반환하고 Promise 객체를 사용하여 저장할 수도 있습니다.
const getCatData = () => new Promise((해결, 거부) => { const api = "https://api.thecatapi.com/v1/images/search" const request = new XMLHttpRequest; request.open("GET ", api); request.onload = () => { request.status === 200 ? 해결(JSON.parse(request.response).results) : 거부(Error(request.statusText)) } request.onerror = err => 거부(err); request.send() })
결론
이 기사에서는 비동기(Asynchronous)의 개념과 일부 구현에 대해 설명합니다. 그러나 비동기 자체는 상대적으로 어려운 개념이며 일부 구문은 다소 어렵습니다. 독자들도 이 기사를 즐겨찾기에 추가하고 나중에 다시 읽어도 좋습니다. . 이 콘텐츠를 검토해 보세요. 제안사항이나 질문이 있으시면 메시지를 남겨주세요! 이 글이 마음에 드셨다면 더 많은 분들이 보실 수 있도록 좋아요와 공유 부탁드립니다~
기타 React 기사 참조
React Vernacular Movement 01-JavaScript ES6
React Vernacular Movement 02-JavaScript ES6 객체
대기업이 Nx를 사용하는 이유는 무엇입니까? Monorepo 도구는 5분 안에 빠르게 설정할 수 있습니다.
한국어 
繁體中文 
English 
简体中文 
日本語 
Español