JavaScript 약속이란 무엇입니까?
5819 단어 beginnerses6webdevjavascript
만약 네가 회조 지옥을 겪은 적이 없다면, 내가 너에게 그것이 어떤 모습인지 보여 줄게.정신 차려, 아래의 코드가 무엇을 완성하려고 하는지 이해해 봐!
그래, 공평하게 말하자면, 이것은 아마도 좀 과장된 예일 것이다.그러나 플러그인 리셋을 시도하면 코드의 가독성을 현저히 낮출 수 있다는 것을 증명했다.
작성된 코드의 가독성을 걱정하는 이유를 알고 싶다면, 아래의 글을 보십시오. 이 검색에 대한 깊은 대답을 제공합니다.
코드 가독성 심리학.결코 그것을 에곤 엘브레의'중등'으로 간주해서는 안 된다
에곤 엘브레・ 2018년 7월 21일・ 14분 읽기 중등적
이제 당신은 지옥이 악명이 높다는 것을 깨달았습니다. 개발자들이 먼저 이 함정에 빠지게 된 것이 무엇인지 간단히 봅시다.
우리가 리셋을 사용하는 주요 원인은 비동기적인 임무를 처리하는 것이다.API 호출, 응답 수신, JSON으로 변환, 이 데이터로 다른 API 호출 등이 필요할 때가 많다.이것은 JavaScript의 고유한 문제인 것 같습니다. 이 API 호출의 본질은 기본적으로 비동기적이며 해결 방법이 없는 것 같습니다.
이것이 바로 자바스크립트의 약속이 나타난 곳이다. ES6의 일부로 발표된 본기 자바스크립트의 특성이기 때문에 지옥으로 돌아가는 것을 피하고 API 호출 체인을 다른 함수로 분해할 필요가 없기 때문이다.
약속은 비동기식 작업 체인이 완성된 후에 동기화할 수 있는 대상이다.이 객체는 다음 세 가지 상태 중 하나일 수 있습니다.
약속은 우리가 지옥으로 돌아가는 것을 피하는 데 도움을 줄 수 있다. 왜냐하면 그들은 링크를 사용할 수 있기 때문이다.그리고 () 임의의 횟수.
.then () 은 비차단 코드입니다.이것은 비동기 작업의 모든 단계에서 약속이 이루어지기만 하면 리셋 함수 서열이 동기적으로 실행될 수 있다는 것을 의미한다.
이렇게 하면 아무리 비동기적인 임무가 필요하든지 간에 우리는 약속에 기초한 방법으로 그것들을 처리해야 한다.
비동기적인 작업은 최종 값을 즉시 되돌리는 것이 아니라 약속한 값을 되돌려 주고 미래의 어느 시점에 이 값을 제공하기 때문에 가능하다.우리가 이 조작을 막는 코드가 없기 때문에, 모든 비동기적인 작업은 필요에 따라 실행할 수 있으며, 되돌아오는 약속은 그것들의 실패 여부를 반영할 것이다.
이제 약속이 뭔지 알겠어.그런데 어떻게 사용하세요?우리 이 절에서 이 문제를 처리합시다.
일반적인 낡은 리셋을 사용하는 예시를 고려한 후에 우리는 그것을 약속에 기초한 방법으로 바꿀 수 있다.
보시다시피 이것은 인위적인 예이지만, 리셋 수량이 증가함에 따라 함수 호출 체인을 따르는 것은 상당히 어렵다.현재, 만약 우리가 모든 리셋을 리셋의 약속 자체에 연결한다면, 우리는 다음과 같은 약속 체인을 얻을 수 있다.
여기에서 우리는
demoFunction
호출된 후에 약속을 되돌린다고 가정한다.이 약속은 최종적으로 유효한 결과나 오류로 평가되었다.만약 약속이 이행된다면.그런 다음 () 문을 실행합니다.중요한 것은 하나하나 주의해야 한다는 것이다.그리고 () 새로운 약속을 되돌려줍니다.따라서
demoFunction
이 약속을 되돌릴 때 해석값은 result1
로 체인의 다음 함수firstCallback()
를 호출하는 데 사용된다.이것은 최종 리셋을 호출할 때까지 계속될 것이다.만약 어떤 약속이 거절된다면, 이것은 그 중 하나가 잘못을 저질렀다는 것을 의미한다.이런 상황에서 나머지.then () 문장 단락, 그리고.catch () 문장을 실행합니다.
너는 아마 하나를 알아차릴 것이다.catch () 는 오류 반환을 충당해야 하며, 코드의 초기 버전에서는 모든 반환 함수 호출에
failureCallback
함수를 반환 오류 처리 프로그램으로 제공해야 합니다.이렇게 하면 일련의 플러그인 리셋을 약속 체인으로 쉽게 전환할 수 있습니다.
지금까지 우리는 약속을 사용하여 리셋을 처리하는 새로운 방법을 배웠다.그러나 우리는 아직 이 약속들이 어디에서 왔는지 토론하지 않았다.이 절에서, 목록에 연결할 수 있는 약속을 되돌려주는 방법을 배울 수 있습니다.then () 문.
다음 예시를 고려하면, 그 중에서 우리는 승낙을 되돌려 주지 않는 함수가 있기 때문에, 승낙 체인에 포함될 수 없다.
setTimeout(() => callbackFunc("5 seconds passed"), 5\*1000);
여기서 callbackFunc
오류를 던질 가능성은 낮지만, 만약 그것이 이렇게 한다면 우리는 오류를 포착할 방법이 없다.이 함수를 약속된 함수로 변환하기 위해 다음 새 키워드를 사용할 수 있습니다.
const wait = ms => new Promise((resolve, reject) => {
setTimeout(resolve, ms);
};
wait(5*1000)
.then(() => callbackFunc("5 seconds"))
.catch(failureCallback);
여기에서 wait
함수를 표시하며, 이 함수는 호출할 때마다 새로운 약속을 되돌려줍니다.우리는 이 점을 실현하기 위해 Promise 구조 함수를 사용할 수 있다. 이것은 새로운 Promise 대상을 만들었다.따라서 지시wait
의 지속 시간을 전달하는 매개 변수를 통해 호출setTimeout
하면 약속을 되돌려줍니다.일단 실현 상태에 도달하겠다고 약속하면 해석과 관련된 함수, 즉
callbackFunc
을 호출한다.약속이 거절되면 실행failCallback
.자신의 약속을 만드는 방법을 한층 더 이해하기 위해서, 당신은 this article 을 통해 조작할 수 있으며, 이것은 더욱 복잡한 예시를 제공할 수 있습니다.
Promise 구조 함수 중 각종 실례 방법을 깊이 연구하는 가장 좋은 자원은 MDN Docs이다.
비록 본고에서 제시한 방법은 리셋을 끼워 넣는 간단한 대체 방법이지만 비교적 새로운 버전의 자바스크립트(Ecmascript 2017 또는 ES8)도 리셋 지옥을 처리하는 기능을 가지고 있다!
이 async &await의 특성을 연구하고 싶으면 아래의 글을 읽으십시오.비록 이것은 새로운 특성이지만 사실은 본고에서 논의한 승낙 개념을 초과했을 뿐이다!따라서 약속의 개념을 이해하면 async&await의 ES8 특성을 이해하기 쉽습니다.
syntactic sugar
희망, 지금 당신은 약속이 있습니다. 다음에 당신이 회조 함수를 처리해야 할 때, 당신은 회조 지옥의 희생물이 되는 것을 성공적으로 피할 수 있습니다!
Reference
이 문제에 관하여(JavaScript 약속이란 무엇입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/rajatm544/what-are-javascript-promises-4mp6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)