Bagaimana untuk melaksanakan Promise berulang kali dalam fungsi async?

Question

Saya sedang belajar janji dan async menanti, di sini saya mahu memanggil fungsi addPost dan menolak objek dua kali, kemudian saya mahu menggelung melalui tatasusunan objek untuk melihat hasilnya, tetapi dalam kod ini hasilnya tidak seperti dijangka. Di sini, apabila kod dilaksanakan pada fungsi showDetails(), ia hanya menunjukkan 3 objek apabila terdapat empat objek, apakah yang saya hilang di sini?

const posts = [{ tajuk: 'Siaran 1' }, { tajuk: 'Siaran 2' }];
kiraan var = 3;

const diffFunction = tak segerak () =>
    const addPost = Janji baharu((selesaikan, tolak) => {
        setTimeout(() => {
            posts.push({ tajuk: `Catatan ${count}` });
            kira++;
            menyelesaikan (kira);
        }, 1000)
    })
    const deletePost = Janji baharu((res, rej) => {
        setTimeout(() => {
            const deltedPost = posts.pop();
            res(deltedPost);
        }, 2000)
    })

    const showDetails = () =>
        posts.forEach(elemen => {
            console.log(element.title);
        });
    }
    tunggu addPost;
    tunggu addPost;
    showDetails();
}
diffFunction();

Answer 1

Di sini, addPost anda bukan fungsi janji. Itulah sebabnya apabila anda menulis "tunggu addPost" nampaknya pembolehubah addPost dimulakan semula. Agar ini berfungsi, anda perlu memanggil fungsi janji. Dengan cara ini ia akan melaksanakan kerja janji selepas anda memanggilnya.

Berikut ialah kod anda yang diubah suai

const posts = [{ title: 'Post 1' }, { title: 'Post 2' }];
var count = 3;

const diffFunction = async () => {
    const addPost = () => new Promise((resolve, reject) => {
        setTimeout(() => {
            posts.push({ title: `Post ${count}` });
            count++;
            resolve(count);
        }, 1000)
    });
    
    const deletePost = () => new Promise((res, rej) => {
        setTimeout(() => {
            const deltedPost = posts.pop();
            res(deltedPost);
        }, 2000)
    });

    const showDetails = () => {
        posts.forEach(element => {
            console.log(element.title);
        });
    }
    
    
    await addPost();
    await addPost();
    showDetails();
}
diffFunction();

Jika ini jelas kepada anda, sila beritahu saya.

Terima kasih

Answer 2

Apabila anda menggunakan kod new Promise()创建一个promise时，它会立即开始运行。你可以通过在控制台中运行类似于new Promise(() => { console.log("hello") }) untuk menguji ini - anda sepatutnya melihat log dengan serta-merta.

Anda boleh mencapai tingkah laku yang anda inginkan dengan menentukan fungsi yang mengembalikan Janji baharu. Dengan cara ini, janji anda hanya akan dijalankan apabila fungsi dipanggil, dan setiap panggilan fungsi akan mengembalikan Janji yang berbeza.

const posts = [{ title: 'Post 1' }, { title: 'Post 2' }];
var count = 3;

const addPost = () => new Promise((resolve, reject) => {
    setTimeout(() => {
        posts.push({ title: `Post ${count}` });
        count++;
        resolve(count);
    }, 1000)
})

const deletePost = () => new Promise((res, rej) => {
    setTimeout(() => {
        const deltedPost = posts.pop();
        res(deltedPost);
    }, 2000)
})

const showDetails = () => {
    posts.forEach(element => {
        console.log(element.title);
    });
}

const diffFunction = async () => {
    await addPost();
    await addPost();
    showDetails();
}

diffFunction();