Promise对象demo

最新推荐文章于 2023-11-15 17:07:06 发布

hr226

最新推荐文章于 2023-11-15 17:07:06 发布

阅读量120

点赞数

分类专栏： demo 文章标签： Promise对象demo

本文链接：https://blog.youkuaiyun.com/hr226/article/details/100704494

版权

demo 专栏收录该内容

21 篇文章

订阅专栏

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Promise的作用</title>
</head>
<body>
    <!-- <script src="./callback.js"></script> -->
    <script src="./promises.js"></script>
</body>
</html>

回调函数callback VS Promise对象

callback.js

/** 
 * 动态往DOM中添加内容
 * 回调
 */
const posts = [{
        title: "Post one",
        body: "this is post one"
    },
    {
        title: "Post two",
        body: "this is post two"
    },
];

function getPosts() {
    setTimeout(() => {
        let output = '';
        posts.forEach((post, index) => {
            output += `<li>${post.title}</li>`;
        })
        document.body.innerHTML = output;
    }, 1000)
}

// getPosts();
// console.log('test');

function createPost(post, callback) {
    setTimeout(() => {
        posts.push(post);
        // console.log(post);
        callback();
    }, 2000)
}

createPost({
    title: "Post Three",
    body: "this is post three"
}, getPosts);

promises.js

/** 
 * 动态往DOM中添加内容
 * 回调
 */
const posts = [{
        title: "Post one",
        body: "this is post one"
    },
    {
        title: "Post two",
        body: "this is post two"
    },
];

function getPosts() {
    setTimeout(() => {
        let output = '';
        posts.forEach((post, index) => {
            output += `<li>${post.title}</li>`;
        })
        document.body.innerHTML = output;
    }, 1000)
}

function createPost(post) {
    // 实例化promise对象
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            posts.push(post);

            const error = false;

            if (!error) {
                resolve();
            } else {
                reject("Error: something went wrong!");
            }
        }, 2000)
    })

}

// 1
/* createPost({
    title: "Post Three",
    body: "this is post three"
}).then(getPosts).catch(err => console.log(err)) */

// 3
// async / await
/* async function init() {
    await createPost({
        title: "Post Three",
        body: "this is post three"
    });
    getPosts();
}
init(); */

// 4
async function fetchUsers() {
    const res = await fetch("http://jsonplaceholder.typicode.com/users");
    const data = await res.json();
    console.log(data);
}
fetchUsers();

// 2
// Promise.all
/* const promise1 = Promise.resolve("Hello world");
const promise2 = Promise.resolve(20);
const promise3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 2000, "goodbye")
})

const promise4 = fetch("http://jsonplaceholder.typicode.com/users").then(res => res.json());

Promise.all([promise1, promise2, promise3, promise4]).then(values => {
    console.log(values)
}) */