首先看一个例子:
<script>
var a = 1;
setTimeout(() => {
a = 10;
}, 2000);
console.log(a);
</script>
上面是一个异步任务,setTimeout两秒后才会执行,所以控制台会打印1。要想打印10,就可以把console.log(a)放在里面即:
<script>
var a = 1;
setTimeout(() => {
a = 10;
console.log(a);
}, 2000);
</script>
这样依然会导致回调地狱,层层嵌套的问题,这个时候就可以用promise试试。
Promise对象 基本使用
new Promise(function(resolve, reject) {
// ... 要执行的(异步)任务
})
所以上面的代码可以改造成
new Promise( (resolve, reject) => {
setTimeout(() => {
a = 10;
}, 2000);
} );
接下来讲解几个关键的知识点
Promise状态:[[PromiseStatus]]
- pending:初始状态,既不是成功,也不是失败状态
- fulfilled/resolved:意味着操作成功完成
- rejected:意味着操作失败
Promise状态:[[PromiseStatus]]
- resolve()函数:更改Promise对象为成功状态
- reject()函数:更改Promise对象为失败状态
then方法
任务后续处理函数,一般情况下处理某个Promise任务完成(无论是成功还是失败)的后续任务
.then(onFulfilled/onResolved, onRejected)
onFulfilled/onResolved:fulfilled/resolved状态下调用
onRejected:rejected状态下调用
懵逼了有木有,来一个例子看看
<script type="text/javascript">
var a = 1;
let p1 = new Promise( (resolve, reject) => {
// 要执行的异步任务
/**
* resolve:函数,当我们调用该函数的时候,可以把当前Promise对象的任务状态该成resolved
* reject:函数,当我们调用该函数的时候,可以把当前Promise对象的任务状态该成rejected
*
* 只要Promise的任务状态发生了变化,这个Promise对象的then方法就会被执行
*/
setTimeout(() => {
a = 10;
// resolve(); //resolved
reject(); //rejected
}, 2000);
} );
p1.then( () => {
// then方法就是Promise处理完任务以后继续执行的任务
console.log(a);
}, () => {
console.log('失败了');
} );
</script>
关于 resolve()、reject()这两个函数传参还有要注意的地方
Promise值:[[PromiseValue]]
任务处理完成(成功或失败),返回的值,通过 resolve()、reject() 函数传入
resolve(1)、reject(1)
onFulfilled/onResolved, onRejected 函数接收
.then(val=>console.log(val), ...)
看下面的例子
<script type="text/javascript">
/**
* Promise
* 构造函数,通过Promise来构建一个异步任务处理对象
*/
new Promise( (resolve, reject) => {
/**
* resolve, reject这两个函数是可以传入参数的,传入的参数将被传递给then中的函数进行使用
*/
setTimeout(() => {
var a = 10;
// resolve(a);
reject('出错了');
}, 2000);
} ).then( v => {
console.log(v);
}, err => {
console.log(err);
});
</script>
控制台会打印“出错了”。