Promise入门/面试必看

简介: Promise入门/面试必看

Promise入门/面试必看

一、理解

1、抽象表达

是JS中进行异步编程的新的解决方案(旧->纯回调函数)

2、具体表达

(1)语法上:Promise是一个构造函数

(2)功能上:Promise对象用来封装一个异步操作并可以获取其结果

二、状态的改变

1、pending(未确定)-> resolved(成功)

(1)resolve(value)

2、pending(未确定) -> rejected(失败)

(1)reject(reason)

(2)throw new Error(error)

三、基本使用

//(1)创建一个新的Promise对象
    const p = new Promise((resolve,reject)=>{//执行器函数  同步回调
    //(2)执行异步操作任务
    setTimeout(()=>{
      const time = Date.now()//获取当前时间
      if(time %2 ==0){
        //偶数代表成功
        resolve("成功了,time = "+ time)
      }else{
        //否则失败
        reject("失败了,time = "+ time)
      }
    },1000);
    })
    p.then(
    value =>{//接收成功的数据
      console.log("成功的回调:" + value)
    },
    reason =>{//接受失败的数据
      console.log("失败的回调:" + reason)
      }
    )

四、为什么要使用Promise

1、指定回调函数的方式更灵活

(1)旧的必须在启动异步任务之前指定回调函数

(2)promise:启动异步任务->返回promise对象->给promise对象绑定回调函数

2、支持链式调用,可以解决回调地狱

(1)回调地狱:回调函数嵌套调用->不便于阅读/不便于异常处理

(2)解决方案:promise链式调用

(3)终极解决方案:async、await

五、all()和race()

1、all()

const p1 = new Promise((resolve,reject)=>{
      resolve(1)
    })
const p2 = Promise.resolve(2)
const p4 = Promise.reject(4)
const pAll = Promise.all([p1,p2,p3,p4])
const pAll2 = Promise.all([p1,p2])
pAll.then(
    values => {
        console.log('all onResolved()',values)
    },
    reason => {
        console.log('all onrejected()',reason)
    }
)
pAll2.then(
    values => {
        console.log('all2 onResolved()',values)
    },
    reason => {
        console.log('all2 onrejected()',reason)
    }
)
//运行结果
//all onReasoned() 3 返回第一个失败的reason
//all2 onrejected() [1, 2] 全部成功时返回成功的value集合

2、race()

const pRace = Promise.race([p1,p2,p3])
const pRace2 = Promise.race([p3,p1,p2])
pRace.then(
    value => {
        console.log('race onResolved()',value)
    },
    reason => {
        console.log('race onrejected()',reason)
    }
)
pRace2.then(
    value => {
        console.log('race2 onResolved()',value)
    },
    reason => {
        console.log('race2 onrejected()',reason)
    }
)
//运行结果
//返回第一个执行的结果,根据实际执行时间
//race onResolved() 1  
//race2 onrejected() 3

六、注意点

1、一个promise可以指定多个成功/失败回调函数,可以执行多个不同操作。

2、promise可以串连多个操作任务

(1)通过then()返回一个新的promise,可以开成then()的链式调用

(2)通过then的链式调用可以串连多个同步/异步任务

3、promise的异常传透

(1)使用promise的then()链式调用时,可以在最后指定失败的回调(catch)

(2)前面的任何操作出了异常,都会传到最后失败的回调中处理(reason => {throw reason} 、reason=> Promise.reject()reason)

4、中断promise链

(1)使用promise的then()链式调用时,想要中止调用,使链式调用结束

(2)方法:return new Promise(()=>{}) //返回一个pending状态的promise

目录
相关文章
|
1月前
|
存储 前端开发 JavaScript
关于 ES6 中 Promise 的面试题
关于 ES6 中 Promise 的面试题
16 0
|
3月前
|
存储 Java 编译器
|
3月前
|
缓存 Java 编译器
|
6月前
|
移动开发 缓存 JavaScript
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度
101 6
|
6月前
|
机器学习/深度学习 数据采集 算法
2024年机器学习入门,2024年最新字节跳动视频面试一般多久会收到结果
2024年机器学习入门,2024年最新字节跳动视频面试一般多久会收到结果
2024年机器学习入门,2024年最新字节跳动视频面试一般多久会收到结果
|
6月前
|
JavaScript 前端开发 程序员
web前端入门到实战:32道常见的js面试题(1),面试哪些
web前端入门到实战:32道常见的js面试题(1),面试哪些
|
6月前
|
JSON JavaScript 前端开发
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
|
6月前
|
数据采集 算法 Python
2024年Python最全python基础入门:高阶函数,小米面试编程题
2024年Python最全python基础入门:高阶函数,小米面试编程题
|
6月前
|
算法 Java C++
刷题两个月,从入门到字节跳动offer丨GitHub标星16k+,美团Java面试题
刷题两个月,从入门到字节跳动offer丨GitHub标星16k+,美团Java面试题
|
6月前
|
JavaScript 前端开发 程序员
javascript基础(入门),当上项目经理才知道,推荐程序员面试秘籍
javascript基础(入门),当上项目经理才知道,推荐程序员面试秘籍