정보실

웹학교

정보실

javascript JS Promises: race vs all vs allSettled(1)

본문

Promises은 지금까지 있었지만 ES6까지는 타사 라이브러리를 통해 사용해야 했으며 구현 및 API는 조금씩 다릅니다. 

고맙게도 ES6는 기본 Promise 객체를 구현하여 API를 표준화하고 표준화하여 모든 사람이 타사 구현을 버릴 수 있게 했습니다.


https://blog.logrocket.com/js-promises/ 


즉, 아마도 당신은 나와 같았고 타사 라이브러리가 필요했기 때문에 Promise을 무시하고 async.js와 같은 콜백 및 라이브러리를 사용하여 해당 코드를 처리하고 콜백 지옥 (또는 피라미드 그것도 알려진 운명).


그러나 이제 Promise은 기본 구성이므로 더 이상 무시할 변명의 여지가 없습니다. 따라서 이 기사에서는 보다 복잡한 사용 사례를 처리하는 동시에 여러 Promise을 처리하는 데 도움이 되는 세 가지 방법을 다룹니다.


그러나 우선 Promise 기반 구문이 제공하는 주요 이점 중 하나를 다루고 싶습니다.


선언적 프로그래밍 


메소드 체인 구문을 사용하는 프로세스와 메소드 이름 뒤의 논리 (즉, catch)는 의도를 선언하는 데 중점을 둔 코드 블록을 구성 할 수 있습니다. 실제로 필요한 것을 수행하는 방법을 실제로 지정하는 대신.


리스트 안의 모든 숫자를 잡고 두 배로 늘리려면 어떻게 해야 합니까? 어떻게 하시겠습니까?


우리가 일반적으로 그 코드를 작성하는 방법은 컴퓨터처럼 생각하는 것입니다.


목록의 모든 항목을 반복해야 하므로 위치 카운터가 필요합니다. 위치 카운터는 0에서 배열의 숫자로 이동해야 하며 모든 숫자에 대해 두 배로 늘리고 추가해야 합니다 다른 배열로. 


다음과 같이 해석됩니다.


let list = [1,2,3,4,5];
let results = []
for(let counter = 0; counter < list.length; counter++) {
       results[i] = list[i] * 2;
}
console.log(results);
//[2,4,6,8,10]

자, 내가 제안하는 것은 대신에 무엇이 일어나야 하는지 생각하고 작성하는 것입니다. 다른 말로:


Map은 모든 숫자를 2배 처리합니다. 


let list = [1,2,3,4,5];
let results = list.map( i => i * 2 );

console.log(results);
//[2,4,6,8,10]

이것은 매우 간단한 예이지만 선언적 프로그래밍의 힘을 보여줍니다.


접근 방식을 간단하게 변경하면 코드를 더 깨끗하고 읽기 쉽게 작성할 수 있습니다. for 루프를 사용할 때 코드를 정신적으로 구문 분석하고 한 줄씩 실행해야 하기 때문에 맵은 더 높은 수준에서 빠르게 해석 할 수 있는 것이기 때문에 두 번째 예제를 읽은 후의 인지 부하는 첫 번째 예제보다 상당히 낮습니다.


이런 식으로 코드를 작성하면 얻을 수 있는 또 다른 이점은 데이터를 거쳐야 하는 변환 또는 단계에 대해 생각하기 시작한다는 것입니다.


authenticateUser(usrname, pwd, (err, isAuth) => {
    if(err) return dealWithYourErrors(err);
    if(!isAuth) return dealWithUnauthorizedAccess(usrname);
    getSessionToken(usrname, (err, token) => {
        if(err) return dealWithYourErrors(err);
        loadUserDetails(usrname, (err, details) => {
            if(err) retun dealWithYourErrors(err);
            let user = new User(usrname, token, details);
            performAction(user, (err, result) => { //this is what you wanted to do all along
                if(err) return dealWithYourErrors(err);
                sendBackResponse(result);
            })
        })
    })
})

위의 내용은 중첩 된 콜백의 전형적인 예입니다. 여기에는 다른 서비스에서 가져와야 하는 몇 가지 정보가 있습니다 (또는 다른 논리로 인해 다른 단계로).


기본적으로 콜백을 사용하면 비동기 동작을 직렬로 처리 할 수 있으며 이 경우에는 이상적이지 않습니다. getSessionToken과 loadUserDetails는 작업을 수행하기 위해 서로의 결과를 요구하지 않기 때문에 병렬로 수행 될 수 있습니다.


안타깝게도 async.js 사용 또는 자체 로직 작성과 같은 추가 코드가 필요합니다.


또한 코드의 전체 구조는 오류를 처리하는 방법과 일련의 호출을 처리하는 방법을 명시 적으로 명시한다는 점에서 필수적입니다. 귀하 (이 작업을 수행하는 개발자)는 올바른 동작을 위해 이러한 단계를 작성하면서 작성해야 합니다.


promise 기반 접근 방식을 작성하는 방법을 보여 드리겠습니다.


authenticateUser(username, pwd)
    .then( preActions )
    .then( performAction )
    .catch(dealWithYourErrors);

글을 읽고 읽는 것이 훨씬 간단하다는 데 모두 동의 할 수 있습니다. 약속을 모두 반환 해야 하기 때문에 이러한 함수의 모의 구현을 보여 드리겠습니다.


function authenticateUser(usr, pwd){ //main function called by the developer
    return new Promise( (resolve, reject) => {
        //auth logic goes here...
        resolve(usr); //assuming usr and pwd are valid...
    })
}
/** once logged in, we'll need to get the session token and load the user's details
*/
function preActions(usrname) { 
    return Promise.all([getSessionToken(usrname), loadUserDetails(usrname)]);
}

function getSessionToken(usrname) {
    return new Promise( (resolve, reject) => {
        //logic for getting the session token
        resolve("11111")
    })
}
function loadUserDetails(usrname) {
    return new Promise( (resolve, reject) => {
        //here is where you'd add the logic for getting the user's details
        resolve({name: 'Fernando'});
    })
}
function performAction() {
    //the actual action: we're just logging into stdout the arguments recevied
    console.log(arguments);
}
function dealWithYourErrors(err) {
    console.error(err);
}

위 코드의 주요 내용은 다음과 같습니다.

  • preActions는 기본 Promise 오브젝트의 all 메소드를 사용하여 두 함수를 병렬로 호출합니다. 그들 중 하나라도 실패하면 (따라서 각각의 Promise을 거부하면) 전체 세트가 실패하고 catch 메소드가 호출됩니다.
  • 다른 사람들은 단순히 Promise을 돌려주고 있습니다

위의 예는 내가 다루고 싶은 첫 번째 방법으로의 완벽한 전환입니다.:all



페이지 정보

조회 56회 ]  작성일19-08-07 17:26

웹학교