对Promise的理解

Promise的含义

Promise是ES6引入 的JS中进行异步编程的新解决方案。

它是一个对象，可以获取异步操作的消息，它的出现大大改善了异步编程的困境， 避免了地狱回调，它比传统的解决方案回调函数和事件更合理和更强大。

Promise的实例有三个状态 ：Pending （进行中）、Resolved （已完成）、Rejected（已拒绝）。

Promise的特点

promise 对象代表一个异步操作，对象的状态不受外界影响；有三种状态， pending（进行中）、 Resolved （已成功）、 rejected（已失败）。
只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态，这也是 promise 这个名字的由来------" 承诺" ；
promise对象的状态改变，只有两种可能：从 pending 变为 fulfilled【resolved】，从pending 变为 rejected并且状态一旦改变，就无法再次改变状态。这时就称为 resolved（已定型）。如果改变已经发生了，你再对 promise 对象添加回调函数，也会立即得到这个结果。这与事件（event）完全不同，事件的特点是：如果你错过了它，再去监听是得不到结果的。

Promise的用法

复制代码

// resolve 解决  函数类型的数据,对象返回成功时使用
// reject  拒绝  函数类型的数据,对象返回失败时使用
const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        //30%  1-100  1 2 30
        //获取从1 - 100的一个随机数
        let n = rand(1, 100);
        //判断
        if(n <= 30){
            //传值，传到then中
            resolve(n);     // 将 promise 对象的状态设置为 『成功』
        }else{
            reject(n);      // 将 promise 对象的状态设置为 『失败』
        }
    }, 1000);
});

//then需要接收两个参数，两个参数都是函数类型，第一个函数是对象成功时的回调，第二是失败时的回调
p.then((value) => {         //接收上面异步的值
         alert('恭喜恭喜, 奖品为 10万 RMB 劳斯莱斯优惠券, 您的中奖数字为 ' + value);
     }, (reason) => {
         alert('再接再厉, 您的号码为 ' + reason);
     });

});

使用 promise 封装 ajax 异步请求

复制代码

<script >
  /*
  可复用的发 ajax 请求的函数: xhr + promise
  */
function promiseAjax(url) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.onreadystatechange = () => {
            if (xhr.readyState !== 4) return
            const {
                status,
                response
            } = xhr
            // 请求成功, 调用 resolve(value)
            if (status >= 200 && status < 300) {
                resolve(JSON.parse(response))
            } else { // 请求失败, 调用 reject(reason)
                reject(new Error('请求失败: status: ' + status))
            }
        }
        xhr.open("GET", url)
        xhr.send()
    })
}
promiseAjax('https://www.app.home?code=dsfew').then(
    data => {
        console.log('显示成功数据', data)
    },
    error => {
        alert(error.message)
    }
) 
</script>

此文章借鉴了一下博主的优秀文章万分感谢！

原文链接：https://blog.csdn.net/weixin_44106715/article/details/123934286

原文链接：https://blog.csdn.net/qq_38290251/article/details/107395152