06-Promise的一些题目

06-Promise的一些题目

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()里面的代码加入到微任务队列当中。