Promise 基本使用

es6 Promise 是一个构造函数。new Promise返回一个promise对象。
本身具有all、resolve、reject等方法，原型上有then、catch等方法。

promise主要用来解决这两个问题：
1、解决回调地狱问题，通常第二个函数的参数是第一个函数的返回值；
2、解决异步问题，但不能说promise是异步的；

先new一个构造函数看看。

//new一个构造函数 p是返回的promise对象
let p = new Promise((resolve,reject) => {
    //这里做一些异步操作
    setTimeout(()=>{
        resolve() //异步成功后执行
    },500) //0.5s
    reject()//异步失败后执行的回调函数
})
//promise的精髓是状态维护和传递，then链式操作
p.then((data) => {
    console.log(data)
}).then((data2) => {
    console.log(data2)
}).then((data3) => {
    console.log(data3)
})

举个例子，来看下具体的使用方法。

let p = new Promise((resolve,reject) => {
    setTimeout(() => {
        let num = Math.ceil(Math.random()*10) //随机生成1-10
        if(num < 5){
            resolve(num)
        }else{
            reject('数字大于5')
        }
    },500)
})

then方法接收两个参数，第一个对应resolve的回调，第二个对应reject的回调。

p.then((number) => {
    console.log('展示resolve的结果',number)
},(err) => {
    console.log('reject',err)
})

但我们常见的是then 和 catch 的配合使用。
catch用法，执行reject的回调，相当于上面then的第二个参数。

//这里模拟生成数字8，执行catch()
p.then((data) => {
    console.log('输出resolve的结果:',data) //输出resolve的结果:8
}).catch((err) => {
    console.log('输出reject的结果:',err) //输出reject的结果:数字大于5
})

catch另一个作用，如果执行resolve的回调时，抛出异常，不会报错卡死js，而是进入catch。

p.then((number) => {
    console.log('resolve',number) //8
    console.log(number2) //这里的number2 未定义
}).catch((err) => {
    console.log('reject',err) //最终的输出结果 resolve 8 ,reject number2未定义
})

到这里Promise的基础使用已完成。

Promise.all( )

• Promise.all() 处理多个异步任务，所有异步操作执行完毕才执行回调；
• .all(paramasArray) 接收一个数组参数，数组中的每一项是一个promise对象；
• 返回的结果也是一个数组，数组中的每一项对应 .all参数的结果；
• 适用场景：打开页面，显示‘loading…’，预先加载需要用到的图片和各种资源，等所有资源都加载完毕，关闭‘loading…’显示页面。

使用方法：

let promise1 = new Promise((resolve,reject) => {})
let promise2 = new Promise((resolve,reject) => {})
let promise3 = new Promise((resolve,reject) => {})

Promise.all([promise1,promise2,promise3])
.then(() => {
    //三个成功则成功
})
.catch((err) => {
    //有一个失败则失败
})

Promise.race( )

• 接收的参数是数组；
• 只取第一个返回的结果（哪个方法先执行完，就用那个）

举例：
异步请求一个图片，这里是模拟，图片路径设为“图片路径“，所以肯定请求不到；timeout函数是一个延时2秒的操作。
把这两个请求结果放进race，让他们开始赛跑，如果2秒内图片请求成功了，进入then()方法，如果2秒图片还未成功返回，则进入catch报“图片请求超时”错误。

//requestImg 异步请求一张图片，这里模拟请求，src为图片路径，所以肯定请求不到
function requestImg(){
    let p = new Promise((resolve,reject) => {
        let img = new Image()
        img.onload = (() => {
            resolve(img)
        })
        img.src = '图片路径'
    })
    return p
}
//timeout函数是一个延时2秒的操作
function timeout(){
    let p = new Promise((resolve,reject) => {
        setTimeout(() => {
            reject('图片请求超时')
        },2000)
    })
    return p
}
Promise.race([requestImg(),timeout()])
.then(() => {
    console.log('requestImg、timeout哪个先执行完，就取谁的结果')
})
.catch((err) => {
    console.log(err)
})