Promise的出现的目的是解决异步编程中的地狱回调的问题。
1. 同步和异步
1.1 JS的事件循环机制
**事件循环机制：**主线程不断重复获得任务，执行任务的过程。
JS是一门单线程语言。HTML5提出新标准，允许JS创建多个线程，于是出现了同步和异步。
简单的理解：
**同步：**同步任务都在主线程上执行，形成了一个执行栈。比如烧水煮饭，等水开了（10分钟后），再去切菜。
异步：异步通过回调函数实现。回调函数添加到任务队列中。比如烧水煮饭，利用水烧开的十分钟时间先去切菜。
1.2 同步和异步的区别
| 同步API | 异步API | 执行顺序 | 同步API从上到下依次执行，前面的代码会阻塞后面代码的执行 | 异步API不会等待API执行完成后再向下执行代码 | 获取返回值 | 同步API可以从返回值中拿到API的执行结果 | 异步API不可以 |
|---|
1.3 常见的异步任务类型
- 普通事件，如click,resize等等
- 资源加载，如load,error等等
- 定时器，如setInterval,setTimeout等
- 请求类型，需要回调执行的
2. promise 的基本使用
由于多次异步调用的结果顺序不固定，异步调用结果如果存在依赖（即下一个异步调用需要在上一个异步任务执行完在执行）则需要进行嵌套，很容易造成回调地狱。
地狱回调图来自百度：
Promise的出现就是为了解决异步调用嵌套的问题。
执行结果：
2.1 Promise的三种状态
| 状态 | 说明 | pending | 等待状态，比如正在进行网络请求，或者定时器没有到时间。 | fulfill | 满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then() | reject | 拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch() |
|---|
2.2 Promise常用API
1.实例方法
| 实例方法 | 说明 | .then() | 得到异步任务正确的结果 | .catch() | 获取异常信息 | .finally() | 成功与否都会执行（不是正确标准） |
|---|
2.静态方法
| 静态方法 | 说明 | .all() | 用于并发处理多个异步任务，只有所有异步任务都执行完成了才能出结果 | .race() | 用于并发处理多个异步任务，只要其中一个异步任务执行完成就出结果。其他的异步任务会继续执行，但结果会被丢弃 |
|---|
.all方法详细说明：
promise.all方法接收一个数组作为参数，数组中的对象均为Promise实例（如果不是Promise实例，该项会被用Promise.resolve转为Promise实例)
.race()
Promise.race接收一个数组作为参数，数组中的实例有一个状态发生改变（编程fulfill或rejected）则将第一个改变状态的返回值传递回去，继续向下执行但不会再执行后面实例的回调。
2.3 Promise链式编程demo
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("你再干嘛");
}, 2000);
})
.then((data) => {
console.log(data); //打印你在干嘛
return new Promise((resolve, reject) => {
resolve(data + ",我在吃饭.");
// 如果是reject()则后面的then不执行 直接跳到catch
});
})
.then((data) => {
console.log(data); //打印你在干嘛,我在吃饭
// 如果接下来是同步任务 只需有 return Promise.resolve即可
return Promise.resolve(data + "哦那我走了");
//异常情况
// return Promise.reject("异常了")
// 或者手动抛出异常
// throw "异常了";
})
.then((data) => {
console.log(data);
})
.catch((err) => {
//执行失败的回调
console.log(err);
});
</script>
</body>
</html>
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！