当前位置：首页 > news >正文

前端一文搞懂Promise 再也不害怕面试官问的问题啦~

news 2025/5/9 10:25:24

前端面试，前端Promise一文搞懂（只讲解工作中能用到的方法）

一、Promise的出现是为了解决异步的嵌套问题，导致代码太多严重的时候可能会出现嵌套地狱的问题
二、Promise的返回值解析（pedding fulfilled rejected）
1、pedding 当promise 状态没有被改变的时候一直会处在pedding状态，我们可以把它当作等待状态
2、pedding 当promise 状态有被改变的时候（调用resolve),那么promise会处在fulfilled状态，我们可以把它当作请求成功状态
3、pedding 当promise 状态有被改变的时候（调用reject),那么promise会处在rejected状态，我们可以把它当作请求拒绝状态
三、看成功的回调效果
在这里插入图片描述
源代码截图：

源代码：

// 1.promise  Async await// 2.proxy// 3.Module
import React from 'react'export default function index() {// 同步和异步   同步是按照顺序  常见的异步 ：定时器  Ajaxconst p1 = new Promise((resolve, reject) => {resolve('任务1:成功')// reject('失败')})//调用resolvep1.then((res)=>{console.log(res);return new Promise((resolve, reject) => {resolve('任务2:成功')// reject('失败')})},err=>{console.log('任务1:失败');//任务1的失败结果可能会被任务2的失败结果捕获throw new Error('任务1失败')}).then((res)=>{console.log(res)},err=>{console.log('任务2:失败');})console.log(p1)return (<div></div>)
}

四、看失败的回调效果
在这里插入图片描述
源代码截图：
源码：

// 1.promise  Async await// 2.proxy// 3.Module
import React from 'react'export default function index() {// 同步和异步   同步是按照顺序  常见的异步 ：定时器  Ajaxconst p1 = new Promise((resolve, reject) => {// resolve('任务1:成功')reject('失败')})//调用resolvep1.then((res)=>{console.log(res);return new Promise((resolve, reject) => {// resolve('任务2:成功')reject('失败')})},err=>{console.log('任务1:失败');//任务1的失败结果可能会被任务2的失败结果捕获throw new Error('任务1失败')}).then((res)=>{console.log(res)},err=>{console.log('任务2:失败');})console.log(p1)return (<div></div>)
}