mirror of
https://github.com/qianguyihao/Web.git
synced 2024-11-01 21:44:45 +08:00
133 lines
2.5 KiB
JavaScript
133 lines
2.5 KiB
JavaScript
---
|
||
title: 06-Promise的一些题目
|
||
publish: true
|
||
---
|
||
|
||
<ArticleTopAd></ArticleTopAd>
|
||
|
||
|
||
## Promise 的执行顺序
|
||
|
||
### 题目 1
|
||
|
||
代码举例：
|
||
|
||
```js
|
||
const p = new Promise((resolve, reject) => {
|
||
console.log(1);
|
||
});
|
||
|
||
console.log(2);
|
||
```
|
||
|
||
打印结果：
|
||
|
||
```
|
||
1
|
||
2
|
||
```
|
||
|
||
我们需要注意的是：Promise 里的代码整体，其实是同步任务，会立即执行。
|
||
|
||
补充：上面的代码中，如果继续写`p.then()`，那么 `then()`里面是不会执行的。因为在定义 promise 的时候需要写 resolve，调用 promise 的时候才会执行 `then()`。
|
||
|
||
基于此，我们再来看下面这段代码：
|
||
|
||
```js
|
||
const p = new Promise((resolve, reject) => {
|
||
console.log(1);
|
||
resolve();
|
||
});
|
||
|
||
console.log(2);
|
||
|
||
p.then((res) => {
|
||
console.log(3);
|
||
});
|
||
```
|
||
|
||
打印结果：
|
||
|
||
```
|
||
1
|
||
2
|
||
3
|
||
```
|
||
|
||
### 题目 2
|
||
|
||
代码举例：
|
||
|
||
```js
|
||
// 封装 ajax 请求：传入回调函数 success 和 fail
|
||
function ajax(url, success, fail) {
|
||
var xmlhttp = new XMLHttpRequest();
|
||
xmlhttp.open('GET', url);
|
||
xmlhttp.send();
|
||
xmlhttp.onreadystatechange = function () {
|
||
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
|
||
success(xmlhttp.responseText);
|
||
} else {
|
||
fail(new Error('接口请求失败'));
|
||
}
|
||
};
|
||
}
|
||
|
||
new Promise((resolve, reject) => {
|
||
ajax('a.json', (res) => {
|
||
console.log('a接口返回的内容：' + res);
|
||
resolve();
|
||
});
|
||
})
|
||
.then((res) => {
|
||
console.log('a成功');
|
||
new Promise((resolve, reject) => {
|
||
ajax('b.json', (res) => {
|
||
console.log('b接口返回的内容：' + res);
|
||
resolve();
|
||
});
|
||
});
|
||
})
|
||
.then((res) => {
|
||
// 因为上面在b接口的时候，并没有 return，也就是没有返回值。那么，这里的链式操作then，其实是针对一个空的 promise 对象进行then操作
|
||
console.log('b成功');
|
||
});
|
||
```
|
||
|
||
打印结果：
|
||
|
||
```
|
||
a接口返回的内容
|
||
a成功
|
||
b成功
|
||
b接口返回的内容
|
||
```
|
||
|
||
### 题目 3
|
||
|
||
举例1：
|
||
|
||
```js
|
||
new Promise((resolve, reject) => {
|
||
resolove();
|
||
console.log('promise1'); // 代码1
|
||
}).then(res => {
|
||
console.log('promise then)'; // 代码2：微任务
|
||
})
|
||
|
||
console.log('千古壹号'); // 代码3
|
||
```
|
||
|
||
打印结果：
|
||
|
||
```
|
||
promise1
|
||
千古壹号
|
||
promise then
|
||
```
|
||
|
||
代码解释：代码1是同步代码，所以最先执行。代码2是**微任务**里面的代码，所以要先等同步任务（代码3）先执行完。
|
||
|
||
当写完`resolove();`之后，就会立刻把 `.then()`里面的代码加入到微任务队列当中。
|
||
|