Promise common API usage and analysis

1. Example method :

 <script>
        //Promise常用API-实例方法
        // console.dir(Promise);
        function foo() {
            return new Promise(function(resolve, reject) {
                setTimeout(function() {
                    // resolve(123);
                    reject('error');
                }, 100);
            })
        }
        // foo()
        //   .then(function(data){
        //     console.log(data)
        //   })
        //   .catch(function(data){
        //     console.log(data)
        //   })
        //   .finally(function(){
        //     console.log('finished')
        //   });

        // --------------------------
        // 两种写法是等效的
        foo()
            .then(function(data) {
                console.log(data)
                //正常情况打印
            }, function(data) {
               //异常情况打印
                console.log(data)
            })
            .finally(function() {
                console.log('finished')
            });
        //finally的作用：不管前面的异步任务是成功了还是失败了都会触发 可以做一些提示 或者销毁资源
    </script>

The result :

---

2. Object methods :

<script>
        var queryData = function(url) {
            return new Promise(function(resolve, reject) {
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState != 4) return;
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        //处理正常情况
                        resolve(xhr.responseText);
                    } else {
                        //处理异常情况
                        reject('服务器错误');
                    }
                };
                xhr.open('get', url);
                xhr.send(null);
            })
        }

        var p1 = queryData('http://localhost:3000/a1');
        var p2 = queryData('http://localhost:3000/a2');
        var p3 = queryData('http://localhost:3000/a3');

        Promise.all([p1, p2, p3]).then((result) => {
            console.log(result);
            //全部返回 左右任务都执行完才能得到结果
        })
        Promise.race([p1, p2, p3]).then((result) => {
            console.log(result);
            //返回最先出来的那个  只要一个任务完成就能得到结果
        })
    </script>

The result :