对Promise的理解

devtools/2024/9/23 20:13:35/

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) returnconst {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