js的promise用法

js的promise

谦虚且进步

6455人浏览 · 2022-07-29 19:29:06

谦虚且进步 · 2022-07-29 19:29:06 发布

js中的promise是一个异步编程的解决方案，语法层面上他是一个构造函数，名字为Promise()。

他的作用就是将一个任务task封装为一个Promise类的实例对象，这个对象会将任务自动运行并得到任务结果，而且在得到结果的过程中并不会影响到其他任务的进行。由此实现多个任务的并发进行。

实现异步的过程被隐藏在Promise类的实现过程中，我们只需要将任务交给Promise，Promise给我们一个instance，之后通过instance去拿任务结果就可以了。我们可以创建多个Promise类的实例instance。

下面将介绍Promise用法的一般代码写法。

1，Promise构造函数参数介绍

2，Promise实例对象的then()方法

3，异步加载图片的例子

4，Ajax实操

1，Promise构造函数参数介绍

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。resolve和reject是两个函数，由JavaScript引擎提供，不用自己部署。

//resolve, reject名称不能修改
const promise = new Promise(function(resolve, reject) {
    // ...some code
    if ( /*异步操作成功，执行resolve方法，目的一般是将某些结果返回出去*/ ) {
        resolve(value);
    } else {
        /*异步操作失败，执行reject方法，目的一般也是将某些结果返回出去*/
        reject(error);
    }
});

2，Promise实例对象的then()方法

Promise 实例生成以后，可以用then方法分别指定resolved状态和rejected 状态的回调函数。也就是对返回的任务结果进行处理。

promise.then(resolved = function(value) {
        // success，对返回的结果value进行处理
    },
    rejected = function(error) {
        //failure，直接把错误类型报给用户
    });

3，异步加载图片的例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>异步加载图片</title>
</head>

<body>
    <div id="box"></div>
    <script>
        box = document.getElementById('box');

        function loadImageAsync(url) {
            /*创建一个image资源对象，因为要网络请求，比较消耗时间***********************/
            function task(resolve, reject) {
                const image = new Image();
                image.src = url;
                //onload等于true
                image.onload = function() {
                    resolve(image);
                };
                //onerror等于false
                image.onerror = function() {
                    reject(new Error(' could not load image at ' + url));
                };

            }
            return new Promise(task);
        }

        promise = loadImageAsync('https://pan.baidu.com/box-static/disk-theme/theme/white/img/logo@2x.png');
        promise.then(
            function(data) {
                box.appendChild(data);
            },
            function(error) {
                box.innerHTML = '图片加载失败';
                console.log(error);
            }
        )
    </script>
</body>

</html>

4，Ajax实操

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax实操</title>
</head>

<body>
    <div id="box"></div>
    <script>
        box = document.getElementById('box');

        function GETJSON(url) {
            /*************************************************************/
            function ajaxTask(resolve, reject) {
                const handler = function() {
                    if (this.readystate !== 4) {
                        return;
                    }
                    if (this.status === 200) {
                        resolve(this.response);
                    } else {
                        reject(new Error(this.statusText));
                    }
                };
                const client = new XMLHttpRequest();
                client.open("GET", url);
                client.onreadystatechange = handler;
                client.responseType = "json";
                client.setRequestHeader("Access-Control-Allow-Origin", "*");
                client.send();
            }
            /*************************************************************/
            return new Promise(ajaxTask);
        };
        /*************************************************************/
        promise = GETJSON("https://www.hupu.com/home/v1/news?pageNo=4&pageSize=50");//出现ajax无法跨域的问题，目前还不会解决

        promise.then(
            function(data) {
                console.log(data);;
            },
            function(error) {
                box.innerHTML = '加载失败';
                console.log(error);
            }
        )
    </script>

</body>

</html>