JS Async / Await vs Promise vs Callbacks

Sep 14 2020

이 3의 차이점을 이해하려고 노력하고 있습니다. 콜백 및 약속은 명확하지만 async / await의 사용법을 얻지 못합니다. 나는 그것이 약속의 통사론 적 설탕이라는 것을 알고 있지만 내가 시도한 것은 작동하지 않았습니다. 이 모든 것을 이해하려고 노력한 코드를 공유하고 있습니다.

나는 배열로 시도했다

var array = [1,2,3];

그리고 2 개의 기능

get() 1 초 만에 실행 및 콘솔 array
post(item) 2 초 안에 실행되고 새 항목을 array

자, 내가 얻고 싶은 것이 있다는 것입니다 post방법은 첫째 및 실행해야 get그렇게 콘솔에 결과가되어야한다고 후 [1,2,3,4]하지[1,2,3]

콜백

function get() {
    setTimeout(() => console.log(array), 1000);
}

function post(item, callback) {
    setTimeout(() => {
        array.push(item);
        callback();
    }, 2000);
}

function init() {
    post(4, get);
    // returns [1,2,3,4] ✅
}

잘 작동하지만 콜백이 너무 많으면 코드가 더 복잡해집니다 ... 그래서,

약속

function get() {
    setTimeout(() => console.log(array), 1000);
}

function post(item) {
    return new Promise((resolve, reject) => setTimeout(() => {
        array.push(item)
        resolve();
    }, 2000));
}

function init() {
    post(4).then(get);
    // returns [1,2,3,4] ✅
}

훨씬 더 깨끗한 코드로 좋습니다. 하지만 여전히 여러 번 then전화를 ... 이제,

비동기 / 대기

function get() {
    setTimeout(() => console.log(array), 1000);
}

function post(item) {
    setTimeout(() => {
        array.push(item)
    }, 2000);
}

async function init() {
    await post(4);
    get();
    // returns [1,2,3] ❌

    await post(4);
    await get();
    // returns [1,2,3] ❌

    post(4);
    await get();
    // returns [1,2,3] ❌
}

훨씬 더 깨끗한 버전이지만 어느 쪽도 효과가 없었습니다 ... 나는 또한 이것을 시도했습니다 (두 함수 ( post& get)를 비동기 로 변환 하고 호출 then)

async function get() {
    setTimeout(() => console.log(array), 1000);
}

async function post(item) {
    setTimeout(() => {
        array.push(item)
    }, 2000);
}

async function init() {
    post(4).then(get);
    // returns [1,2,3] ❌
}

그러나 여전히 소용이 없습니다. 그래서이 기능에 대해 완전히 혼란 스럽습니다 (즉, async / await). 바로이 예에 대해 자세히 설명해주세요. 그리고 이와 같은 맥락에서 Promise.resolve& Promise.all에 대해서도 알려주세요 ! 감사

답변

3 Quentin Sep 13 2020 at 22:35

async및 await도구입니다 약속을 관리

await post(4);

여기에서에서 반환 된 약속 post이 해결 되기를 기다리고 있습니다.

function post(item) {
    setTimeout(() => {
        array.push(item)
    }, 2000);
}

그러나 post 는 promise를 반환하지 않으므로 유용하지 않습니다.

post전에 약속 을 통해 의 작업을 구현했습니다 . 그래서 그것을 사용하십시오 :

function post(item) {
    return new Promise((resolve, reject) => setTimeout(() => {
        array.push(item)
        resolve();
    }, 2000));
}

2 trincot Sep 13 2020 at 22:38

귀하의 시도 async와는 await약속 해결 아무것도 사용하지 않는 지연 후를 . 그대로, async정의한 모든 함수는 즉시 해결되는 promise를 반환합니다.

자주 사용할 수있는 유틸리티 기능을 사용하고 싶을 것입니다. 다음을 사용하여 주어진 밀리 초 후에 해결되는 promise를 반환합니다 setTimeout.