Promise是什么与使用方法？

Promise是异步微任务，解决了异步多层嵌套回调的问题，让代码的可读性更高，更容易维护。

Promise的使用：

Promise也是是一个构造函数，接收一个参数——函数。

函数中传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。

setTimout为一个异步操作，延时2秒后输出语句。

var p=new Promise(function(resolve,reject){
    setTimout(()=>{
        console.log("执行完成")
    },1000)
})

then：接收一个参数，是函数，并且会拿到我们在runAsync中调用resolve时传的的参数。

function runAsync(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('执行完成');
            resolve('随便什么数据');
        }, 2000);
    });
    return p;            
}


runAsync().then(function(data){
    console.log(data);
    //后面可以用传过来的数据做些其他操作
    //......
})

链式操作的用法：

function runAsync(){
    let p=new  Promise(function(resolve,reject){
        setTimeout(()=>{
            console.log('异步任务')
            resolve('数据')
        })
    })
    return p
}

runAsync()
.then((data)=>{
    console.log(data)

    return runAsync()
}).then(data=>{
    console.log(data)
    return "runAsync()"
}).then(data=>{
    console.log(data)
})

reject：then接受两个参数,一个对应resolve的回调，一个对应reject的回调。 

function runAsync(){
    let p=new  Promise(function(resolve,reject){
        let num=Math.ceil(Math.random()*10)
        if(num>5){
            console.log(num)
            resolve('resolve-此数字大于5')
        }else{
            console.log(num)
            reject('reject-此时数据小于5')
        }
        
    })
    return p
}
runAsync().then(data=>{
    console.log(data)
},err=>{
    console.log(err)
})

 catch：效果和写在then的第二个参数里面一样。

runAsync().then(data=>{
    console.log(data)
}).catch(err=>{
    console.log(err)
})

all的用法：all接收一个数组参数，里面的值最终都算返回Promise对象。「谁跑的慢，以谁为准执行回调」

function runAsync1() {
  let p = new Promise(function (resolve, reject) {
    console.log("异步任务1完成")
    resolve("resolve-此数字大于5");
  });
  return p;
}
function runAsync2() {
  let p = new Promise(function (resolve, reject) {
    console.log("异步任务2完成")
    resolve("resolve2-此数字大于5");
  });
  return p;
}
function runAsync3() {
  let p = new Promise(function (resolve, reject) {
    console.log("异步任务3完成")
    resolve("resolve3-此数字大于5");
  });
  return p;
}

Promise.all([runAsync1(), runAsync2(), runAsync3()]).then((res) => {
  console.log(res);
});

race的用法： race的用法与all一样，「谁跑的快，以谁为准执行回调」。

Promise.race([runAsync1(),runAsync2(),runAsync3()]).then(res=>{
    console.log(res)
})

 race应用场景：给某个异步请求设置超时时间，并且在超时后执行相应的操作。

new Image要在浏览器里运行，node里没有这个API

function requestImg(){
    let p=new Promise((resolve,reject)=>{
        let img=new Image()
        img.onload=function(){
            resolve(img)
        }
        img.src='xxxxxx'
    })
    return p
}
function timeout(){
    let p=new Promise((resolve,reject)=>{
        setTimeout(()=>{
            reject('图片请求超时！')
        },1000)
    })
    return p
}

Promise.race([requestImg(),timeout()]).then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})