es6之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>

 

posted @ 2019-03-05 11:11  善良的小邱子  阅读(406)  评论(0)    收藏  举报