Promise与async/await的区别

一、Promise是什么

简单说就是一个异步实现的对象，它或者可以解决掉问题，或者可以给予一个未能解决掉这个问题的原因。

二、为什么会有Promise

1、回调地狱 + 异步同步事件调用顺序带来的双重伤害

promise是一个异步函数，并且它能够解决地狱回调。地狱回调简单理解为回调中嵌套回调，当回调的层数太多了就会看起来很混乱。当然如果promise的then太多了，那么我们可以使用Generator或async/await

2、回调事件的分离

then返回的是一个新的promise，它是通过之前的一个promise返回值的不同进行不同方法的调用。即如果上一个promise成功了就执行第一个方法，如果上一个未成功就执行第二个方法。

三、Promise的三种状态

1、resolve

将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

2、reject

将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

3、pending

当前promise状态正在执行，状态只要改变，就会凝固不会再次变化，且方法只能被调用一次。

四，promise例子

function promiseClick(){
        let p = new Promise(function(resolve, reject){
            setTimeout(function(){
                var num = Math.ceil(Math.random()*20); //生成1-10的随机数
                console.log('随机数生成的值：',num)
                if(num<=10){
                    resolve(num);
                }
                else{
                    reject('数字太于10了即将执行失败回调');
                }
            }, 2000);
           })
           return p
       }
 
    promiseClick().then(
        function(data){
            console.log('resolved成功回调');
            console.log('成功回调接受的值：',data);
        }, 
        function(reason){
            console.log('rejected失败回调');
            console.log('失败执行回调抛出失败原因：',reason);
        }
    );    

什么是什么是async/await?

async/await是写异步代码的新方式，以前的方法有回调函数和promise

async/await是基于promose实现的，它不能用于普通的函数

async/await与promise一样，是非阻塞的

async/await使得异步代码看起来像同步代码

//使用promise
const maskRequet = () =>{
    getJSON().then(res=>{
        console.log(res)
    })
}
//使用async与await
const maskRequest = async() =>{
  let result = await getJSON()
  console.log(result)
}

区别：

1、函数的前面多了一个aynce关键字。await关键字只能用在aync定义的函数内。async函数会隐士地返回一个promise，该promise的reosolve值就是函数return的值。

2、也就是说await只能在aync函数内使用

为什么使用async/await比promise好？

//比如这样的场景，调用promise1 ， 使用promise1的返回结果去调用promise2，
//然后使用两者的结果去调用promise3
const maskRequest = () =>{
    return promise1().then(res1=>{
        return promise2(res1).then(res2=>{
            return promise3(res1,res2)
        })
    })
}
//使用async/await的话代码就变得异常的简单和直观
const maskRrequest =  async()=>{
    const res1 = await promise1()
    const res2 = await promoise2(res1)
    return await promise( res1 , res2 )
    
}

调试

async/await让代码调试变得简单。

1、promise不能在返回表达式的箭头函数中设置断点

2、如果你在.then代码块中设置断点，进入下一步的话，调试器不会跳到下一个.then，因为他只会跳过异步代码。

3、使用async/await时，不在需要那么多的箭头函数，这样调试就像调试同步代码一样。