初识Promise对象、构建一个Promise、Promise实例运用

最新推荐文章于 2022-11-14 16:16:29 发布

&XYZ&

最新推荐文章于 2022-11-14 16:16:29 发布

阅读量365

点赞数 1

分类专栏： ES6

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/95861006

版权

ES6 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!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="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        const usersPromise = axios.get('https://api.github.com/user');
        let username;

        /*
        then()的作用是监听usersPromise，成功就执行then()里面的代码。
        
        catch() 方法返回一个Promise，并且处理拒绝的情况。
        */
        usersPromise
            .then(reponse => {
                username = reponse.data[0].login;
                return axios.get(`https://api.github.com/users/${username}/repos`);
            })
            .then(reponse => {
                console.log(reponse.data);
            })
            .catch(err=>{//错误打印
                console.log(err);
            })

    </script>


</body>

</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>
        /*
        简单构建一个Pormise

        Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。
        它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

        resolve:代表成功
        reject：代表失败
        */

        //成功的操作
        const p = new Promise((resolve,reject)=>{
            resolve('成功后的操作');
            reject('失败后的操作');
        });

        p.then(data=>{
            console.log(data)//成功后的操作
        })
        .catch(err=>{
            console.error(err)//失败后的操作
        });


         //失败的操作,并且知道是那一行代码执行失败了
        const p1 = new Promise((resolve,reject)=>{
            // resolve('成功后的操作');
            reject(Error('失败后的操作'))
        });

       
        p1.then(data=>{
            console.log(data)//成功后的操作
        })
        .catch(err=>{
            console.error(err)//失败后的操作
        });
        
    </script>
</body>

</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>
        const repos = [
            { name: 'Web', owner: 'xyz', description: 'Front-end developer', id: 1 },
            { name: 'teacher', owner: 'LM', description: 'The gardener in the garden', id: 2 },
        ];

        const owners = [
            { name: 'xyz', location: 'Hangzhou', followers: 123 },
            { name: 'LM', location: 'Hangzhou', followers: 123789 },
        ];

        function getRepoById(id) {
            return new Promise((reslove, reject) => {
                setTimeout(() => {
                    const repo = repos.find(repo => repo.id === id);
                    if (repo) {
                        reslove(repo);
                    } else {
                        reject(Error('NO repo found.'))
                    }
                }, 2000)

            })
        }

        function comboundOwner(repo) {
            return new Promise((reslove, reject) => {
                const owner = owners.find(owner => owner.name === repo.owner);
                if (owner) {
                    repo.owner = owner;
                    reslove(repo);
                } else {
                    reject(Error('Can not found the owner.'))
                }
            })
        }

        getRepoById(1)
            .then(repo => console.log(repo))//{name: "Web", owner: "xyz", description: "Front-end developer", id: 1}


        /*
        comboundOwner函数和getRepoById函数连在一起用
        */
        getRepoById(1)
            .then(repo => {
                return comboundOwner(repo);
            })
            .then(repo => {
                console.log(repo);
            })
    </script>
</body>

</html>

&XYZ&

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识Promise对象、构建一个Promise、Promise实例运用

<!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...
复制链接

扫一扫