Promise 的简单例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="msg1"></p>
    <p id="msg2"></p>
    <p id="msg3"></p>
</body>
<style>
    p{width: 100px;height: 20px;display: flex;align-items: center;background-color: azure;}
</style>
<script>

    // resolve 成功执行的回调,reject 失败执行的回调
    // Promise ajax异步操作
    function prom(URL) {
        var test = new Promise(function (resolve, reject) {
            var ajax = new XMLHttpRequest();
            ajax.open("GET", URL, true)
            ajax.onreadystatechange = function () {
                if (ajax.status === 200) {
                    resolve(JSON.parse(ajax.responseText));
                }else{
                    reject(ajax.status)
                }
            }
            ajax.onerror = function () { // 当 request 遭遇错误时触发。
                reject("加载失败")
            }
            ajax.send();
        })
        return test;
    }
    prom('https://anapioficeandfire.com/api/books').then(function (data) {
        console.log(data)  // resolve
    }).catch(function (reason) {
        console.log(reason)  // reject
    })

    
    var msg1 = document.querySelector('#msg1');
    var msg2 = document.querySelector('#msg2');
    var msg3 = document.querySelector('#msg3');
    // Promise
    function p1(){
            var test1 = new Promise(function (resolve, reject) {
                setTimeout(function(){
                    resolve('11111')
                    console.log('1结束')
                },3000)
            });
            return test1;
    }
    function p2(){
            var test2 = new Promise(function (resolve, reject) {
                setTimeout(function(){
                    resolve('22222')
                    console.log('2结束')
                },1000)
            });
            return test2;
    }
    function p3(){
            var test3 = new Promise(function (resolve, reject) {
                setTimeout(function(){
                    resolve('33333')
                    console.log('3结束')
                },5000)
            });
            return test3;
    }

    // .then方法的链式操作 上一个then方法return返回的内容是下一个then方法的参数
    // p1().then(function(data){
    //     console.log(data)
    //     return (Number(data) + 1);
    // }).then(function(num){
    //     console.log(num)
    //     return num;
    // }).then(function(age){
    //     console.log(age + '岁')
    // })

    // all方法,在所有异步操作执行完后才执行回调 (谁跑的慢，以谁为准执行回调)
    // 全部运行完后,输出三个方法的 resolve
    Promise.all([p1(),p2(),p3()]).then(function(results){
        console.log(results,123)
        msg1.innerHTML = results[0];
        msg2.innerHTML = results[1];
        msg3.innerHTML = results[2];
    })

    // race方法,在所有异步操作执行完后才执行回调 (谁跑的快，以谁为准执行回调)
    // 只输出运行最快的方法的 resolve
    // Promise.race([p1(),p2(),p3()]).then(function(results){
    //     console.log(results)
    // })
</script>

</html>