Js Promise

最新推荐文章于 2025-02-21 10:26:38 发布

ThisIsSonic

最新推荐文章于 2025-02-21 10:26:38 发布

阅读量290

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/SOUIC/article/details/124158933

前端专栏收录该内容

8 篇文章

订阅专栏

Js Promise

形式

const p = new Promise((resolve, reject) => {
  if(true)
    resolve(); //将promise对象的状态设置为成功
  else 
    reject(); //将promise对象的状态设置失败
});

resolve 异步执行成功调用

reject 异步执行失败调用

以上两个参数都是函数类型的数据

p.then(() => {
	//成功执行
}, () => {
	//失败执行
});

试一手

<!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>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h1>Ajax</h1>
        <button class="btn btn-primary">点击发送请求</button>
    </div>

    <script>
        const btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://api.apiopen.top/getJoke');
            xhr.send();
            //readystate
            //0 为初始状态
            //1 表示open执行完毕
            //2 表示send执行完毕
            //3 表示服务端返回部分结果
            //4 表示服务端返回所有结果
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    //判断响应判断码 200 404...
                    //2xx都表示成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 响应行
                        console.log(xhr.status);//状态码
                        console.log(xhr.statusText);//状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体


                    } else {
                        console.log('Error');
                    }
                }
            }
        })
    </script>

</body>

</html>

以上为一般ajax的基础操作，然后我们来试试使用Promise封装一下

<!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>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h1>Ajax</h1>
        <button class="btn btn-primary">点击发送请求</button>
    </div>

    <script>
        const btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            const p = new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.open('GET', 'https://api.apiopen.top/getJoke');
                xhr.send();

                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {

                        if (xhr.status >= 200 && xhr.status < 300) {
                            resolve(xhr.response);
                        } else {
                            reject(xhr.status)
                        }
                    }
                }
            });
            p.then(val => {
                console.log(val);
            }, err => {
                console.warn(err);
            })
        });


    </script>

</body>

</html>

当然啊，这样看着很乱，所以我们可以封装一手，下面就只写js代码了

function sendAjax(url) {
    return new Promise((resolve, reject) => {
        const x = new XMLHttpRequest();
        x.responseType = 'json'; // 设置响应体为JSON格式
        x.open('GET', url);
        x.send();
        x.onreadystatechange = function () {
            if (x.readyState === 4) {
                if (x.status >= 200 && x.status < 300) {
                    resolve(x.response);
                } else {
                    reject(x.status);
                }
            }
        }
    });
}

// 直接调用
sendAjax('https://api.apiopen.top/getJoke').then(val => {
    console.log(val);
}, err => {
    console.log(err);
})

Promise的状态

实例对象的一个属性「promiseState」

这个属性有三个状态

Pending 未决定的（默认状态）
Resolved / Fulfilled 成功
Rejected 失败

状态的变换有且只有两种Pending->Resolved和Pending->Rejected而且只能变换一次

实例对象的一个属性「promiseResult」

保存着异步请求成功或者失败的结果

只有resolve和reject能修改，当然强行throw也可以

手撕Promise

function Promise(excutor) {

    this.PromiseState = 'pending';
    this.PromiseResult = null;

    this.callbacks = [];

    const self = this;

    function resolve(data) {
        if (self.PromiseState !== 'pending') return;
        self.PromiseState = 'fullfilled';
        self.PromiseResult = data;

        setTimeout(() => {
            self.callbacks.forEach(item => {
                item.onResolved(data);
            })
        })
    }

    function rejected(data) {
        if (self.PromiseState !== 'pending') return;
        self.PromiseState = 'rejected';
        self.PromiseResult = data;

        setTimeout(() => {
            self.callbacks.forEach(item => {
                item.onRejected(data);
            })
        })
    }

    try {
        excutor(resolve, rejected);
    } catch (error) {
        rejected(error)
    }

}

Promise.prototype.then = function (onResolved, onRejected) {
    const self = this;

    if (typeof onRejected !== 'function') {
        onRejected = reason => {
            throw reason;
        }
    }

    if (typeof onResolved !== 'function') {
        onResolved = value => value;
    }

    return new Promise((resolve, rejected) => {

        function callback(type) {
            try {
                let result = type(self.PromiseResult);
                if (result instanceof Promise) {
                    result.then(v => {
                        resolve(v);
                    }, e => {
                        rejected(e);
                    })
                } else {
                    resolve(result);
                }
            } catch (e) {
                rejected(e);
            }
        }

        if (this.PromiseState === 'fullfilled') {
            setTimeout(() => { callback(onResolved); })

        }

        if (this.PromiseState === 'rejected') {
            setTimeout(() => { callback(onRejected); })
        }

        if (this.PromiseState === 'pending') {

            this.callbacks.push({
                onResolved: function () {
                    callback(onResolved);
                },
                onRejected: function () {
                    callback(onRejected);
                }
            });
        }
    })
}

Promise.prototype.catch = function (onRejected) {
    return this.then(undefined, onRejected);

}

Promise.resolve = function (value) {
    return new Promise((resolve, reject) => {
        if (value instanceof Promise) {
            value.then(v => {
                resolve(v);
            }, e => {
                reject(e);
            })
        } else {
            resolve(value);
        }
    })
}

Promise.reject = function (reason) {
    return new Promise((resolve, reject) => {
        reject(reason);
    })
}

Promise.all = function (promises) {
    return new Promise((resolve, reject) => {
        let count = 0;
        let arr = [];
        for (let i = 0; i < promises.length; ++i) {
            promises[i].then(v => {
                count++;
                arr[i] = v;
                if (count === promises.length) {
                    resolve(arr);
                }
            }, e => {
                reject();
            })
        }
    })
}

Promise.race = function (promises) {
    return new Promise((resolve, reject) => {
        for (let i = 0; i < promises.length; ++i) {
            promises[i].then(v => {
                resolve(v);
            }, e => {
                reject(e);
            })
        }
    })
}