面试题之promise

问题：怎么控制一次加载一张图片，加载完后再加载下一张

解决：利用promise实现

首先要理解什么是promise?
Promise是一种用于解决异步问题的

一.什么是异步？什么是同步？

同步（synchronous）指的是任务从上往下依次执行的模式
如：

   A();
   B();
   C();

那么对于上面例子来说，同步就是一个要等待一个，A执行完之后再执行B，B执行完之后再执行C
异步：

如：将B分为两部分一部分立即执行网络请求的任务，另一部分在请求回来后的执行任务。这种一部分立即执行，另一部分在未来执行的模式称为异步（asynchronous）。异步，也就是执行一个任务的同时，中间去执行其它的事件，最终再回来执行这个任务，不连续。

二.总结解决异步问题的方法：

1. 回调函数
2. promise
3. Async/Await

Promise基本语法如下

Promise实例必须实现then这个方法

then()必须可以接收两个函数作为参数

then()返回的必须是一个Promise实例
then()方法是异步执行的

三.promise介绍

Promise的思想是，每一个异步任务返回一个Promise对象，该对象有一个then方法，允许指定回调函数。

resolve 函数将 Promise 对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject 函数将 Promise 对象的状态从“未完成”变为“失败”（即从 pending 变为rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

四.promise的高频面试题(只列举了1个)

请写出以下代码的输出结果：

const promise = new Promise((resolve, reject) => {
    console.log(1);
    resolve();
    console.log(2);
})
promise.then(() => {
    console.log(3);
})
console.log(4);

首先，此面试题主要考查了promise的then()方法，那么，then()方法首先是异步的。对于上面的程序，首先promise新建后会立即执行，而then()是在本次循环执行结束后才执行的，所以会先输出1 2 在输出 4，最后输出3
因此，结果为 1,2,4,3

五.问题解决（图片加载问题）

<script>

function createImg(fileName){
    // let imgDom = document.createElement("img");
    let imgDom = new Image();
    imgDom.src=fileName;
    document.body.appendChild(imgDom);
    let p = new Promise(function(resolve,reject){
        imgDom.onload = function(){
            console.log(fileName+"加载完毕");
            resolve();
        }
    });
    return p;
}

createImg("img/b1.jpg")
.then(function(){
        createImg("img/b2.jpg")
})
.then(function(){
    createImg("img/b3.jpg")
});

</script>