首页 > 其他分享 >前端Promise-Day41

前端Promise-Day41

时间:2022-10-01 19:22:06浏览次数:55  
标签:resolve 函数 前端 value Promise promise 回调 Day41

Promise的API:

Promise构造函数:Promise(executor{})

  • executor函数:执行器(resolve,reject)=>{}
  • resolve函数:内部定义成功时执行的函数
  • reject函数:内部定义失败时执行的函数

executor函数会在Promise内部立即同步调用,异步操作在执行器中执行。

 

Promise.prototype.then方法:(onResolved,onRejected)=>{}

  • onResolved函数:成功的回调函数(value)=>{}
  • onRejected函数:失败的回调函数(reason)=>{}

指定用于得到成功value回调和得到失败的reason回调,返回一个新的Promise对象。

 

Promise.prototype.catch方法:(onrejected) => {} 用于捕获失败的回调

Promise.resolve方法:(value) => {}

返回一个成功/失败的promise对象。

  • 如果value为非Promise类型的对象,则返回的结果为成功的Promise对象。
  • 如果value为Promise对象,则参数的结果决定了返回的结果。
let p1 = Promise.resolve(123)
console.log(p1)
// 返回Promise{123}
let p2 = Promise.resolve(new Promise((resolve, reject) => reject('Error')))
p2.catch(reason => {
    console.log(reason)
    // 对error进行捕获处理
})
console.log(p2)
// 返回 Promise{<rejected> 'Error'}

Promise.rejected方法:(reason) => {}

返回一个失败的Promise对象。状态为失败,结果为传入的参数值。

 

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

promises为包含n个promise的数组。返回一个新的promise对象,只有所有的promise成功才成功,有一个失败即失败。

 

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

返回一个新的promises对象,对象的状态为第一个完成promise结果的状态。


Promise状态修改:① resolve函数调用:pending=>resolved  ② reject函数调用:pending=>rejected  ③ throw抛出错误:pending=>rejected

 

改变Promise状态和指定回调函数执行先后顺序:均有可能。

  • 正常情况下,先指定回调函数,再进行状态改变。
  • 当执行器函数中为同步任务时,则先进行状态改变再进行指定回调函数。
  • 反之为异步任务时,先指定回调函数,再进行状态改变。

如果想先执行状态改变,再进行指定回调函数:① 直接再执行器内调用resolve/reject方法。② 延长更久时间调用then方法。

数据得到的时机:① 如果是先改变状态,则等指定回调函数后直接调用回调函数,得到数据。② 如果是先指定回调函数,则状态发生改变时就会调用回调函数,得到数据。

 

Promise的then方法执行完毕后新对象的状态:由then方法指定的回调函数的执行结果所决定

① 如果抛出异常,新promise状态变为rejected,reason为抛出的异常。

② 如果返回的是非promise的任意值,则新promise状态变为resolved,value为返回值。

③ 如果返回的是另一个新promise,则此promise的结果成为新promise的结果。

 

Promise可以串联多个操作任务:通过then方法,形成链式调用。

(then方法返回值为指定回调函数的返回值,嵌套时若指定的回调函数无返回值则当前返回值为undefined)

    let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('OK')
            }, 1000)
        })

        p.then(value => {
            return new Promise((resolve, reject) => {
                resolve('Success')
            })
        }).then(value => {
            console.log(value)
        }).then(value => {
            console.log(value)
            // 返回 undefined,由于指定的回调函数无返回值
        })    

 

Promise的异常穿透:当使用promise的then链式调用时,可以在最后指定失败的回调。前面操作出现的任何异常都会传到最后进行处理。

中断Promise链:只能采取返回pending状态的新Promise对象(利用数据返回的特点,状态一直为pending不能改变则回调函数不会执行,则不会执行后续操作)

let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('ok')
            }, 1000);
        })

        p.then(value => {
            console.log(value)
            return new Promise(() => { })
        }).then(value => {
            console.log(111)
        }).then(value => {
            console.log(222)
        })

 

Promise自定义封装:

若实现同步执行,则在构造函数内部直接调用

 

 

标签:resolve,函数,前端,value,Promise,promise,回调,Day41
From: https://www.cnblogs.com/LWHCoding/p/16747624.html

相关文章

  • #yyds干货盘点# 前端歌谣的刷题之路-第九十九题-getter
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从......
  • #yyds干货盘点# 前端歌谣的刷题之路-第一百题-控制动画
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从......
  • 能不能手写Vue响应式?前端面试进阶
    Vue视图更新原理Vue的视图更新原理主要涉及的是响应式相关APIObject.defineProperty的使用,它的作用是为对象的某个属性对外提供get、set方法,从而实现外部对该属性的......
  • 能不能手写Vue响应式?前端面试进阶
    Vue视图更新原理Vue的视图更新原理主要涉及的是响应式相关APIObject.defineProperty的使用,它的作用是为对象的某个属性对外提供get、set方法,从而实现外部对该属性的......
  • promise执行顺序面试题令我头秃,你能作对几道
    说明最近在复习Promise的知识,所以就做了一些题,这里挑出几道题,大家一起看看吧。题目一constpromise=newPromise((resolve,reject)=>{console.log(1);......
  • 【前端必会】走进webpack生命周期,另类的学习方法
    背景webpack构建过程中的hooks都有什么呢?除了在网上看一些文章,还可以通过更直接的办法,结合官方文档快速让你进入webpack的hook世界写一个入口文件//index.jsconstwebp......
  • 持续集成指南:Gitlab CI/CD 自动部署前端项目
    前言之前陆续写了Gitlab的安装使用还有GitlabCI/CD的配置使用,已经把AspNetCore的后端项目都做了持续集成了,尝到甜头之后,现在前端的项目也要加入自动化部署,所以经过......
  • 前端性能优化 之 加载性能优化
    前端性能优化,分为两个部分:加载性能优化渲染性能优化本篇随笔介绍加载性能优化。加载性能优化本质:1、减少请求次数2、减少请求资源的大小3、网络优化1、减少......
  • 开篇词 - 《重学前端》
    此专栏的目标并非是讲解知识点。而是建立自己的知识体系,根据个人的理解把前端的领域知识链接起来,形成结构。此专栏根据知识点分为四个模块来讲解: JavaScript:主要从文......
  • 前端Promise--Day40
    Promise:Promise是ES6的新技术,用于处理异步编程。(旧方案使用回调函数)从语法上来说,Promise是构造函数。从功能上来说,promise对象用来封装一个异步操作,且可以获取其成功和失......