프라미스: 타임아웃이 있는 프라미스 실행

약속에는 두 가지 상태가 있습니다. 보류 중 또는 해결됨(해결됨 또는 거부됨). 사용자는 첫 번째 상태에서 두 번째 상태로 이동하는 데 걸리는 시간을 제어할 수 없습니다. 이는 약속 친화적인 방식으로 너무 오래 걸릴 때 특정 약속을 구제하기 어렵게 만듭니다.

Promise.race() 구출.

Promise.race는 어떻게 작동합니까?

이 방법은 일련의 약속을 사용하며 이름에서 알 수 있듯이 두 상태에서 가장 먼저settled 되는 것이 승리합니다.

예시:

const resolveAfter = (duration, value) => new Promise((resolve, reject) => setTimeout(() => resolve(value), duration));

let first = resolveAfter(100, 'value from first');
let second = resolveAfter(200, 'value from second');

Promise.race([first, second]).then(console.log);
// logs 'value from first'

그리고 예상대로 오류에서도 작동합니다.

const resolveAfter = (duration, value) => new Promise((resolve, reject) => setTimeout(() => resolve(value), duration));
const rejectAfter = (duration, err) => new Promise((resolve, reject) => setTimeout(() => reject(err), duration));

let first = rejectAfter(100, new Error('oops in first'));
let second = resolveAfter(200, 'value from second');

Promise.race([first, second]).then(console.log).catch(console.error);
// logs: 'Error: oops in first'

Promise.race를 활용하여 시간을 다투는 약속 경쟁

첫 번째 구성 요소는 시간 초과 후에 해결되는 약속입니다. 우리는 이미 이전 예제에서 그것을 보았습니다.

두 번째는 특정 Error class이 우리가 기다리던 원래 약속이 아니라 거부된 시간 초과에서 왔는지 확인하는 것입니다.
다음과 같이 확장class하는 특정Error을 구현할 수 있습니다.

class TimeoutError extends Error {
    constructor(...args) {
        super(...args);
    }
}

const resolveAfter = (duration, value) => new Promise((resolve, reject) => setTimeout(() => resolve(value), duration));
const rejectAfter = (duration, err) => new Promise((resolve, reject) => setTimeout(() => reject(err), duration));

let first = rejectAfter(100, new TimeoutError('Timeout!'));
let second = resolveAfter(200, 'value from second');

Promise.race([first, second])
    .then(console.log)
    .catch((err) => {
        if (err instanceof TimeoutError) {
            // handleTimeoutError(err)
        } else {
            // handleOtherError(err)
        }
        console.error(err);
    });

// logs: Error: Timeout!

이 논리를 자체 모듈로 옮기고 다음과 같이 시간 초과 논리를 추상화하는 것을 상상할 수 있습니다.

// module: timeout.js

const rejectAfter = (duration, err) => new Promise((resolve, reject) => setTimeout(() => reject(err), duration));

export class TimeoutError extends Error {
    constructor(...args) {
        super(...args);
    }
}
export const withTimeout = (promise, timeout = 0) => {
    return Promise.race([promise, rejectAfter(100, new TimeoutError('Timeout!'))]);
};

// module: user.js

import { withTimeout, TimeoutError } from './timeout';

const resolveAfter = (duration, value) => new Promise((resolve, reject) => setTimeout(() => resolve(value), duration));

withTimeout(resolveAfter(200, 'value from my promise'), 100).then(console.log).catch(console.error);
// logs: Error: Timeout!
withTimeout(resolveAfter(100, 'value from my promise'), 200).then(console.log).catch(console.error);
// logs: value from my promise

결론

이 짧은 기사가 도움이 되었기를 바랍니다. Promise.race() 큰 사랑을 받지는 못하지만 활용했다
약속 사용자 사이의 일반적인 질문을 해결하기 위해.

의견이나 질문이 있으면 댓글에 남겨주세요. 하나하나 답변해 드리겠습니다.

그리고 팔로우도 잊지마세요🤗