共计 1296 个字符,预计需要花费 4 分钟才能阅读完成。
Promise 的执行顺序
题目 1
代码举例:
const p = new Promise((resolve, reject) => {console.log(1);
});
console.log(2);
打印结果:
1
2
我们需要注意的是:Promise 里的代码整体,其实是同步任务,会立即执行。
补充:上面的代码中,如果继续写 p.then()
,那么 then()
里面是不会执行的。因为在定义 promise 的时候需要写 resolve,调用 promise 的时候才会执行 then()
。
基于此,我们再来看下面这段代码:
const p = new Promise((resolve, reject) => {console.log(1);
resolve();});
console.log(2);
p.then((res) => {console.log(3);
});
打印结果:
1
2
3
题目 2
代码举例:
// 封装 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:
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()
里面的代码加入到微任务队列当中。
正文完