Promise.all() - 雑多なブログ

Promiseを使って非同期処理を行う場合、

Promise.all()を使うと並列で処理を実行できるようなので、活用してみたいと思う。

サンプルコード

promise.js

const loadImage = (url, elem) => {
    return new Promise((resolve, reject) => {
        const request = new XMLHttpRequest()
        
        request.open('GET', url)
        request.responseType = 'blob'

        request.addEventListener('load', () => {
            if (request.status == 200) {
                const blob = new Blob([request.response], { type: 'image/png' })
                const img = document.createElement('img')
                img.src = URL.createObjectURL(blob)
                elem.appendChild(img)
                resolve(true)
            } else {
                console.log(`${request.status}: ${request.statusText}`)
                reject(false)
            }
        })
        request.addEventListener('error', event => console.log('Error'))
        request.send()
    })
}

window.addEventListener('DOMContentLoaded', (event) => {
    const img_div = document.getElementById('images')

    Promise.all([
        loadImage('./img/sample1.png', img_div),
        loadImage('./img/sample2.png', img_div),
        loadImage('./img/sample3.png', img_div),
    ])

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>promise test</title>
<script src="./promise.js" type="module"></script>
</head>
<body>
    <div id="images"></div>    
</body>
</html>