一、Promise是什么？
1. Promise是ES6中一门新的技术，是JS中进行异步编程的新的解决方案。
2. Promise是一个构造函数，Promise对象可以用来封装一个异步操作并可以获取其成功与失败的返回值。
异步编程包括：
- fs 文件操作（对计算机磁盘进行读写操作）
- 数据库操作（mongDB，MySQL）
- AJAX网络请求
- 定时器
二、为什么要用Promise？
1. 指定回调函数的方式更加灵活：启动异步任务 => 返回Promise对象 => 给Promise对象绑定回调函数（甚至可以在异步任务结束后指定多个）。
2. 支持链式调用，可以解决回调地狱问题（即回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件）。
3. 增强代码的可读性与可维护性，代码更加优雅。
三、Promise使用实践
1.promise封装Ajax请求
function sendAjax(url) {
return new Promise((resolve,reject) => {
const xhr = new XMLHttpRequest(); // 创建对象
xhr.responseType = 'json'; // 对返回数据格式进行限制
xhr.open('get', url); // 调用open和send方法
xhr.send();
xhr.onreadystatechange = function() { // 监听onreadystatechange事件
if(xhr.readyState===4){
if(xhr.status >= 200 && xhr.status <= 300){
resolve(xhr.response)
} else {
reject(xhr.status)
}
}
}
});
}
sendAjax('https://www.baidu.com')
.then(value => {
console.log(value)
}, err => {
console.log(err)
})
2.promise封装概率中奖事件
<body>
<button id="btn">点击抽奖</button>
</body>
<script>
function rand(m,n) { // 生成随机数函数
return Math.ceil(Math.random()*(n-m+1)) + m-1
}
var btn = document.querySelector('#btn')
btn.addEventListener('click', function () {
var p = new Promise((resolve,reject) => {
setTimeout(() => {
var num = rand(1, 100)
if (num >= 1 && num <= 30) resolve(num) // 将promise对象的状态设置为 【成功】
reject(num) // 将promise对象的状态设置为 【失败】
}, 1000)
}).then((value) => { // 调用then方法
alert('恭喜你中了666,您的数字为' + value)
}, (result) => {
alert('谢谢参与，您的数字为'+ result)
})
})
</script>
四、Promise的状态
1.promise的状态：Promise实例对象中的一个属性 【PromiseState】
- pending 未决定的
- resolved / fullfilles 成功
- rejected 失败
2.Promise的状态改变
- pending变为resolved
- pending变为rejected
说明:只有这两种，且一个Promise对象只能改变一次 无论成功还是失败，都会有一个结果数据 成功的结果数据一般称为value，失败的结果数据一般称为reason
3.Promise对象的值：Promise实例对象中的另一个属性 【PromiseResult】，保存着对象成功或失败的结果，且只有以下两个方法可以对PromiseResult的值进行修改
- resolve（）
- reject（）
6783
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
