es6之Promise(-)

Promise实战：批量请求与数据处理

最新推荐文章于 2025-09-10 09:07:54 发布

weixin_30917213

最新推荐文章于 2025-09-10 09:07:54 发布

阅读量75

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/xqzi/p/10475475.html

本文通过实例讲解Promise的基本使用，包括如何利用Promise处理单个和多个接口请求，展示了Promise.all和Promise.race的功能，同时介绍了如何封装Promise简化代码。

promise初使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
        let createPromise=new Promise((resolve,reject)=>{
            $.ajax({
                url:'./ajax.json',// 同级目录下新建一个json文件用以访问
                dataType:'json',
                success(data){
                    resolve(data)
                },
                error(err){
                    reject(err)
                }
            })
        });
        createPromise.then((data)=>{
            console.log(data)
        },(err)=>{
            console.log(err)
        })
    </script>
</html>

一个接口的请求当然看不出Promise的优点请求多个接口试试这里所需要的就是Promise.all

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
        let createPromise=new Promise((resolve,reject)=>{
            $.ajax({
                url:'./ajax.json',// 同级目录下新建一个json文件用以访问
                dataType:'json',
                success(data){
                    resolve(data)
                },
                error(err){
                    reject(err)
                }
            })
        });
        let createPromise1=new Promise((resolve,reject)=>{
            $.ajax({
                url:'./all.json',// 同级目录下新建一个json文件用以访问
                dataType:'json',
                success(data){
                    resolve(data)
                },
                error(err){
                    reject(err)
                }
            })
        });
        Promise.all([
            createPromise,createPromise1
        ]).then((result)=>{
            // 全部成功执行
            let [res1,res2]=result;
            console.log(res1,res2)
        },(err)=>{
            console.log(err)
        })
    </script>
</html>

这里新建了两个promise 对象如果多的话这样很麻烦我们这里在封装一下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
        function myPromise(url) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url,
                    dataType: 'json',
                    success(data) {
                        resolve(data)
                    },
                    error(err) {
                        reject(err)
                    }
                })
            });
        }
        Promise.all([
            myPromise('./ajax.json'), myPromise('./all.json')
        ]).then((result) => {
            let [res1, res2] = result;
            console.log(res1, res2)
        }, (err) => {
            console.log(err)
        })
    </script>
</html>

我们接下来看这个代码输出的结果是什么

let p = $.ajax({
            url: './all.json',
            dataType: 'json'
        })
        console.log(p)

高版本的jq的ajax 才有这个哟所以我们接下来可以这样写，不需要自己建立Promise 输出结果完全一样

function myPromise(url) {
            return $.ajax({
                url,
                dataType: 'json'
            })
        }
        Promise.all([
            myPromise('./ajax.json'), myPromise('./all.json')
        ]).then((result) => {
            let [res1, res2] = result;
            console.log(res1, res2)
        }, (err) => {
            console.log(err)
        })

再介绍一个race 请求多个最先返回的就是我们使用的数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>


        function myPromise(url) {
            return $.ajax({
                url,
                dataType: 'json'
            })
        }
        Promise.race([
            myPromise('./ajax.json'), myPromise('./all.json')
        ]).then((result) => {
            let res1 = result;
            console.log(res1)
        }, (err) => {
            console.log(err)
        })
    </script>
</html>