浅学promise（承诺）、async 、await （异步、等待）

 

一、回调函数的缺点

在学习promise之前，我们先了解一下什么是回调函数

有时候我们会遇到多个异步操作，一层嵌套一层，代码的可读性很低，也很复杂，非常容易懵圈

        setTimeout(()=>{
            console.log('回调了一次');
            setTimeout(()=>{
                console.log('回调了两次');
                setTimeout(()=>{
                console.log('回调了三次');
                    ......
                    ......
                },3000)
            },3000)
        },3000)

总结：回调地狱就是为是实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。

二、promise（承诺）

Promise 是异步编程的一种解决方案： 从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。

promise三个状态：

1，pendding 未确定
2，resolved 成功
3，rejected 失败
注：状态只能改变一次，成功数据称为value，失败称为reason

一般我们碰到的回调嵌套都不会很复杂，但是也是会碰到多层嵌套时，会觉得代码非常的繁琐，这就叫“回调地狱”，代码可读性差。这时候至尊宝（promise）就来了

then方法时promise的核心，then返回一个promise函数，而一个promise也可以多次调用then方法

promise的使用

       const p = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                let random = Math.floor(Math.random()*10)
                if(random >= 5){
                    resolve('数字大于5,随机数为:' + random)
                }else{
                    reject('数字小于5,随机数为:' + random)
                }
            },1000)
        })

        // then需要传两个回调函数
        //value和reason是两个形参，可以替换
        //两个形参也是函数形式
        p.then(
            (value)=>{
                console.log('resolve' ,value);
            },
            (reason)=>{
                console.log('reject' ,reason);
            }
        )

 为什么要使用promise

1.指定回调函数的方式灵活，可以在异步任务前指定也可以在异步任务后指定，而以前指定回调函     数必须在异步任务开始前指定。
2.支持链式调用，可以解决回调地狱问题
3.回调地狱：回调函数嵌套调用，内层的回调函数需要的条件是外层异步执行的结果。不便于阅读     还有异常处理，
4.解决方案：promise链式调用。

三、async、await（异步、等待）

async关键字
async用于修饰一个函数，函数的返回值为一个promise对象，该promise对象的状态由函数返回值决定，如果没有返回值并且没有抛出异常，那么相当于：return Promise.resolve()，如果函数抛出异常，则返回的promise对象状态为rejected。

       async function fn(){   //async关键字声明函数为异步函数
            return 1;
        }
        console.log(fn());

 可以看到使用async关键字，自动把fu()函数封装成一个promise对象

 

await关键字

1.await 也是一个修饰符，只能放在async定义的函数内。可以理解为等待。

2.await 修饰的如果是Promise对象：可以获取Promise中返回的内容（resolve或reject的参数），且取到值后语句才会往下执行；如果不是Promise对象：把这个非promise的东西当做await表达式的结果。

3​.await后面可以直接跟一个 Promise实例对象（可以跟任何表达式，更多的是跟一个返回Promise对象的表达式）

4.await函数不能单独使用

5.await可以直接拿到Promise中resolve中的数据。

 

       async function fun(){
        let a = await 1;
        let b = await new Promise((resolve,reject)=>{
            setTimeout(function(){
              resolve('setTimeout')
          },3000)
         })
         let c = await function(){
             return 'c'
         }()
         console.log(a,b,c)
        }
        fun(); // 3秒后输出： 1 "setTimeout" "c"