집 > 기사 > 웹 프론트엔드 > JS에서 비동기 메서드를 구현하는 초보자가 꼭 읽어야 할 책

JS에서 비동기 메서드를 구현하는 초보자가 꼭 읽어야 할 책

php中世界最好的语言원래의: 2018-04-14 11:43:482755검색

이번에는 초보자가 꼭 봐야할 js에서 구현한 비동기식 메소드를 가져왔습니다. js 구현에서 초보자가 꼭 봐야할 Notes는 무엇일까요?

어느 날 갑자기 백그라운드에서 데이터를 호출하여 첫 페이지에 표시하는 메서드를 작성했지만 출력 결과는 항상 비어 있고 정의되지 않았으며 데이터를 얻지 못했습니다. 다양한 소스에서 정보를 검색한 후 JS 비동기식의 "구덩이"에 빠졌다는 사실을 발견했습니다.

우리는 단일 스레드, 다중 스레드, 동기화 및 비동기라는 개념을 자주 듣습니다. 그렇다면 이러한 개념은 정확히 무엇입니까?
그럼 위의 개념부터 시작해 보겠습니다

단일 스레드, 다중 스레드, 동기화 및 비동기성에 대한 기본 이해

실행 중인 모든 프로그램(즉, 프로세스)에는 메인 스레드라고 하는 적어도 하나의 스레드가 있습니다. 메인 스레드는 프로그램 시작 시 생성되며 메인함수를 실행하는 데 사용됩니다.

1. 단일 스레드는 하나의 메인 스레드만 있는 스레드입니다. 코드는 위에서 아래로 순차적으로 실행됩니다. 메인 스레드는 프로그램의 모든 코드(UI 표시 및 새로 고침, 네트워크 요청, 로컬 저장소 등)를 실행하는 역할을 합니다. ) [스레드 하나로 모든 것이 해결됩니다. 생각만 해도 조금 피곤해요.]

2. 멀티스레딩은 이름에서 알 수 있듯이 사용자가 독립적으로 생성할 수 있는 여러 스레드를 포함하는 프로그램입니다. 사용자가 독립적으로 생성한 여러 프로세스는 기본 스레드에 상대적인 하위 스레드입니다. 자식 스레드와 메인 스레드는 독립적인 실행 단위로, 각각의 실행이 서로 영향을 주지 않으므로 동시에 실행될 수 있습니다.

이런 무미건조한 이론을 듣는 것만으로도 조금 현기증이 나시나요? 공교롭게도 저도 처음 봤을 때 어지러웠어요.

정보를 찾는 과정에서 다른 사람들의 생생한 비유를 발견했습니다.

예를 들어 싱글 스레딩은 부엌에 가서 요리를 하는 것을 의미하고, 멀티 스레딩은 두 사람이 혼자 요리하고 다른 하나는 요리를 한다는 것을 의미합니다.

이렇게 하면 더 잘 이해될 수 있겠죠?

동기식과 비동기식이란 무엇입니까?

간단한 삶의 예를 들어 설명해 보겠습니다.

호텔을 예약하기 위해 호텔에 전화를 하고 직원에게 객실이 있는지 물어보면 직원이 먼저 객실이 있는지 확인해야 답변을 받을 수 있습니다.

동기화란 전화를 끊지 않고 직원이 방이 있는지 알려줄 때까지 기다리는 것을 의미합니다.
비동기식은 전화를 끊고 식사, 음료 등 다른 일을 하다가 직원이 정보를 찾은 후 전화를 한다는 것을 의미합니다.

그럼 여기에 우리의 주제가 있습니다

JS의 비동기 작업이란 무엇인가요?

JS의 실행 환경은 단일 스레드입니다. 즉, 프로그램이 순차적으로 실행될 때 한 번에 하나의 작업만 실행할 수 있습니다. 프로그램을 계속 실행하려면 현재 작업이 실행될 때까지 기다려야 합니다. , 현재 작업을 실행하는 데 시간이 얼마나 걸리더라도 (후속 프로그램이 서둘러 실행될 때까지 기다리는 것이 정말 불편한 경우).

후속 프로그램의 불편한 차단 문제를 해결하기 위해. JavaScript에는 실제로 지연 처리되는 비동기 처리 모드가 있습니다.

설명하기 위해 또 다른 예를 들어 보겠습니다.

rreee

getUserInfo 함수가 호출되며, 백그라운드에서 데이터를 가져오는 데 많은 시간이 걸릴 수 있습니다. 이를 위해서는 renderUserInfo가 실행되기 전에 데이터를 가져올 때까지 기다려야 합니다. 다행히 JS에는 데이터를 가져올 때 renderUserInfo가 데이터를 가져올 때까지 기다릴 필요 없이 직접 실행할 수 있는 비동기 작업이 있습니다.

즉, 이 두 기능은 어떤 순서로 실행됩니까? 걱정하지 마세요. debug를 해보세요:

var getUserInfo = function () {
      $.getJSON("http://www.easy-mock.com/mock/5a09868228b23066479b8379/ajaxData/getUserInfo", function () {
        return data;
      });
    }
    var data = getUserInfo();
    renderUserInfo(data)

순차 실행의 출력은 원래 "aaa", "bbb", "ccc"라고 생각되었습니다. 그렇죠?

즉, 함수가 데이터를 가져오기 위해 getJSON을 실행할 때 프로그램은 다음 단계를 실행하기 전에 데이터를 가져오는 것을 기다리지 않고 대신 데이터 가져오기 단계를 건너뛰고 출력 데이터를 직접 실행합니다. 또한 비어 있습니다.

이것이 JS의 비동기 메커니즘입니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!