众所周知,promise在js中主要是解决回调地狱问题。 那什么是回调地狱呢?回调地狱就是我们异步任务中顺序执行代码的过程中不断的嵌套回调函数,这样会导致我们的代码臃肿,耦合性太高。使用promise的链式调用就可以很好的解决这一问题。
最近初步了解了promise的内容,跟着视频里做了些笔记和跟着视频敲了些例子。
<style>
#button {
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<button id="button">点击抽奖</button>
<script>
function rand(m, n) {
return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
}
const btn = document.querySelector('#button');
//promise 形式实现
//resolve 解决 函数类型的数据
//reject 失败 函数类型的数据
//promise作用:封装异步操作;获取异步任务当中成功和失败的结果值(n)
btn.addEventListener('click', function () {
const p = new Promise((resolve, reject) => {
setTimeout(() => {
//获取1-100的随机一个数
let n = rand(1, 100);
if (n <= 30) {
resolve(n); //将promise对象的状态设置为 成功
} else {
reject(n);//将promise对象的状态设置为 失败
}
}, 1000);
});
p.then((value) => {
alert('成功!,您的中奖数字为:'+value);
}, (reason) => {
alert('失败!,您的号码为:'+reason);
});
});
</script>
</body>
还有就是使用promise发送ajax请求。
<style>
#button {
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<button id="button">发送请求</button>
<script>
const btn = document.querySelector('#button');
btn.onclick = function () {
var p = new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('get', 'https://api.apiopen.top/getJoke');
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
// console.log(xhr.reponse);
resolve(xhr.response);
} else {
// console.log(xhr.status);
reject(xhr.status);
}
}
}
})
p.then(value => {
console.log(value);
}, (reason) => {
console.log(reason);
})
}
// let p1 =Promise.resolve(521);
// console.log(p1);
</script>
</body>