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