JS Async / Await vs Promise vs Callbacks

Question

Я пытаюсь понять разницу между этими 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в этом же контексте! благодаря

Answer 1

asyncи awaitинструменты для управления обещаниями

await post(4);

Здесь вы ждете, когда обещание, возвращенное пользователем, postбудет выполнено.

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

Однако post не возвращает обещание , поэтому не делает ничего полезного.

Раньше у вас была рабочая реализация postс обещанием. Так что используйте это:

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

Answer 2

Ваши попытки использовать asyncи awaitне использовать ничего, что разрешает обещание после задержки . В его нынешнем виде все asyncфункции, которые вы определили, возвращают обещание, которое немедленно выполняется.

Вы захотите использовать служебную функцию, которую можете часто использовать. Он возвращает обещание, которое разрешается через заданное количество миллисекунд, используя setTimeout:

// utility function
let delay = ms => new Promise(resolve => setTimeout(resolve, ms));

let array = [1, 2, 3];

async function get() {
    await delay(1000);
    console.log(array);
}

async function post(item) {
    await delay(1000);
    array.push(item)
}

async function init() {
    await post(4);
    await get();
}

init();
console.log("wait for it...");

Answer 3

Подобно тому, что вы сделали в PROMISE .

Оберните post setTimeout в обещание и верните его.
разрешение вызова внутри тела settimeout.

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

тогда вы можете использовать это так:

async function init() {
    await post(4);
    get();
    }

---