1.promise理解
promise是ES6引入的可以进行异步编程的新方法，可以解决回调地狱的问题
2.promise初步使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<h2 class="page-header">Promise 初体验</h2>
<button class="btn btn-primary" id="btn">点击抽奖</button>
</div>
<script>
//生成随机数
function rand(m, n) {
return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
}
// 获取元素
const btn = document.querySelector('#btn')
// 绑定单击事件
btn.addEventListener('click', function () {
// 创建promise实例
var p = new Promise((reslove, reject) => {
setTimeout(() => {
let n = rand(1, 100)
if (n <= 50) {
// resolve是一个函数
// 将promise函数的状态设置为成功
// 调用成功的函数
// 并将结果传递过去
reslove(n)
} else {
reject(n)
}
},1000)
// 第一个参数是成功的回调,还可以获取成功失败的结果值
// 第二个参数是失败的回调
})
p.then((n) => {
alert('恭喜中奖,你的号码是'+n)
},
(n) => {
alert('再接再厉,你的号码是'+n)
}
)
})
</script>
</body>
</html>3.promise Api
创建一个新的promise对象的时候，promise里面的第一个参数是同步执行的。
.then里面的代码是异步执行的
promise.resolve，这个resolve不同于上面实例对象上的方法resolve，这个是Primise函数对象的
如果传入的值是一个非promise对象的值，那么promise的状态会变成fullfield或者resolved（意义相同）；如果传入一个promise对象，那么传入的promise对象的状态和结果是什么，promise.resolve的结果就是什么
promise.reject，这个reject不同于上面实例对象上的方法reject，这个是Primise函数对象的，这个方法里面不管传入什么，状态都是失败，都是reject。
promise.all，需要传入一个promise数组，只要有一个失败，promise.all的状态就是失败。都成功以后，promise.all的结果就是传入promise数组的结果
promise.race，返回的结果是执行最快的那个
4. promise 的关键问题
如何改变 promise 的状态?
(1) resolve(value): 如果当前是 pending 就会变为 resolved
(2) reject(reason): 如果当前是 pending 就会变为 rejected
(3) 抛出异常: 如果当前是 pending 就会变为 rejected
promise是先改变状态还是先执行回调操作？
当执行器里面的内容是可以同步执行的时候，应该是先改变状态，再执行回调函数。
当执行器里面是异步代码的时候，应该是先执行回调函数，再去改变状态
什么时候可以拿到promise处理结果的数据？
当执行器里面是同步代码，等状态改变，再去执行回调函数。
当执行器里面是异步代码的时候，要先等执行器里面的异步代码执行完毕，改变了状态，再去处理回调函数
promise.then的状态和结果是由什么决定的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var p = new Promise((resolve, reject) => {
resolve('ok111kk')
})
// rlt返回的也是一个promise对象
let rlt = p.then((val) => {
// 1.当这里抛出了错误
// rlt的状态是reject，结果就是抛出的错误
// throw '出问题了'
// 2.当这里返回的结果是一个非Primose类型的对象
// rlt的状态是fulfilled，结果就是返回的内容
// return 123
// 3.当这里返回的是一个Promise类型的对象
// rlt的状态是Promise对象的状态，，结果是Promise对象的结果
return new Promise((resolve,reject)=>{
resolve(val)
})
// console.log(val)
}, () => {
})
console.log(rlt)
</script>
</body>
</html>promise的链式调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('11')
}, 1000)
})
p.then((val) => {
console.log(val)//11
return new Promise((resolve, reject) => {
resolve('22')
})
})
.then(val => {
console.log(val)//22
})
</script>
</body>
</html>promise异常穿透，不管是状态失败还是在then里面某一个会回调失败或者跑出错误都会穿透到最后的catch里面，进行失败的处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promise关键问题 - 异常穿透</title>
</head>
<body>
<script>
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('OK');
// reject('Err');
}, 1000);
});
p.then(value => {
// console.log(111);
throw '失败啦!';
}).then(value => {
console.log(222);
}).then(value => {
console.log(333);
})
// 异常只需要在最后调用catch方法处理失败的情况
.catch(reason => {
console.warn(reason);
});
</script>
</body>
</html>中断promise链？
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('OK');
}, 1000);
});
p.then(value => {
console.log(111);
//有且只有一个方式
return new Promise(() => {});
}).then(value => {
console.log(222);
}).then(value => {
console.log(333);
}).catch(reason => {
console.warn(reason);
});就是返回一个pending状态的promise，当某一个promise返回pending状态的promise，那么then方法的状态也是pending，为pending的话，状态就没有改变，后面的回调函数都不会执行
cocode\code\promise