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

雨点打透心脏的1/2处 2021-12-13 04:20 273阅读 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>