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