SOURCE

let p1 = new Promise((resolve, reject) => {
    console.log(1)
    resolve(200)
})

let p2 = new Promise((resolve, reject) => {
    resolve(200)
})
let p3 = new Promise((resolve, reject) => {
    reject(404)
})
let p4 = new Promise((resolve, reject) => {
    resolve(200)
})



Promise.all([p1,p2])
.then(ok => {
    console.log('all', ok)
})
.catch(err => {
    console.log('err', err)
})

Promise.all([p1,p2,p3,p4])
.then(ok => {
    console.log('allok', ok)
})
.catch(err => {
    console.log('allerr', err)
})

Promise.race([p1,p2,p3,p4])
.then(ok => {
    console.log('raceok', ok)
})
.catch(err => {
    console.log('racecerr', err)
})


Promise.all([p1,p2,p3,p4].map(item => item.catch()))
.then(ok => {
    console.log('allok11', ok)
})
.catch(err => {
    console.log('allerr111', err)
})

<div class='box'>
    
</div>

.box {
    width: 50px;
    height: 50px;
    background: red;
    border-radius: 50%;
}
.box:hover {
    animation: mydiv 5s;

}
@keyframes mydiv {
0%   {background:red; width: 60px;height: 60px}
25%  {background:yellow;width: 70px;height:70px}
50%  {background:blue;width: 80px;height: 80px}
100% {background:green;width: 90px;height: 90px}
}