• Promise 一： 基本问题

    目录

    1. Promise 是什么

    理解

    1. 抽象表达:

    2. promise 的状态改变

    3.promise 的基本流程

     4. promise 的基本使用

     2. 为什么要用 Promise?

     2.1. 指定回调函数的方式更加灵活

    2.2. 支持链式调用, 可以解决回调地狱问题

    3. 如何使用 Promise?

    3.1. API

    1. Promise 是什么

    理解

    1. 抽象表达:

        1) Promise 是一门新的技术 (ES6 规范 )
        2) Promise 是 JS 中进行异步编程的新解决方案
        备注：旧方案是单纯使用回调函数
    2. 具体表达 :
       1) 从语法上来说 : Promise 是一个构造函数
       2) 从功能上来说 : promise 对象用来封装一个异步操作并可以获取其成功 / 失败的结果值

    2. promise 的状态改变

    1. pending 变为 resolved
    2. pending 变为 rejected
    说明 : 只有这 2 种 , 且一个 promise 对象只能改变一次
    无论变为成功还是失败 , 都会有一个结果数据
    成功的结果数据一般称为 value, 失败的结果数据一般称为 reason

    3.promise 的基本流程

     4. promise 的基本使用

    使用 1: 基本编码流程

     

    使用 2: 使用 promise 封装基于定时器的异步

     

    使用 3: 使用 promise 封装 ajax 异步请求

     

     2. 为什么要用 Promise?

     2.1. 指定回调函数的方式更加灵活

    1. 旧的 : 必须在启动异步任务前通过回调函数指定 
    1. Promise之前的旧方案都是使用回调函数完成异步编程的操作
    2. 1、fs 文件操作 如 NodeJS 
    3.  
    4. require('fs').requireFile('./index.html',(error,data)=>{})
    5.  
    6. 2、数据库操作 如 MongoDB MySQL
    7.  
    8. 3、 AJAX 网络请求
    9.  
    10. $.get('/server',(data)=>{})
    11.  
    12. 4、定时器 setTimeout(()=>{},2000)

    2. promise: 启动异步任务 => 返回promie对象 => 给promise对象绑定回调函

    数 ( 甚至可以在异步任务结束后指定 / 多个 )

    2.2. 支持链式调用, 可以解决回调地狱问题

    1. 什么是回调地狱 ?
    回调函数嵌套调用 , 外部回调函数异步执行的结果是嵌套的回调执行的条件
    比如我要说一句话，语序必须是下面这样的：武林要以和为贵，要讲武德，不要搞窝里斗。如果他们都是异步任务的话，必须进行以下操作，才能保证顺序正确： 
    1.     setTimeout(function () {  //第一层
    2.         console.log('武林要以和为贵');
    3.         setTimeout(function () {  //第二程
    4.             console.log('要讲武德');
    5.             setTimeout(function () {   //第三层
    6.                 console.log('不要搞窝里斗');
    7.             }, 1000)
    8.         }, 2000)
    9.     }, 3000)

    使用promise就可以解决这个问题

    1.    function fn(str){
    2.             var p=new Promise(function(resolve,reject){
    3.                 //处理异步任务
    4.                 var flag=true;
    5.                 setTimeout(function(){
    6.                     if(flag){
    7.                         resolve(str)
    8.                     }
    9.                     else{
    10.                         reject('操作失败')
    11.                     }
    12.                 })
    13.             })
    14.             return p;
    15.         }
    16.  
    17.      fn('武林要以和为贵')
    18.     .then((data)=>{
    19.         console.log(data);
    20.         return fn('要讲武德');
    21.     })
    22.     .then((data)=>{
    23.         console.log(data);
    24.         return fn('不要搞窝里斗')
    25.     })
    26.     .then((data)=>{
    27.         console.log(data);
    28.     })
    29.     .catch((data)=>{
    30.         console.log(data);
    31.     })

    2. 回调地狱的缺点?

    不便于阅读
    不便于异常处理
    3. 解决方案 ?
    promise 链式调用
    4. 终极解决方案 ? 
    async/await

    3. 如何使用 Promise?

    3.1. API

    Promise 构造函数 : Promise (excutor) {}
    (1) executor 函数 : 执行器 (resolve, reject) => {}
    (2) resolve 函数 : 内部定义成功时我们调用的函数 value => {}
    (3) reject 函数 : 内部定义失败时我们调用的函数 reason => {}
    说明 : executor 会在 Promise 内部立即同步调用 , 异步操作在执行器中执行
    Promise.prototype.then 方法 : (onResolved, onRejected) => {}
    (1) onResolved 函数 : 成功的回调函数 (value) => {}
    (2) onRejected 函数 : 失败的回调函数 (reason) => {}
    说明 : 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调
    返回一个新的 promise 对象
    Promise.prototype.catch 方法 : (onRejected) => {}
    (1) onRejected 函数 : 失败的回调函数 (reason) => {}
    说明 : then() 的语法糖 , 相当于 : then(undefined, onRejected)
    Promise.resolve 方法 : (value) => {}
    (1) value: 成功的数据或 promise 对象
    说明 : 返回一个成功 / 失败的 promise 对象
    Promise.reject 方法 : (reason) => {}
    (1) reason: 失败的原因
    说明 : 返回一个失败的 promise 对象 
    1. // 1.创建一个新的promise对象
    2. const p = new Promise((resolve, reject) => {
    3.   // 执行器函数 同步回调
    4.   // 2.执行异步操作任务
    5.   setTimeout(() => {
    6.     const time = Date.now();
    7.     // 如果当前时间是偶数代表成功，否则代表失败
    8.     // 3.1 如果成功了，调用resolve(value)
    9.     if (time % 2 == 0) {
    10.       resolve("成功的数据, time=" + time);
    11.     } else {
    12.       // 3.2 如果失败了，调用reject(reason)
    13.       reject("失败的数据, time=" + time);
    14.     }
    15.   });
    16. }, 1000);
    17.  
    18. //如果传入的参数为 非Promise类型的对象, 则返回的结果为成功promise对象
    19. //如果传入的参数为 Promise 对象, 则参数的结果决定了 resolve 的结果
    20.  
    21. p.then(
    22.   (value) => {
    23.     // 接收得到成功的value数据
    24.     console.log("onResolved", value);
    25.   },
    26.   (reason) => {
    27.     // 接收得到失败的reason数据
    28.     console.log("onRejected", reason);
    29.   }
    30. );
     Promise.all 方法 : (promises) => {}
    (1) promises: 包含 n 个 promise 的数组
    说明 : 返回一个新的 promise, 只有所有的 promise 都成功才成功 , 只要有一个失败了就
    直接失败
      
    1.         let p1 = new Promise((resolve, reject) => {
    2.             resolve('OK');
    3.         })
    4.         // let p2 = Promise.resolve('Success');
    5.         let p2 = Promise.reject('Error');
    6.         let p3 = Promise.resolve('Oh Yeah');
    7.         
    8.         //
    9.         const result = Promise.all([p1, p2, p3]);
    10.  
    11.         console.log(result); // Uncaught (in promise) Error

    Promise.race 方法: (promises) => {}

    (1) promises: 包含 n 个 promise 的数组
     race就是赛跑的意思，意思就是说， Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果(只有一个)， 不管结果本身是成功状态还是失败状态。
    说明 : 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态 
    1. let p1 = new Promise((resolve, reject) => {
    2.   setTimeout(() => {
    3.     resolve('success')
    4.   },1000)
    5. })
    6.  
    7. let p2 = new Promise((resolve, reject) => {
    8.   setTimeout(() => {
    9.     reject('failed')
    10.   }, 500)
    11. })
    12.  
    13. Promise.race([p1, p2]).then((result) => {
    14.   console.log(result)
    15. }).catch((error) => {
    16.   console.log(error)  // 打开的是 'failed'
    17. })
  • 相关阅读:
    重新安装mysql时，Windows Service Name已经被占用了怎么办
    基于AntBlazor的学生在线练习系统实现过程的简单总结
    Python进阶——装饰器
    如何在线webp转JPG/PNG图片格式
    基于SpringBoot的小区物业管理系统
    佳易王美发店会员管理系统软件，操作简单扣次或充值消费，支持会员短信功能
    [杂记]C++中关于虚函数的一些理解
    01-Sentinel与spring-cloud的整合
    /.idea/workspace.xml漏洞以及解决方法
    面向对象编程(C++篇4)——RAII
  • 原文地址：https://blog.csdn.net/csdssdn/article/details/126124642