吊打面试官:promise原理详解

简介: 吊打面试官:promise原理详解

什么是promise

Promise是一种异步编程的解决方案。在异步操作中,callback会导致回调地狱的问题,Promise解决了这个问题。


一个Promise代表了一个异步操作,它有三种状态:pending(等待态)、fulfilled(成功态)和rejected(失败态)。当异步操作执行成功后,Promise会从pending转变成fulfilled状态,此时会调用resolve方法并传递返回结果;当异步操作执行失败后,Promise会从pending转变为rejected状态,此时会调用reject方法并传递错误信息。


在使用Promise时,通常会调用其then()方法来处理异步操作的结果,或者调用catch()方法来处理出错信息。同时,Promise还提供了一些静态方法,如Promise.resolve()、Promise.reject()等用于快速创建一个Promise实例。


如何创建promise对象

创建Promise对象有两种方式:


通过Promise构造函数,也称为Promise的手动化管理方式。使用这种方式需要向Promise构造函数传入一个函数,该函数接受两个参数,resolve和reject,分别表示异步操作成功和失败后的回调函数。使用resolve方法可以让Promise状态变为成功态(fulfilled),使用reject方法可以让Promise状态变为失败态(rejected)。


通过静态方法创建一个Promise对象,也称为Promise的自动化管理方式。比如,Promise.resolve()可以创建一个状态为成功的Promise对象,Promise.reject()可以创建一个状态为失败的Promise对象。


下面是两种方式的代码示例:

// 第一种方式,手动管理
let promise = new Promise((resolve, reject) => {
  if (你的判断逻辑) {
    resolve('成功');
  } else {
    reject('失败');
  }
});
// 第二种方式,自动管理
let promise = Promise.resolve('successful');
let promise = Promise.reject('failed');

对于第一种方式,需要手动判断成功还是失败,比如你获取用户信息:

// 定义一个函数,用于获取用户信息
function getUserInfo(userId) {
  // 使用Promise手动管理异步操作
  return new Promise(function(resolve, reject) {
    // 假设获取用户信息是一个异步操作,需要一定时间
    setTimeout(function() {
      // 假设获取到了用户信息
      let user = { id: userId, name: '张三', age: 18 };
      // 判断用户是否存在
      if (user) {
        // 如果存在,使用resolve方法将Promise状态变为成功态
        resolve(user);
      } else {
        // 如果不存在,使用reject方法将Promise状态变为失败态
        reject('用户不存在');
      }
    }, 1000);
  });
}
// 调用getUserInfo函数获取用户信息
getUserInfo('001')
  .then(function(user) {
    // 如果获取用户信息成功,将打印用户信息
    console.log(user);
  })
  .catch(function(error) {
    // 如果获取用户信息失败,将打印错误信息
    console.log(error);
  });

在该例子中,使用Promise手动管理异步操作。在getUserInfo函数中创建了一个Promise对象,将异步操作封装在其中,当异步操作执行成功时,使用resolve方法将Promise状态变为成功态,并传递用户信息,当异步操作执行失败时,使用reject方法将Promise状态变为失败态,并传递错误信息。使用then方法和catch方法分别处理Promise的状态变化,如果Promise状态变为成功态,将打印用户信息,如果Promise状态变为失败态,将打印错误信息。


这样就比较清晰了吧。


关于第二种方式,也给一个例子:

// 模拟一个异步操作函数
function asyncFunction() {
  return new Promise((resolve, reject) => {
    // 模拟一个异步操作,2秒钟后将结果返回
    setTimeout(() => {
      resolve('success');
    }, 2000);
  });
}
// 返回一个已解决的Promise对象,并使用函数返回值作为解决结果
Promise.resolve(asyncFunction())
  .then((value) => {
    console.log('异步操作执行成功', value);
    // 在这里处理异步操作执行成功的情况
  })
  .catch((error) => {
    console.error('异步操作执行失败', error);
    // 在这里处理异步操作执行失败的情况
  });

在这个例子中,我们定义了一个asyncFunction()函数,该函数返回一个Promise对象,在Promise对象的构造函数中使用setTimeout模拟了一个异步操作。然后我们使用Promise.resolve()方法将异步操作函数的返回值转换成一个自动管理状态的Promise对象。最后,我们在使用Promise.resolve()方法返回的Promise对象上使用.then()方法和.catch()方法处理异步操作成功或失败的情况。


使用Promise.resolve()方法的好处在于,如果被传入的参数本来就是一个Promise对象,那么直接返回这个Promise对象,如果不是Promise对象,会自动转换成Promise对象,方便在异步操作逻辑中使用。


无论是哪种方式,创建的Promise对象都将具有pending(等待态)状态,调用resolve或reject方法可以改变其状态,并传递相应的值或错误。


promise的then和catch?

then()和catch()方法是Promise对象的原型方法,用于处理异步操作的结果或错误。


then() 方法用来指定当异步操作执行成功时要执行的回调函数。它接受两个参数:第一个参数是成功的回调函数,在异步操作成功时调用;第二个参数是可选的失败的回调函数,在异步操作失败时调用。


catch() 方法用来指定当异步操作执行失败时要执行的回调函数。它只有一个参数,用于指定异步操作失败时要执行的回调函数。


通常情况下,我们会将then()方法和catch()方法串联起来使用,以处理异步操作的返回结果或错误。


以下是一个使用then()方法和catch()方法处理异步操作的例子:


// 模拟一个异步操作函数
function getData() {
  return new Promise((resolve, reject) => {
    // 模拟一个异步操作,2秒钟后将结果返回
    setTimeout(() => {
      resolve({id: 1, name: 'abc'});
    }, 2000);
  });
}
// 处理异步操作的结果
getData()
  .then((data) => {
    console.log('异步操作成功', data);
    // 在这里对异步操作的结果进行处理
  })
  .catch((error) => {
    console.error('异步操作失败', error);
    // 处理异步操作的错误情况
  });

在这个例子中,我们定义了一个getData()函数,该函数返回一个Promise对象,在Promise对象的构造函数中使用setTimeout模拟了一个2秒钟的异步操作。然后,我们使用.then()方法来处理异步操作的结果,如果异步操作成功,就会输出返回的数据对象;否则,我们使用.catch()方法来处理异步操作的错误,如果异步操作失败,就会输出错误信息。


在完整的异步操作逻辑中,我们使用.then()方法和.catch()方法来处理异步操作成功或失败的情况。通过将这两个方法链式调用,可以构造出复杂的异步操作链。


关于then的第二个参数和catch

then()方法和catch()方法是不同的方法,虽然它们都用于处理异步操作的结果或错误。


then()方法有两个参数,第一个参数是当异步操作成功时要调用的回调函数,第二个参数是当异步操作失败时要调用的回调函数。例如:


promise.then(onFulfilled, onRejected); 如果Promise对象在调用then()方法时状态已经变成了已解决(resolved),则会立即调用第一个参数onFulfilled指定的回调函数。如果在调用then()方法时Promise对象的状态还未被解决,onFulfilled回调函数会被存储在一个队列中,并在Promise对象的状态变成已解决时被依次调用。


如果Promise对象在调用then()方法时状态已经变成了已拒绝(rejected),则会立即调用第二个参数onRejected指定的回调函数。如果在调用then()方法时Promise对象的状态还未被解决,onRejected回调函数会被存储在一个队列中,并在Promise对象的状态变成已拒绝时被依次调用。


因此,如果你需要处理Promise对象的成功和失败两种情况,你可以将两个回调函数分别传递给then()方法的两个参数。但是,如果你只需要处理Promise对象的失败情况,你可以将一个回调函数传递给catch()方法,这等价于将该回调函数作为then()方法的第二个参数来调用。例如: promise.then(null, onRejected); 和promise.catch(onRejected); 是等价的。


finally

finally()方法是Promise对象的原型方法,用于指定不论Promise对象状态如何都要被执行的回调函数,通常用来执行释放资源、清理操作等最终操作。


finally()方法只有一个参数,就是要执行的回调函数。这个回调函数在Promise对象状态变为已解决(resolved)或已拒绝(rejected)时都会被执行,无论如何都会执行。以下是一个使用finally()方法的例子:

function asyncFunction() {
  return new Promise((resolve, reject) => {
    // 模拟一个异步操作,2秒钟后将结果返回
    setTimeout(() => {
      resolve('success');
    }, 2000);
  });
}
// 在异步操作结束后执行清理操作
asyncFunction()
  .then((value) => {
    console.log('异步操作成功', value);
    // 在这里对异步操作的结果进行处理
  })
  .catch((error) => {
    console.error('异步操作失败', error);
    // 处理异步操作的错误情况
  })
  .finally(() => {
    console.log('清理操作已执行');
    // 在这里执行清理操作,无论异步操作成功还是失败都会执行
  });

在这个例子中,我们定义了一个asyncFunction()函数,该函数返回一个Promise对象,在Promise对象的构造函数中使用setTimeout模拟了一个异步操作。然后,我们使用.then()方法来处理异步操作的结果,使用.catch()方法来处理异步操作的错误,使用.finally()方法在异步操作状态变为已解决或已拒绝时执行一些清理操作。


在完整的异步操作逻辑中,我们通常会在finally()方法中释放资源、关闭文件描述符、清理缓存等操作。这些最终操作无论异步操作是否成功、如何结束,都必须执行,保证程序的正确性和资源的安全性。


6.promise的实例方法 then catch finally finally他不管promise 状态是成功还是失败 都会执行的操作。


promise 三个常用静态方法

Promise.all()

Promise.all()方法用于将多个Promise实例包装成一个新的Promise实例,当所有Promise实例都变为fulfilled状态后,才返回新的Promise实例;其中任何一个Promise实例变为rejected状态,都会直接返回rejected状态的Promise实例。

const promise1 = Promise.resolve(1);
const promise2 = 2;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 3);
});
Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // [1, 2, 3]
});

Promise.all()方法通常用于处理需要同时获取多个数据的情况,并将这些数据合并为一个结果返回。例如,在一个Web应用程序中,用户在提交订单时需要同时更新订单和用户信息,这时候就可以使用Promise.all()方法一次性向服务器发送两个请求,等待两个Promise都进入fulfilled状态后再进行下一步操作。


另外,Promise.all()方法也可以用于并行处理多个HTTP请求或I/O操作,以提高程序的执行效率。例如,我们从网站中获取多条数据,这些数据都需要通过HTTP请求来获取,在所有Promise进入fulfilled状态后,我们可以将这些数据进行合并,并对它们进行排序、过滤等操作。这样一来,我们就可以在不阻塞主线程的情况下,在较短的时间内获取到多个数据,提高了应用程序的响应速度和用户体验。


除了上述使用场景之外,Promise.all()方法还可以用于多个耗时操作的并行执行和等待,例如读取多个文件、并发执行多个函数等。总之,Promise.all()方法在项目中具有很多实际使用场景,可以帮助我们优化和改进代码的执行效率和用户体验。


Promise.race()

Promise.race()方法同样是将多个Promise实例包装成一个新的Promise实例,但是只要有一个Promise 实例状态发生变化,就将新的Promise实例的状态改变,且终值由第一个完成的 Promise提供。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('promise1 resolved'), 2000);
});
const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('promise2 resolved'), 1000);
});
const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('promise3 resolved'), 3000);
});
Promise.race([promise1, promise2, promise3]).then((value) => {
  console.log(value); // 'promise2 resolved'
});

Promise.race()方法也有许多实际使用场景。它可以用于处理需要快速获取结果的情况,例如,当我们向多个不同的服务器请求同一个资源时,我们可以使用Promise.race()方法来获取最快返回结果的服务器的响应,并忽略其他服务器的响应结果。或者,在一个Web应用程序中,我们需要在指定的时间内获取用户的同步输入和异步请求结果,我们可以使用Promise.race()方法同时监听用户输入事件和请求结果事件,一旦其中有一个事件触发,就可以立即返回响应结果,提高应用程序的响应速度和用户体验。


另外,Promise.race()方法还可以用于处理超时情况,例如,在一个HTTP请求的响应时间超过一定时间后,我们可以使用Promise.race()方法将该请求和一个延迟一定时间的Promise实例包装起来,一旦有一个Promise进入fulfilled状态,就可以立即返回响应结果。如果请求在规定的时间内仍未返回,则将其取消并返回一个错误信息给用户,以提高应用程序的可用性和稳定性。


Promise.any()

Promise.any()方法会对多个Promise进行竞争,直到有一个Promise进入Fulfilled状态,Promise实例返回该Promise的结果。如果所有Promise都进入Rejected状态,则返回失败状态,其中维护Promise及其状态的任何提示返回数组都是必需的。


const promises = [
  Promise.reject(1),
  Promise.reject(2),
  Promise.resolve(3),
];
Promise.any(promises)
  .then((value) => console.log(value))
  .catch((error) => console.log(error)); // 3

如果所有的promise都是reject的,就抛出异常:

const promises = [
  Promise.reject('error 1'),
  Promise.reject('error 2')
];
Promise.any(promises)
  .then((value) => console.log(value))
  .catch((err) => console.log(err));


打印 AggregateError: All promises were rejected


Promise.any()方法可以用于处理多种资源竞争的情况,例如,在一个抢单系统中,多个用户需要争夺同一个订单,系统将同时向多个用户发送请求,并使用Promise.any()方法监听所有请求的状态,一旦有一个用户成功抢到订单,系统就立即返回订单信息并发送通知给该用户,从而提高了用户的参与度和系统的可用性。


除此之外,Promise.any()方法还可以用于指定默认值或备选方案,例如,在一个多语言网站中,我们需要从多个API获取多语言翻译结果,但有些API可能由于网络原因或其他问题无法正常工作,这时候我们就可以使用Promise.any()方法来一次性向多个API发送请求,并设置一个默认值或备选方案,一旦有一个API正常返回翻译结果,就立即返回结果给用户,如果所有API都无法正常工作,则返回默认值或备选方案。


相关文章
|
2月前
|
消息中间件 存储 缓存
大厂面试高频:Kafka 工作原理 ( 详细图解 )
本文详细解析了 Kafka 的核心架构和实现原理,消息中间件是亿级互联网架构的基石,大厂面试高频,非常重要,建议收藏。关注【mikechen的互联网架构】,10年+BAT架构经验倾囊相授。
大厂面试高频:Kafka 工作原理 ( 详细图解 )
|
1月前
|
存储 SQL 关系型数据库
MySQL进阶突击系列(03) MySQL架构原理solo九魂17环连问 | 给大厂面试官的一封信
本文介绍了MySQL架构原理、存储引擎和索引的相关知识点,涵盖查询和更新SQL的执行过程、MySQL各组件的作用、存储引擎的类型及特性、索引的建立和使用原则,以及二叉树、平衡二叉树和B树的区别。通过这些内容,帮助读者深入了解MySQL的工作机制,提高数据库管理和优化能力。
|
4天前
|
Java Linux 调度
硬核揭秘:线程与进程的底层原理,面试高分必备!
嘿,大家好!我是小米,29岁的技术爱好者。今天来聊聊线程和进程的区别。进程是操作系统中运行的程序实例,有独立内存空间;线程是进程内的最小执行单元,共享内存。创建进程开销大但更安全,线程轻量高效但易引发数据竞争。面试时可强调:进程是资源分配单位,线程是CPU调度单位。根据不同场景选择合适的并发模型,如高并发用线程池。希望这篇文章能帮你更好地理解并回答面试中的相关问题,祝你早日拿下心仪的offer!
21 6
|
5月前
|
JavaScript 前端开发
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
这篇文章主要讨论了axios的使用、原理以及源码分析。 文章中首先回顾了axios的基本用法,包括发送请求、请求拦截器和响应拦截器的使用,以及如何取消请求。接着,作者实现了一个简易版的axios,包括构造函数、请求方法、拦截器的实现等。最后,文章对axios的源码进行了分析,包括目录结构、核心文件axios.js的内容,以及axios实例化过程中的配置合并、拦截器的使用等。
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
|
25天前
|
Java 数据库连接 Maven
最新版 | 深入剖析SpringBoot3源码——分析自动装配原理(面试常考)
自动装配是现在面试中常考的一道面试题。本文基于最新的 SpringBoot 3.3.3 版本的源码来分析自动装配的原理,并在文未说明了SpringBoot2和SpringBoot3的自动装配源码中区别,以及面试回答的拿分核心话术。
最新版 | 深入剖析SpringBoot3源码——分析自动装配原理(面试常考)
|
5月前
|
安全 Java 容器
【Java集合类面试二十七】、谈谈CopyOnWriteArrayList的原理
CopyOnWriteArrayList是一种线程安全的ArrayList,通过在写操作时复制新数组来保证线程安全,适用于读多写少的场景,但可能因内存占用和无法保证实时性而有性能问题。
|
2月前
|
存储 算法 Java
大厂面试高频:什么是自旋锁?Java 实现自旋锁的原理?
本文详解自旋锁的概念、优缺点、使用场景及Java实现。关注【mikechen的互联网架构】,10年+BAT架构经验倾囊相授。
大厂面试高频:什么是自旋锁?Java 实现自旋锁的原理?
|
2月前
|
存储 安全 Java
面试高频:Synchronized 原理,建议收藏备用 !
本文详解Synchronized原理,包括其作用、使用方式、底层实现及锁升级机制。关注【mikechen的互联网架构】,10年+BAT架构经验倾囊相授。
面试高频:Synchronized 原理,建议收藏备用 !
|
5月前
|
JavaScript 前端开发
【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?
文章讨论了Vue项目目录结构的设计原则和实践,强调了项目结构清晰的重要性,提出了包括语义一致性、单一入口/出口、就近原则、公共文件的绝对路径引用等原则,并展示了单页面和多页面Vue项目的目录结构示例。
|
3月前
|
存储 监控 算法
美团面试:说说 G1垃圾回收 底层原理?说说你 JVM 调优的过程 ?
尼恩提示: G1垃圾回收 原理非常重要, 是面试的重点, 大家一定要好好掌握
美团面试:说说 G1垃圾回收 底层原理?说说你 JVM 调优的过程  ?