Promise

Image 对象

• new Image() —— 声明一个Image对象
• onload —— 当图片加载成功时执行
• onerror —— 当图片加载失败时执行
• .src —— 设置图片路径

Promise

• 作用：解决回调地狱问题
• 语法：

new Promise().then().catch()

async await

• 作用：Promise 的语法糖，可以增加代码可读性（用同步的思维写代码）
• 语法:

(async function () {
  try {
    const oImg1 = await loadImg("https://robohash.org/1");
    document.body.appendChild(oImg1);
    const oImg2 = await loadImg("https://robohash.org/2");
    document.body.appendChild(oImg2);
  } catch (msg) {
    console.log(msg);
  }
})();

上传图片

<script>
    function loadImg(src) {
        return new Promise((resolve, reject) => {
            const oImg = new Image()
            oImg.src = src
            oImg.onload = () => {
                resolve(oImg)
            }
            oImg.onerror = () => {
                reject('图片加载失败')
            }
        })
    }
    (async function () {
        try {
            const oImg = await loadImg('https://robohash.org/1')
            document.body.appendChild(oImg)
            const oImg2 = await loadImg('https://robohash.org/2')
            document.body.appendChild(oImg2)
        } catch (err) {
            console.log(err);
        }
    })()
</script>