Wie führe ich Promise wiederholt in einer asynchronen Funktion aus?

Question

Ich lerne Promise und Async Wait, hier möchte ich die Funktion addPost aufrufen und ein Objekt zweimal pushen, dann möchte ich das Objektarray durchlaufen, um das Ergebnis zu sehen, aber in diesem Code ist das Ergebnis nicht so erwartet. Wenn der Code hier die Funktion showDetails() ausführt, zeigt er nur drei Objekte an, obwohl es vier Objekte sein sollten. Was fehlt mir hier?

const posts = [{ title: 'Post 1' }, { title: 'Post 2' }];
Var-Anzahl = 3;

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

    const showDetails = () =>
        posts.forEach(element => {
            console.log(element.title);
        });
    }
    warte auf addPost;
    warte auf addPost;
    zeige Details();
}
diffFunction();

Answer 1

在这里，你的addPost不是一个promise函数。这就是为什么当你写了"await addPost"时，它看起来像是重新初始化了变量addPost。为了使它工作，你需要调用promise函数。这样，在你调用之后它将执行promise工作。

以下是你修改过的代码

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();

如果这对你来说清楚，请告诉我。

谢谢

Answer 2

当你使用new Promise()创建一个promise时，它会立即开始运行。你可以通过在控制台中运行类似于new Promise(() => { console.log("hello") })的代码来测试这一点 - 你应该立即看到一个日志。

你可以通过定义一个返回新Promise的函数来实现你想要的行为。这样，只有在调用该函数时，你的promise才会运行，而每次函数调用都会返回一个不同的Promise。

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();