写给前端小白的「Promise备忘手册」!(建议收藏)✨(下)

简介: 前言大家好,我是HoMeTown,Promise想必大家都知道,在平时的开发工程中也经常会有用到,但是Promise作为ES6的重要特性,其实还拥有很多丰富的知识,本文面向比较初级一些的同学,可以帮你搞懂Promise到底做了什么,顺便起到一个备忘录的作用。

如果传递进来的是一个Promise实例,则完整的返回这个Promise实例,举个栗子:

const p1 = new Promise((resolve) => {
    resolve('Promise 实例: p1')
})
const ppromise = Promise.resolve(p1)
console.log(ppromise, 'Promise.resolve的实例:ppromise')
复制代码

执行结果如下:

网络异常,图片无法展示
|

如果没有传参数,返回PromiseResultundefined的Promise实例:

const pundefined = Promise.resolve()
console.log(pundefined)
复制代码

执行结果如下:

网络异常,图片无法展示
|

Promise.reject

Promise.reject方法相同,也会返回一个Promise实例,不同的是PromiseStatusrejectd,用上面的栗子进行测试:

const pstring = Promise.reject('HoMeTowm')
console.log(pstring,'字符串 Promise实例')
const pnumber = Promise.reject(123)
console.log(pnumber,'数字 Promise实例')
const pboolean = Promise.reject(true)
console.log(pboolean,'布尔值 Promise实例')
const pobject = Promise.reject({name: 'HoMeTowm'})
console.log(pobject,'对象 Promise实例')
console.log('......')
复制代码

执行结果如下:

网络异常,图片无法展示
|

Promise.all

Promise.all方法,可以发起并发请求,然后再所有Promise都脱离pending状态后,统一返回结果,接受一个数组作为参数,数组中的项为Promise实例(如果不是的话,传啥返回啥),返回一个Promise实例,PromiseResult每个实例对应的结果PromiseState所有的实例未脱离pending之前为pending,举个例子:

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log("p1 resolve执行");
    resolve("p1 的结果");
  }, 1000);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log("p2 resolve执行");
    resolve("p2 的结果");
  }, 2000);
});
const pnumber = 510
const pall = Promise.all([p1, p2, pnumber]);
console.log("promise.all 的结果未完成:", pall);
pall.then((res) => {
  console.log(res, "全部的结果");
  console.log("promise.all 的结果已完成:", pall);
});
复制代码

执行结果如下:

网络异常,图片无法展示
|

数组中如果有一个失败,则返回失败的结果,只要失败了就返回!举个栗子:

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('p1 还能执行')
    throw "哎呀,p1报错了";
  }, 1000);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('p2 还能执行')
    resolve("p2 的结果");
  }, 2000);
});
const preject = Promise.reject("Promsie.reject 失败");
const pall = Promise.all([p2, p1, preject]);
console.log("promise.all 的结果未完成:", pall);
pall
  .then((res) => {
    console.log(res, "全部的结果");
    console.log("promise.all 的结果已完成:", pall);
  })
  .catch((err) => {
    console.log(err, "失败了 嘤嘤嘤");
  });
复制代码

执行结果如下:

网络异常,图片无法展示
|

Promise.allSettled

Promise.allSettled用法与Promise.all相同,不同的是,Promise.allSettled不会因为有一个失败,就走到catch,而是会走到then,并告诉你,哪个失败了,那个成功了,举个栗子:

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
     reject('p1 失败')
  }, 1000);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("p2 成功");
  }, 2000);
});
const pall = Promise.allSettled([p2, p1, Promise.reject(1)]);
console.log("promise.allSettled 的结果未完成:", pall);
pall
  .then((res) => {
    console.log(res, "全部的结果");
    console.log("promise.allSettled 的结果已完成:", pall);
  })
  .catch((err) => {
    console.log(err, "失败了 嘤嘤嘤");
  });
复制代码

执行结果如下:

网络异常,图片无法展示
|

Promise.race

Promise.race与其字面意思相同,竞速,即哪个先完成,就以哪个为结果,参数与Promise.all相同,举个栗子:

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
     reject('p1 失败')
  }, 1000);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("p2 成功");
  }, 2000);
});
const prace = Promise.race([p2, p1]);
prace.then(res => {
    console.log(res,'成功')
}).catch(err => {
    console.log(err, '失败')
})
复制代码

执行结果如下:

网络异常,图片无法展示
|

Promise.any

Promise.any方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例,有一个子实例成功就算成功,全部子实例失败才算失败,返回AggregateError: All promises were rejected,举个栗子:

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
     reject('p1 失败')
  }, 1000);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("p2 成功");
  }, 2000);
});
const prace = Promise.any([p2, p1]);
prace.then(res => {
    console.log(res,'成功')
}).catch(err => {
    console.log(err, '失败')
})
复制代码

执行结果如下:

网络异常,图片无法展示
|

p2改为reject之后,执行结果如下:

网络异常,图片无法展示
|

完结

目录
相关文章
|
15天前
|
前端开发 JavaScript 开发者
前端开发中的异步编程:Promise 和 Async/Await 的比较与应用
在现代前端开发中,异步编程是不可或缺的技术。本文将深入探讨Promise和Async/Await这两种主流的异步编程方式,分析它们的优劣势及在实际项目中的应用场景。通过比较它们的语法、可读性和错误处理机制,帮助开发者更好地选择和理解如何在项目中高效地利用这些技术。
|
13天前
|
前端开发 JavaScript 测试技术
前端 JS 经典:Promise 详解
前端 JS 经典:Promise 详解
10 1
|
10天前
|
开发框架 前端开发 JavaScript
若依怎样看开发文档,域名搜这个就行ruoyi.vip,建链接点击在线文档,有前端手册和后端手册,若依文档里有项目扩展,项目扩展有大量的开源的软件
若依怎样看开发文档,域名搜这个就行ruoyi.vip,建链接点击在线文档,有前端手册和后端手册,若依文档里有项目扩展,项目扩展有大量的开源的软件
|
2月前
|
前端开发 JavaScript
前端 js 经典:Promise
前端 js 经典:Promise
27 1
|
2月前
|
前端开发 JavaScript 搜索推荐
前端网页手册(2)--菜鸟教程网站分析
前端网页手册(2)--菜鸟教程网站分析
28 2
|
2月前
|
前端开发 JavaScript 关系型数据库
前端网页手册(1)--基础学习
前端网页手册(1)--基础学习
20 1
|
2月前
|
存储 移动开发 前端开发
前端JS中的异步编程与Promise
在了解JavaScript的异步机制之前,我们首先需要理解JavaScript是一种单线程语言。单线程就意味着所有的任务需要按照顺序一次执行,如果前一个任务没有完成,后一个任务就无法开始。这个特性在执行大量或耗时任务时可能会导致阻塞或者界面卡死,这显然是不可取的。
|
2月前
|
存储 监控 前端开发
JavaScript手册:公司员工电脑监控软件前端交互的代码设计
在当今信息时代,随着公司对员工电脑活动的监控需求不断增加,前端交互的代码设计变得尤为关键。本手册将深入探讨JavaScript编写的公司员工电脑监控软件监控代码,着重介绍如何设计能够在不引起怀疑的情况下,实现对员工电脑活动的细致监控。
239 2
|
2月前
|
前端开发 JavaScript
No101.精选前端面试题,享受每天的挑战和学习(Promise)
No101.精选前端面试题,享受每天的挑战和学习(Promise)
|
2月前
|
前端开发 JavaScript 开发者
【面试题】前端人70%以上 不了解的promise/async await
【面试题】前端人70%以上 不了解的promise/async await