//使用ajax分别获取用户名、第一个用户的用户名、第一个用户的repo
//结果发现返回顺序不确定
<script type="text/javascript">
    let user;
    $.get('http://api.github.com/users',data => {
        console.log('fetch all users');
        user = data[0].login;
    });
    $.get('http://api.github.com/users/${user}/repos',data => {
        console.log('fetch user repos');
        console.log(data);
    })
</script>

//嵌套写法，将第二个请求写在第一个回调函数里
//但是当嵌套层很多时，依赖很多，回调地狱
<script type="text/javascript">
    let user;
    $.get('https://api.github.com/users',data => {
        console.log('fetch all users');
        user = data[0].login;

        $.get('https://api.github.com/users/${user}/repos',data => {
            console.log('fetch user repos');
            console.log(data);
        });
    }); 
</script>

//promise解决了不确定性和回调地狱
//.then()相当于一种监听，当事件成功之后再执行
<script type="text/javascript">
    let username;
    const userPromise = axios.get('https://api.github.com/users');  
    userPromise
        .then(response => {
            username = response.data[0].login;
            return axios.get('https://api.github.com/users/${username}/repos');
        })
        .then(response => {
            console.log(response.data);
        })
        .catch(err => {
            console.error(err);      //返回错误信息
        })
</script>

• 构建Promise，异步实例

<script type="text/javascript">
    const repos = [
        {
            name: 'grit',
            owner: 'mojobo',
            description: 'Girt is no longer maintained',
            id: 1
        },
        {
            name: 'jsawesome',
            owner: 'vanpelt',
            description: 'Awesome JSON',
            id: 2
        },
        {
            name: 'merb-core',
            owner: 'wycats',
            description: 'Merb Core:All you need.None you don\'t.',
            id: 3
        }
    ];
    const owners = [
        {
            name: 'mojobo',
            location: 'san Francisco',
            followers: 123
        },
        {
            name: 'vanpelt',
            location: 'Bay Minette',
            followers: 1034
        },
        {
            name: 'wycats',
            location: 'Los Angeles,CA',
            followers: 388
        }
    ];

    function getRopoById (id) {
        return new Promise((resolve,reject) => {
            const repo = repos.find(repo => repo.id === id);
            if(repo) {
                resolve(repo)
            }else {
                reject(Error('No repo found'));
            }
        })
    }

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

    getRopoById(1)
        .then(repo => {
            return comboundOwner(repo);
        })
        .then(repo => {
            console.log(repo);          //{name: "grit", owner: {…}, description: "Girt is no longer maintained", id: 1}
        })
        .catch(err => {
            console.error(err)
        })
</script>

• 处理多个Promise实例 — Promise.all()

//Promise.all方法接受一个数组作为参数
<script type="text/javascript">
    const userPromise = new Promise((resolve,reject) => {
        resolve(['mojombo','vanpelt','wycats']);
    });
    const moviePromise = new Promise((resolve,reject) => {
        resolve({name: '摔跤吧！爸爸！',rating: 9.2,year: 2016});
    });

    Promise
        .all([userPromise,moviePromise])
        .then(response => {
            const [users,movie] = response;
            console.log(users);         //["mojombo", "vanpelt", "wycats"]
            console.log(movie);       //{name: "摔跤吧！爸爸！", rating: 9.2, year: 2016}
        })
        .catch(err => {
            console.error(err);
        })
</script>

//只有数组项中的每一个实例都resolve时，才会继续执行Promise.all的then方法；否则执行catch
<script type="text/javascript">
    const userPromise = new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve(['mojombo','vanpelt','wycats']);
        },2000);
    });
    const moviePromise = new Promise((resolve,reject) => {
        setTimeout(() => {
            //resolve({name: '摔跤吧！爸爸！',rating: 9.2,year: 2016});
            reject('No movie');
        },500);
    });

    Promise
        .all([userPromise,moviePromise])
        .then(response => {
            console.log(response);         //No movie
        })
        .catch(err => {
            console.error(err);
        })
</script>

• 处理多个Promise实例 — Promise.race

//参数同Promise.all()
//只要参数项中某一个实例率先改变状态，Promise的状态就会跟着改变
//这个例子中moviePromise的状态第一个改变，因此response返回movie值
<script type="text/javascript">
    const userPromise = new Promise((resolve,reject) => {
        setTimeout(() => {
            //resolve(['mojombo','vanpelt','wycats']);
            reject('No user');
        },2000);
    });
    const moviePromise = new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve({name: '摔跤吧！爸爸！',rating: 9.2,year: 2016});
        },500);
    });

    Promise
        .race([userPromise,moviePromise])
        .then(response => {
            console.log(response);         //{name: "摔跤吧！爸爸！", rating: 9.2, year: 2016}
        })
        .catch(err => {
            console.error(err);
        })
</script>