1. 理解
* Promise对象:代表了未来某个将要发生的事件(通常是异步操作)
* 有了Promise对象可以将异步操作以同步的流程表达出来,避免了层层嵌套的回调函数(俗称"回调地狱")
* ES6的Promise函数是一个构造函数,用来生成promise实例对象
2.使用promise基本步骤(2步)
* 创建Promise实例对象
let promise = new Promise((resolve,reject) => {
// 初始化promise状态为pending
// 执行异步操作
if(异步操作成功){
resolve(value);// 修改promise状态为fullfilled
}else{
reject(errMSG);// 修改promise状态为rejected
}
})
* 调用promise的then()
promise.then(function(){
result => console.log(result)
errorMsg => console.log(errorMsg)
})
3. promise对象的3个状态
* pending 初始化状态
* fullfilled 成功状态
* rejected 失败状态
4. 应用
* 使用promise实现超时处理
* 使用promise封装处理ajax请求
let request = new XMLHttpRequest();
request.onreadystatechange = function (){
}
request.responseType = 'json';
request.open('GET',url);
request.send();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>promise对象原理详解</title>
</head>
<body>
</body>
<script type="text/javascript">
// 创建promise对象(同步的)
let promise = new Promise((resolve,reject) => {
// 初始化promise状态为: pending
console.log(111)
// 执行异步操作,通常是发送ajax请求,开启定时器
setTimeout(() => {
console.log(333)
// 根据异步任务的返回结果去修改promise的状态(原理)
// 异步任务成功
resolve('哈哈 成功了!');// 自动修改promise的成功状态: fullfilled
// 异步任务失败
reject(); // 自动修改promise的失败状态: rejected
},2000)
})
console.log(222);// 先打印111 再222
promise.then((data) => {//成功的回调
console.log(data, '成功了');// resolve()执行后 执行
},(error) => {// 失败的回调
console.log('失败了');// reject()执行后 执行
})
</script>
</html>