首页 > 其他分享 >Promise

Promise

时间:2022-12-02 22:24:30浏览次数:37  
标签:异步 存储 调用 函数 Promise result

Promise

1.Promise的前置知识

  • 进程(厂房)

    • 程序的运行环境
  • 线程(工人)

    • 线程是实际进行运算的东西
  • 同步

    • 通常情况代码都是自上向下一行一行执行的
    • 前边的代码不执行后边的代码页不会执行
    • 同步的代码执行会出现阻塞的情况
    • 一行代码执行慢会影响到整个程序的执行
  • 解决同步的问题:

    • java python

      • 通过多线程来解决,但是一般消耗资源比较多
    • node.js

      • 通过异步方式来解决

        我们可以这么理解:客人就好比我们请求的数据,服务员就好比客户端,厨师就好比服务器,我们现在客人点菜,服务员接收到菜的名称信息,给厨师说,厨师开始做,厨师在做的时候,客人一直等,不能干其他的事情,这就是同步,只能干一件事,我们现在利用异步的方式,可以让客人在课桌上等着菜来,也不影响服务员接收下一个客人的点菜,这样就可以很好的处理同步所带来的堵塞问题

  • 异步

    • 一段代码的执行不会影响到其他的程序

    • 异步的问题:

      • 异步的代码无法通过return来设置返回值
    • 特点:

      1. 不会阻塞其他代码的执行

      2. 需要通过回调函数来返回结果

        function sum(a, b, cb) {
            setTimeout(() => {
                cb(a + b)  //调用箭头函数,把结果作为回调函数的参数
            }, 1000)
        }
        
        sum(123, 456, (result)=>{
            console.log(result)
        })
        
    • 基于回调函数的异步带来的问题

      1. 代码的可读性差

      2. 可调试性差(造成回调地狱)

        sum(123, 456, (result)=>{
            sum(result, 7, (result)=>{
                sum(result, 8, result => {
                    sum(result, 9, result => {
                        sum(result, 10, result => {
                            console.log(result)
                        })
                    })
                })
            })
        })
        
    • 解决问题:

      • 需要一个东西,可以代替回调函数来给我们返回结果
      • Promise横空出世
        • Promise是一个可以用来存储数据的对象
          • Promise存储数据的方式比较特殊,这种特殊的方式使得Promise可以用来存储异步调用的数据

2.Promise介绍

异步调用必须要通过回调函数来返回数据,当我们进行一些复杂的调用时,会出现回调地狱

问题:

​ 异步必须通过回调函数来返回结果,回调函数增加就不容易处理

  • Promise
    • Promise可以帮助我们解决异步中的回调函数的问题
    • Promise就是一个用来存储数据的容器
      • 它拥有着一套特殊的存储数据的方式
      • 这个方式使得它里面可以存储异步调用的结果
  1. 创建Promise

    1. 创建Promise时,构造函数中需要一个函数作为参数

    2. Promise构造函数的回调函数,它会在创建Promise时调用,调用时会有两个参数传递进去

      const promise = new Promise((resolve, reject)=>{
          // resolve 和 reject 是两个函数,通过这两个函数可以向Promise中存储数据
          // resolve 在执行正常的时候存储数据, reject 是在执行错误的时候存储数据
          resolve('我是正常执行的时候调用的')
          reject('我是错误执行的时候调用的')
          //通过函数来访问Promise中添加数据,好处就是可以用来添加异步调用的数据
          setTimeout(()=>{
              resolve('异步中调用数据')
      	},2000)
          throw new Error('出错了,调用的是reject')
      })
      
  2. 从Promise中读取数据

    1. 可以通过Promise的实例方法then来读取Promise中存储的数据

    2. then需要两个回调作为参数,回调函数来获取Promise中的数据

      1. 通过resolve存储的数据,会调用第一函数返回,可以在第一个函数中编写处理数据的代码

      2. 通过reject存储数据或者出现异常时,会调用第二个函数返回,可以在第二个函数中编写处理异常的代码

        promise.then((result)=>{
            console.log('1',result)
        },(reson)=>{
            console.log('2',reason)
        })
        
  3. Promise中维护了两个隐藏属性:

    1. PromiseResult
      1. 用来存储数据
    2. PromiseState
      1. 记录Promise的状态(三种状态)
        1. pending(进行中)
        2. fulfilled(完成)通过resolve存储数据时
        3. rejected(拒绝,出错了)出错了或通过reject存储数据时
      2. state只能修改一次,修改以后永远不会在变
    3. 流程:
      1. 当Promise创建时,PromiseState初始值为pending
        1. 当通过resolve存储数据时 PromiseState 变为fulfilled(完成)
          1. PromiseResult变为存储的数据
        2. 当通过reject存储数据或出错时 Promise 变为rejected(拒绝)
          1. PromiseResult变为存储的数据 或 异常对象
      2. 当我们通过then读取数据时,相当于为Promise设置了回调函数
        1. 如果PromiseState变为fulfilled,则调用then的第一个回调函数来返回数据
        2. 如果PromiseState变为rejected。则调用then的第二个回调函数来返回数据
    const promise2 = new Promise((resolve, reject) => {
        resolve("哈哈")
    })
    
    // console.log(promise2)
    promise2.then(result => {
        console.log(result)
    }, reason => {
        console.log("出错了")
    })
    
  4. catch()用法和then类似,但是只需要一个回调函数作为参数

    1. catch() 中的回调只会在Promise被拒绝时才会调用

    2. catch() 相当于 then(null, reason=>{})

    3. catch() 就是一个专门处理Promise异常的方法

      promise2.catch(reason => {
          console.log(222222)
      })
      
  5. finally()

    1. 无论是正常存储数据还是出现异常了,finally总会执行

    2. 但是finally的回调函数中不会接收到数据

    3. finally()通常用来编写一些无论成功与否都要执行的代码

      promise2.finally(()=>{
          console.log("没有什么能够阻挡我执行的!")
      })
      

标签:异步,存储,调用,函数,Promise,result
From: https://www.cnblogs.com/taotaoFrontEndDevelopment/p/16945796.html

相关文章

  • 模拟Promise的功能
    模拟Promise的功能, 按照下面的步骤,一步一步1.新建是个构造函数2.传入一个可执行函数函数的入参第一个为fullFill函数第二个为reject函数;函数立即执行,参数......
  • [JavaScript] 自顶向下学习如何手写promise
    引子去年写了一篇有关promise的手写文章,写到一半发现自己的理解还不是很透彻,写的很烂,今年卷土重来,实现部分采用功能分解,目录跳转的形式呈现,力求最通俗易懂得剖析promise,我......
  • Promise手动实现和Async Await拓展(JavaScript)
    Promise手动实现咱们来看一段Promise的代码:letp1=newPromise((resolve,reject)=>{resolve('成功')reject('失败')![]()})console.log('p1',p1)le......
  • 【面试题】前端人70%以上 不了解的promise/async await
    前言  今天给大家分享promise,笔者将从早期的异步代码的困境、promise出现解决了什么问题、异步回调地狱的终极方案并且实现asyncawait的核心语法,其实async/await只是gene......
  • 【面试题】吃透Promise?先实现一个再说(包含所有方法)
    前言在网上阅读过很多关于实现promise的文章,大致分为2类,一种是基于promiseA+规范,一种是基于ECMA规范和v8引擎下的promise,对于A+规范可以快速让我们理解promise的核心,但对些......
  • react 通过axios获取数据 出现promise为pending——使用await获取Promise对象的Promis
    1.await必须在async定义的方法中使用lete=await78910;console.log(e); 2.当await右边为一个PromiseState为fulfilled的Promise对象时,则返回其PromiseResult值asyncfun......
  • Promise的简单用法
    什么是Promise?Promise是异步编程的一种解决方案,其实是一个构造函数,自己身上有all、reject、resolve这几个方法,原型上有then、catch等方法。Promise对象有以下两个特点。......
  • async/await + Promise解决异步问题
    比如小程序的获取openid,首先getOpenID需要借助Promise实现,然后才可以使用async和await来同步(Vue同样如此)Page({/***生命周期函数--监听页面加载*/asynconL......
  • Vue获取到 Promise {<pending>} 数的格式解析方法
    Promise.all([request({url:urlPrefix_custom,method:'get',params:querys})]).then((res)=>{console.log("---......
  • java promise
    java模拟javascripe的promise 必须通过Callable接口,通过主线程阻塞监听 futures[j].get();来保证任务执行完毕.示例代码publicclassTestV{publicstatic......