js-promise以及async、await

2021-02-05 10:16

阅读:340

标签:mis   http   嵌套   func   构造函数   resolve   参数   之一   过多   

一、回调

  1. 回调函数

    • 当一个函数A作为参数,传入另一个函数B中,某种情况下执行,作为参数的函数A,叫回调函数
    • 用处:
      • 获取异步的数据
      • 获取将来的数据
  2. 回调地狱

    • 当回调函数嵌套过多时
      • 格式混乱,不方便程序调试
      • 浪费性能
        技术图片
  3. 回调地狱解决了什么问题

    • 多层异步,嵌套的问题
  4. 更好的解决方式

    • 不产生回调地狱,实现多层异步的需求
      • ES6:Promise
        • 概念
          1. Promise是回调地狱的解决方案之一
          2. 我们使用Promise的语法来解回调地狱
          3. 是代码拥有可读写和维护性
        • 语法

二、Promise

  1. 概念
    • 承诺:分为三个状态:正在进行时,已完成,已失败
    • 完成和失败的状态只允许发生一次且一个
    • promise其实就利用原生js进行的封装
  2. 语法
    • Promise是个构造函数
      • new执行
        • 创建一个实例,实例身上有then方法和catch方法
        let p = new Promise((resolve,reject)=>{
            // 正在进行时....
        
            // 已完成
            resolve();
            // 已失败
            reject();
        })
        
        p.then(()=>{
            // 完成时要做的事情
            // 想做什么做什么
            return 新的promise实例2
        }).then(()=>{
            // 新的promise2的成功处理
            // 想做什么做什么
            return 新的promise实例3
        }).then(()=>{
            // 新的promise3的成功处理
            // 想做什么做什么
            return ......;
        })
        
        p.catch(()=>{
            // 失败时要做的事情
            // 想做什么做什么
            return 新的promise实例2
        }).catch(()=>{
            // 新的promise2的失败处理
            // 想做什么做什么
            return ......;
        })
        
      • 直接作为对象使用
        • Promise.all批量检测
        var p1 = new Promise(...);
        var p2 = new Promise(...);
        var p3 = new Promise(...);
        
        Promise.all([p1,p2,p3]).then((res)=>{
            // 全部成功时,要做的事情
            // res是个数组,内包含所有promise实例的成功之后的数据
        }).catch((res)=>{
            // 只要有一个失败,要做的事情
        })
        
  • 与服务器无关,只是,将来可能会用于解决在服务器环境中的程序中的某些问题

三、async / await

  • ES7提供,专门用于将异步的程序,模拟成同步执行

    • async用来标记一个函数是异步函数
    • await用来将异步的程序同步执行
      • await关键字必须出现在async标记的函数中
      • async的函数中没有await关键字,该怎样就怎样
    • await后需要跟一个Promise实例
    async function fn(){
        let a = await new Promise((success,error)=>{
            success("成功了");
        })
        console.log(a);
    
        let b = await new Promise((success,error)=>{
            error("失败了");
        })
        console.log(b);
    }
    fn();
    
  • 与服务器无关,只是,将来可能会用于解决在服务器环境中的程序中的某些问题

js-promise以及async、await

标签:mis   http   嵌套   func   构造函数   resolve   参数   之一   过多   

原文地址:https://www.cnblogs.com/piaoyi1997/p/13065797.html


评论


亲,登录后才可以留言!