update: promise
This commit is contained in:
parent
177bcb3f1b
commit
d16a6f132f
@ -82,7 +82,7 @@ Promise 对象, 可以**用同步的表现形式来书写异步代码**(也就
|
|||||||
|
|
||||||
- 可以很好地解决**回调地狱**的问题(避免了层层嵌套的回调函数)。
|
- 可以很好地解决**回调地狱**的问题(避免了层层嵌套的回调函数)。
|
||||||
|
|
||||||
- 语法非常简洁、可读性强。Promise 对象提供了简洁的 API,使得控制异步操作更加容易。
|
- 语法非常简洁、可读性强,便于后期维护。Promise 对象提供了简洁的 API,使得控制异步操作更加容易。
|
||||||
|
|
||||||
## Promise 基础
|
## Promise 基础
|
||||||
|
|
||||||
@ -210,7 +210,9 @@ try {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
需要注意的是,上面的写法 3 是错误的。运行之后,控制台会报如下错误:
|
需要注意的是:
|
||||||
|
|
||||||
|
(1)上面的写法 3 是错误的。运行之后,控制台会报如下错误:
|
||||||
|
|
||||||
![](http://img.smyhvae.com/20210430_1553.png)
|
![](http://img.smyhvae.com/20210430_1553.png)
|
||||||
|
|
||||||
@ -220,6 +222,10 @@ try-catch 主要用于捕获异常,注意,这里的异常是指**同步**函
|
|||||||
|
|
||||||
原因是:当异步函数抛出异常时,对于宏任务而言,执行函数时已经将该函数推入栈,此时并不在 try-catch 所在的栈,所以 try-catch 并不能捕获到错误。对于微任务而言(比如 promise)promise 的构造函数的异常只能被自带的 reject 也就是.catch 函数捕获到。
|
原因是:当异步函数抛出异常时,对于宏任务而言,执行函数时已经将该函数推入栈,此时并不在 try-catch 所在的栈,所以 try-catch 并不能捕获到错误。对于微任务而言(比如 promise)promise 的构造函数的异常只能被自带的 reject 也就是.catch 函数捕获到。
|
||||||
|
|
||||||
|
|
||||||
|
(2)写法1中,`promiseA().then().catch()`和`promiseA().catch().then()`区别在于:前者可以捕获到 `then` 里面的异常,后者不可以。
|
||||||
|
|
||||||
|
|
||||||
### 小结
|
### 小结
|
||||||
|
|
||||||
1、promise 有三种状态:等待中、成功、失败。等待中状态可以更改为成功或失败,已经更改过状态后⽆法继续更改(例如从失败改为成功)。
|
1、promise 有三种状态:等待中、成功、失败。等待中状态可以更改为成功或失败,已经更改过状态后⽆法继续更改(例如从失败改为成功)。
|
||||||
@ -230,6 +236,17 @@ try-catch 主要用于捕获异常,注意,这里的异常是指**同步**函
|
|||||||
|
|
||||||
4、失败的 promise,后续可以通过 promise 自带的 .catch ⽅法或是 .then ⽅法的第⼆个参数进⾏捕获。
|
4、失败的 promise,后续可以通过 promise 自带的 .catch ⽅法或是 .then ⽅法的第⼆个参数进⾏捕获。
|
||||||
|
|
||||||
|
|
||||||
|
## Promise 规范
|
||||||
|
|
||||||
|
### Promise 规范解读
|
||||||
|
|
||||||
|
Promise 是⼀个拥有 then ⽅法的对象或函数。任何符合 promise 规范的对象或函数都可以成为 Promise。
|
||||||
|
|
||||||
|
关于promise 规范的详细解读,可以看下面这个链接:
|
||||||
|
|
||||||
|
- Promises/A+ 规范:<https://promisesaplus.com/>
|
||||||
|
|
||||||
## promise 对象的 3 个状态
|
## promise 对象的 3 个状态
|
||||||
|
|
||||||
- 初始化(等待中):pending
|
- 初始化(等待中):pending
|
||||||
@ -321,7 +338,7 @@ fun1(function () {
|
|||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
上⾯的例⼦就是最传统的写法,在异步结束后通过传入回到函数的方式执⾏函数。
|
上⾯的例⼦就是最传统的写法,在异步结束后通过传入回调函数的方式执⾏函数。
|
||||||
|
|
||||||
学习 Promise 之后,我们可以将这个异步函数封装为 Promise,如下。
|
学习 Promise 之后,我们可以将这个异步函数封装为 Promise,如下。
|
||||||
|
|
||||||
@ -334,14 +351,15 @@ function fun2() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 上面的 fun2 也可以写成:
|
/* 【重要】上面的 fun2 也可以写成:
|
||||||
// function fun2() {
|
function fun2() {
|
||||||
// return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
// setTimeout(() => {
|
setTimeout(() => {
|
||||||
// resolve();
|
resolve();
|
||||||
// }, 1000);
|
}, 1000);
|
||||||
// });
|
});
|
||||||
// }
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
// 先执行异步函数fun1,再执行回调函数
|
// 先执行异步函数fun1,再执行回调函数
|
||||||
fun2().then(() => {
|
fun2().then(() => {
|
||||||
@ -429,7 +447,7 @@ request1()
|
|||||||
## 总结
|
## 总结
|
||||||
|
|
||||||
|
|
||||||
了解这些内容之后, 你已经对 Promise 有了基本了解。下一篇文章,我们来讲一讲 Promise的常见用法。
|
了解这些内容之后, 你已经对 Promise 有了基本了解。下一篇文章,我们来讲一讲 Promise在实战开发的常见用法。
|
||||||
|
|
||||||
## 参考链接
|
## 参考链接
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user