ES6基础知识（Promise 对象）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Promise对象</title>
</head>
<body>
    <script src="./jquery-3.2.1.min.js"></script>
    <script>
        /*基础结构*/
        // const promise = new Promise(function(resolve, reject) {
        //     // ... some code

        //     if (/* 异步操作成功 */){
        //         resolve(value);
        //     } else {
        //         reject(error);
        //     }
        // });

        // promise.then(function(value) {
        //     // success
        // }).catch(function(error){
        //     // failure
        // });

        /*加载图片*/
        // let url = `http://img.365jia.cn/uploads/news/folder_1230109/images/.662ba73c54c07708125743075da95466t2048l90.jpg`;

        // function loadImgUrl(url){
        //     return new Promise((resolve,reject) => {
        //         const imgUrl = new Image();

        //         imgUrl.onload = function(){
        //             return resolve(imgUrl);
        //         }

        //         imgUrl.onerror = function(){
        //             return reject(new Error('不能加载该地址图片' + url));
        //         }

        //         imgUrl.src = url;

        //     });
        // }

        // loadImgUrl(url).then((res) => {
        //     console.log(res);
        // }).catch((error) => {
        //     console.log(error);
        // });

        /*ajax封装*/
        // const getAjax = (option) => {
        //     return new Promise((resolve,reject) => {
        //         $.ajax({
        //             url:option.url,
        //             type:option.methods,
        //             success:(res) => {
        //                 resolve(res)
        //             },
        //             fail:(error) => {
        //                 reject(error)
        //             }                
        //         });
        //     });            
        // } 

        // let option = {
        //     url:`https://www.easy-mock.com/mock/5b62549fbf26d2748cff3cf4/dashuju/visualize`,
        //     methods:'GET'
        // }

        // let g1 = getAjax(option).then((res) => {
        //     console.log(res);
        // }).catch((error) => {
        //     console.log(error);
        // });

        /*一个异步操作的结果是返回另一个异步操作*/
        // let g2 = new Promise((resolve,reject) => {
        //     resolve(g1);//这里把g1对象作为参数
        // });

        // g2.then(() => {//then要等g1执行完成之后才能执行
        //     console.log(111);
        // });

        /*finally方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的*/
        // promise .then(result => {···}).catch(error => {···}).finally(() => {···});        

        /*Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例*/
        // const pResolve = Promise.all([p1, p2, p3]);//只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数
        // const pReject = Promise.all([p1, p2, p3]);//只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数

        // // 生成一个Promise对象的数组
        // const promises = [2, 3, 5, 7, 11, 13].map(function (id) {
        //     return getJSON('/post/' + id + ".json");
        // });

        // Promise.all(promises).then(function (posts) {
        //     // ...
        // }).catch(function(reason){
        //     // ...
        // });//promises是包含 6 个 Promise 实例的数组，只有这 6 个实例的状态都变成fulfilled，或者其中有一个变为rejected，才会调用Promise.all方法后面的回调函数

        /*Promise.race方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例*/
        // const p = Promise.race([p1, p2, p3]);//只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数

        /*对象转为 Promise 对象，Promise.resolve方法*/
        // Promise.resolve('foo')
        // // 等价于
        // new Promise(resolve => resolve('foo'))

        /*
        （1）参数是一个 Promise 实例，如果参数是 Promise 实例，那么Promise.resolve将不做任何修改、原封不动地返回这个实例。

        （2）参数是一个thenable对象，thenable对象指的是具有then方法的对象

            let thenable = {
                then: function(resolve, reject) {
                    resolve(42);
                }
            };

            let p1 = Promise.resolve(thenable);
                p1.then(function(value) {
                console.log(value);  // 42
            });

        （3）参数不是具有then方法的对象，或根本就不是对象
        
            const p = Promise.resolve('Hello');

            p.then(function (s){
                console.log(s)// Hello
            });

        （4）不带有任何参数

            const p = Promise.resolve();

            p.then(function () {
                // ...
            });

        */        

    </script>
</body>
</html>
ES6基础知识（Promise 对象）

猜你喜欢
