对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