美文网首页
promise.all 练习

promise.all 练习

作者: 糖醋里脊120625 | 来源:发表于2019-06-27 10:45 被阅读0次
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.3, minimum-scale=1.0">
        <title>入库接收</title>
        <link rel="stylesheet" href="./css/index.css">
        <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
    </head>
    <body>
        <div id="app">

        </div>
        <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
        <script src="https://unpkg.com/vue-resource@1.5.1/dist/vue-resource.js"></script>
        <script>
            function promiseAll(promises) {
                return new Promise(function(resolve, reject) {
                    if (!Array.isArray(promises)) {
                        return reject(new TypeError("argument must be anarray"))
                    }
                    var countNum = 0;
                    var promiseNum = promises.length;
                    var resolvedvalue = new Array(promiseNum);
                    for (var i = 0; i < promiseNum; i++) {
                        (function(i) {
                            Promise.resolve(promises[i]).then(function(value) {
                                countNum++;
                                resolvedvalue[i] = value;
                                if (countNum === promiseNum) {
                                    return resolve(resolvedvalue)
                                }
                            }, function(reason) {
                                return reject(reason)
                            })

                        })(i)
                    }
                })
            }

            var p1 = Promise.resolve(1),
                p2 = Promise.resolve(2),
                p3 = Promise.resolve(3);

            promiseAll([p1, p2, p3]).then(function(value) {
                console.log(value)
            })
        </script>

        <script>
            let request = (name, time) => {
                console.log(name)
                console.log(time)
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        let random = Math.random()
                        console.log(random)
                        if (random >= 0.2) {
                            resolve(`${name}成功了`)
                        } else {
                            reject(`${name}失败了`)
                        }
                    }, time)
                })
            }

            //构建三个Promise实例
            let a = request('小明', 1000)
            let b = request('小红', 500)
            let c = request('小华', 1500)

            //使用Promise.all(), 注意它接收的是一个数组作为参数 
            Promise.all([b, a, c]).then(result => {
                console.log(result)
            }).catch(result => {
                console.log(result)
            })
        </script>

        <script>
            //链接地址:http://www.php.cn/js-tutorial-407347.html
            const httpUrl = 'http://39.105.17.99:8080/'
            function promiseFun(url, params) {
                console.log(url)
                console.log(params)
                return new Promise((resolve, reject) => {
                    axios("wwww." + url, params).then(
                        (res) => {
                            resolve(res.json())
                        },
                        (err) => {
                            reject(err.json())
                        }
                    )
                })
            }
            var p1 = Promise.resolve(1)
            var p2 = Promise.resolve(2)
            var p3 = Promise.resolve(3)
            Promise.all([promiseFun(httpUrl,{single:"single"}), p1, p2, p3]).then((res) => {
                console.log(res, 'promise all 方法')
            })
        </script>
    </body>
</html>

相关文章

网友评论

      本文标题:promise.all 练习

      本文链接:https://www.haomeiwen.com/subject/blelcctx.html