学习笔记 JavaScript ES6 Promise的静态方法

学习内容：

• Promise.resolve()
• Promise.reject()
• Promise.all()
• Promise.race()

Promise.resolve()，表示成功的状态

Promise.reject()，表示失败的状态

基本用法：

let p1 = Promise.resolve('success')
console.log(p1)
p1.then(res => {
    console.log(res);
})

let p2 = Promise.reject('fail')
console.log(p2);
p2.catch(err => {
    console.log(err);
})

-------------------------------------
Promise {<fulfilled>: 'success'}
    [[Prototype]]: Promise
    [[PromiseState]]: "fulfilled"
    [[PromiseResult]]: "success"
success
fail

实际场景：

当失败时，一定要返回字符串时，下面这种写法就有报错了：

function foo(flag) {
    if(flag) {
        return new Promise(resolve => {
            resolve('success')
        })
    } else {
        return 'fail'
    }

    foo(false).then(res => {
        console.log(res);
    })
}

foo(false).then(res => {
    console.log(res);
}, err =>{
    console.log(err);
})

---------------------------------------------------------
Uncaught TypeError: foo(...).then is not a function

这时把return 'fail' 改为 Promise.reject('fail') 就可以了：

function foo(flag) {
    if(flag) {
        return new Promise(resolve => {
            resolve('success')
        })
    } else {
        return Promise.reject('fail')
    }

    foo(false).then(res => {
        console.log(res);
    })
}

foo(false).then(res => {
    console.log(res);
}, err =>{
    console.log(err);
})

------
fail

Promise.all() 

下面代码有三个Promise，现在想让三个异步操作都执行完之后，再调用某方法：

let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(1)
        resolve('p1')
    }, 1000);
})

let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(2)
        resolve('p2')
    }, 2000);
})

let p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(3)
        resolve('p3')
    }, 3000);
})

Promise.all([p1, p2, p3]).then(res => {
    console.log(res);
})

---------------------------
1
2
3
(3) ['p1', 'p2', 'p3']

再来看，Promise.all() 有一个特点是，当有一个失败时，就认全部是失败的：

let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(1)
        resolve('p1')
    }, 1000);
})

let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(2)
        reject('p2 fail')
    }, 2000);
})

let p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(3)
        resolve('p3')
    }, 3000);
})

Promise.all([p1, p2, p3]).then(res => {
    console.log(res);
}, err =>{
    console.log(err);
})

---------------------------
1
2
p2 fail
3

Promise.race()

有一个完成，就进入race()

let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(1)
        resolve('p1')
    }, 1000);
})

let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(2)
        resolve('p2')
    }, 2000);
})

let p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(3)
        resolve('p3')
    }, 3000);
})

Promise.race([p1, p2, p3]).then(res => {
    console.log(res);
}, err =>{
    console.log(err);
})

------
1
p1
2
3

Promise.all() 实际场景应用： 

当全部图片都上传完之后如何如何：

const imgArr = ["1.jpg", "2.jpg", "3.jpg"];
let promiseArr = [];
imgArr.forEach((item) => {
  imgArr.push(
    new Promise((resolve, reject) => {
      // 图片上传开始。。。
      resolve('url');
    })
  )
})

Promise.all(promiseArr).then(res => {
    console.log('图片全部上传完成')
})

Promise.race() 实际场景应用：  

一定时间内加载图片失败时，显示图片加载失败：

function getImg() {
    
    return new Promise((resolve, reject) => {
        let img = new Image()
        img.onload = () => { // 异步操作
            resolve(img) // 加载成功
        }
        img.src = 'ht11tps://himg.bdimg.com/sys/portrait/item/public.1.258292d0.BMpzq-SDXD1fY0kD-uP87A.jpg'
    })
}

function time() {
    return new Promise((resolve, reject) => {
        setTimeout(() => { 
            reject('加载超时') // 超出一定时间则执行定时器，认为加载失败
        }, 2000);
    }) 
}

Promise.race([getImg(), time()]).then(res =>{
    console.log(res)
}).catch(err => {
    console.log(err);
})

-----------------------------------------------------------------------------------------------------------------
（加载成功）<img src="https://himg.bdimg.com/sys/portrait/item/public.1.258292d0.BMpzq-SDXD1fY0kD-uP87A.jpg">
（加载失败）加载超时