JavaScript 비동기식 프로그래밍 Promise의 초기 사용 설명

4179 단어 jsPromise활용단어참조

1. 개요


Promise 객체는 ES6가 제시한 비동기식 프로그래밍의 규범입니다.비동기 프로그래밍을 말하자면, 동기화와 비동기라는 두 개념을 말하지 않을 수 없다.
동기화 프로그래밍을 글자 그대로 이해하면 두 임무가 동시에 실행되는 것을 가리키는 것 같다. 이렇게 이해하면 틀린다. (적어도 필자가 이 개념을 다시 접하지 못했을 때 이런 오해가 있었다.)동기화와 비동기화는 코드가 지정한 실행 순서(구조화된 프로그래밍 모델의 실행 순서는 항상 위에서 아래로, 그리고 뒤로 가는 것)를 가리킨다. 만약에 실행 순서가 코드와 같다면 동기화이다.다르다면 비동기적이다.
처음에 운영체제는 모두 명령행을 바탕으로 하고 모든 언어를 설계해도 천연적으로 동기화된 문장이다. 이런 상황에서 비동기적인 프로그래밍을 필요로 하지 않는다.그러나 곧 도형 조작 인터페이스가 나와서 모든 프로그래밍 언어는 GUI와 접촉할 수밖에 없었다.우리가 알아야 할 것은 GUI 프로그램은 끊임없이 그려지는 인터페이스 프로그램입니다.

while(done)
{
    dosomething();
    drawGUI();
}
만약 모든 순환에서 실행되는 작업dosomething () 의 이벤트가 너무 길면 인터페이스가 그림 그리기 명령을 받지 못하게 되고 직관적인 표현이 바로 카톤이다.이 문제를 해결하기 위해 스크립트로 JavaScript를 사용하는 브라우저는 일반적으로 이벤트 루프(Event Loop) 메커니즘을 사용합니다.
  • 시간 소모 행위를 이벤트로 규정하고 이벤트와 응답 리셋 함수를 연결합니다
  • 각 순환, 동기화 코드 우선 처리..
  • 동기화 코드가 완성되고 선후 순서에 따라 이벤트를 반복합니다..
  • 나머지 동기화 코드가 없는 순환에서 이벤트의 상응하는 함수를 순서대로 실행합니다..
    • 이렇게 하면 단일 노드의 상황에서 임무의 집행 순서를 수정하고 비동기적인 메커니즘을 실현했다.동기화 행위는 항상 신속하게 완성되고 제때에 인터페이스 그리기를 진행했기 때문에 인터페이스가 끊기는 현상도 크게 개선되었다.
    이벤트 순환 메커니즘은 UI 장치의 입력과 출력을 이벤트로 규정하는데 실제로는 시간이 많이 걸리지만 일반적으로 IO와 관련되고 IO와 관련된 행위, 자바스크립트는 비동기적인 행위의 코드를 제공한다.예를 들어, 여기에 사용할 그림을 불러오는 실례입니다.

    2. 상론


    우선 HTML 페이지 PromiseTest를 준비하세요.html, 이 HTML 페이지에 JS의 스크립트 PromiseTest를 불러옵니다.js:
    
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="./3rdParty/jquery-3.5.1.js"></script>
    <title> </title>
</head>

<body>
    <div id = "container"> </div>
    <script src="./PromiseTest.js"></script>
</body>

</html>
    원본 JS의 이미지 객체 Image는 이벤트 형식으로 이미지를 비동기적으로 로드합니다.
    
$(function () {    
    var img = new Image();
    img.onload = function () { 
        $(img).appendTo($('#container'));        
    };
    img.src = "./img.jpg";    
});
    이미지의 이벤트 핸들 onload에 해당하는 함수를 추가합니다. 이미지 마운트가 완료되면 마운트된 이미지를 HTML 페이지의 div 요소 하위 노드에 추가합니다.브라우저를 통해 이 페이지를 열면 해당 주소의 그림이 직접 표시됩니다.
    이 JS 스크립트는 당연히 Promise를 통해 고칠 수 있다.
    
$(function () {    
    function getImg(uri){
        return new Promise(function(resolve, reject){
            var img = new Image();
            img.onload = function () {
                resolve(img);
            };
            img.onerror = function () {
                reject(Error("Load Image Error!"));
            }
            img.src = uri;
        });   
    }  
    
    var imgUri = "./img.jpg";
    getImg(imgUri).then(function(img){
        $(img).appendTo($('#container')); 
    }, function(error){
        console.error("Failed!", error);
    })
});
    대략 Promise를 사용하면 프로그램이 더욱 복잡하고 복잡해 보이는 것 같다.그러나 우리는 Promise 메커니즘의 내포를 깊이 이해해야 한다. 이렇게 설계하는 것은 재미를 위한 것이 아니다.
  • Promise 대상은 할 예정이지만 아직 시작하지 않은 행위를 대표한다.하나의 행위라면 당연히 계획을 세우고 행위 결과에 대해 규정해야 한다. 성공하면resolve를 집행한다.실패하면reject를 실행합니다.일반적으로 우리는 function을 정의하고 Promise 대상을 되돌려줄 수 있다..
  • Promise 대상을 되돌려주는 function을 호출하면 이 동작을 진정으로 시작합니다.그러나resolve와reject는 두 개의 리셋 함수일 뿐입니다. 그러면 then 방법을 통해 성공과 실패에 대응하는 진정한 처리 함수를 규정합니다..
    • 이를 통해 알 수 있듯이 이런 디자인은 보기에는 매우 번잡하지만 마치 하나의 동기화 행위와 같다. 미완성 행위 대상을 규정하고 행위가 완성되면 어떻게 처리하고 행위가 실패하면 어떻게 처리하는지.이것도 Promise의 목적이다. 비동기적인 조작을 동기화하는 행위처럼 하는 것이다.

    3. 참조


    동기화(Synchronous) 및 비동기화(Asynchronous)
    JS 단일 스레드 비동기 실현 원리를 약술하다
    JavaScript 운영 체제 상세 정보: Event Loop
    JavaScript 비동기 프로그래밍의 Promise에 대한 초보적인 사용에 관한 이 글을 소개합니다. js Promise 사용에 관한 더 많은 내용은 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!
    자세한 내용은 IntelliJ IDEA 새 Java 웹 백엔드 resfulAPI 템플릿 사용
    JS+Struts2 다중 파일 업로드 인스턴스 상세 정보

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage