前端 JS 经典:Promise 详解

简介: 前端 JS 经典:Promise 详解

1. Promise 由来

在以前我们实现异步是用的回调函数,当一个异步请求需要依赖上一个异步请求返回的结果的时候,就会形成如下这种的调用结构。

请求1(function (结果1) {
  请求2(function (结果2) {
    请求3(function(结果3)) {
      请求4(function(结果4) {})
    }
  });
});

这种结构看着很杂乱且不易维护,被我们亲切的叫做 “回调地狱”。为了解决回调地狱的问题,Promise 就诞生了。

Promise 诞生的使命:优雅的去表示异步回调

2. Promise 基础概念

2.1 创建 promise 实例

Promise 是一个构造函数,所以我们在调用一个 Promsie 的时候,要用 new Promsie 的方式去调用。

const ps = new Promise();

new Promise 接受一个函数类型的参数。这个函数又接收两个参数 resolvereject,分别对映成功回调和失败回调。Promise 内部有 3 种状态 pending(进行时)fulfilled(已成功)rejected(已失败)。且这三种状态是不可逆的,只能由 pending 到 fulfilled,pending 到 rejected。resolve 使 promise 状态由 pending 到 fulfilled,reject 使 promise 状态由 pending 到 rejected。

const ps = new Promise(function () {});

const ps = new Promise(function (resolve, reject) {
  let number = 10;
  if (number >= 10) {
    resolve(number);
  } else {
    reject("number 小于10");
  }
});

2.2 实例方法

为了更好的控制下一步执行,又诞生了三个实例方法 then、catch、finally

2.2.1 then 方法

then 方法一般接受两个参数 resolve、reject。分别对应成功时的回调和失败时的回调。

成功状态的 promise 实例
const ps1 = new Promise(function (resolve, reject) {
  let number = 10;
  if (number >= 10) {
    resolve(number);
  } else {
    reject("number 小于10");
  }
});
 
ps1.then(function (res) {
  console.log(res);
});

失败状态的 promise 实例
const ps2 = new Promise(function (resolve, reject) {
  let number = 9;
  if (number >= 10) {
    resolve(number);
  } else {
    reject("number 小于10");
  }
});
 
ps2.then(
  function (res) {},
  function (err) {
    console.log(err);
  }
);

2.2.2 catch 方法

then 方法支持链式调用,then 的执行严重依赖上一步的结果,上一步如果没有结果,那么下一步就不会执行。但是每一步都写 reject 特别麻烦,所以诞生了 catch,then 就可以省略 reject 方法,reject 方法就交给 catch 执行,同时 catch 还可以捕获执行 resolve 的异常。

const ps2 = new Promise(function (resolve, reject) {
  let number = 9;
  if (number >= 10) {
    resolve(number);
  } else {
    reject("number 小于10");
  }
});
 
ps2
  .then(function (res) {})
  .catch(function (err) {
    console.log(err);
  });

2.2.3 finally 方法

有的时候,无论成功还是失败都需要执行一些操作,就诞生了 finally。我们可以在这做一些清理工作。

const ps2 = new Promise(function (resolve, reject) {
  let number = 9;
  if (number >= 10) {
    resolve(number);
  } else {
    reject("number 小于10");
  }
});
 
ps2
  .then(function (res) {})
  .catch(function (err) {
    console.log(err);
  })
  .finally(function () {
    console.log("end");
  });

2.2.4 then 的链式调用

因为 then 方法支持链式调用,所以我们需要知道使用 then 方法会有什么效果。只要调用 promise 实例的 then 方法一定产生一个新的 promise,这个 promise 的状态由里面的函数决定。函数什么时候有结果,这个新 promise 状态什么时候由 pending 转 fulfilled。catch 和 finally 同理。

const ps = new Promise(function (resolve, reject) {
  let number = 10;
  if (number >= 10) {
    resolve(number);
  } else {
    reject("number 小于10");
  }
});
 
ps.then(function (res) {
  return res * 10;
})
  .then(function (res) {
    return res + 2;
  })
  .then(function (res) {
    if (res > 100) {
      console.log(res);
    } else {
      console.log("最后结果小于100");
    }
  });

3. Promise 原型方法

为了满足更多的业务需要,又诞生了 6 个原型方法 Promise.all()、Promise.allSettled()、Promise.any()、Promise.race()、Promise.reject()、Promise.resolve()。且都会返回一个确定状态的 Promsie 对象。

统一使用两个成功异步 ps1、ps2。两个失败异步 ps3、ps4。作为测试用例。如下:

const ps1 = new Promise(function (resolve, reject) {
  setTimeout(() => {
    resolve("成功结果1");
  }, 1000);
});
 
const ps2 = new Promise(function (resolve, reject) {
  setTimeout(() => {
    resolve("成功结果2");
  }, 2000);
});
 
const ps3 = new Promise(function (resolve, reject) {
  setTimeout(() => {
    reject("失败结果1");
  }, 3000);
});
 
const ps4 = new Promise(function (resolve, reject) {
  setTimeout(() => {
    reject("失败结果2");
  }, 2000);
});

3.1 Promise.all()

通过数组的形式传入异步操作,所有的异步执行都成功,才执行成功,如果有一个失败了,就执行失败。例子如下:

都成功,执行 then 方法,成功返回结果,通过 res 以数组的方式返回

Promise.all([ps1, ps2])
  .then(function (res) {
    console.log("都成功", res);
  })
  .catch(function (err) {
    console.log(err);
  });

按传入顺序执行,如果有一个异步执行失败,中断其他异步操作,执行 catch 方法,通过 err 返回失败结果

Promise.all([ps1, ps2, ps3, ps4])
  .then(function (res) {
    console.log("都成功", res);
  })
  .catch(function (err) {
    console.log("执行失败", err);
  });

3.2 Promise.allSettled()

所有执行都有结果了就执行,无论成功还是失败

Promise.allSettled([ps1, ps2, ps3, ps4]).then(function (res) {
  console.log("都返回结果", res);
});

3.3 Promise.any()

任意异步成功了就执行

Promise.any([ps1, ps2, ps3, ps4]).then(function (res) {
  console.log("任意成功", res);
});

3.4 Promise.race()

任意异步成功或失败就执行。

Promise.race([ps1, ps2, ps3, ps4]).then(function (res) {
  console.log("任意成功或失败", res);
});

3.5 Promise.reject()

返回一个状态为 rejected 的 Promise 对象

3.6 Promise.resolve()

会接收 4 种类型的参数:promise 实例 、具有 then 方法的对象、没有 then 方法的对象、不传参

当参数是一个 Promise 实例时,直接返回这个实例。

Promise.resolve(ps1);

当参数是一个具有 then 方法的对象时,将这个对象转为 Promise 对象,并立即执行对象的 then 方法

let obj = {
  name: "yqcoder",
  then(resolve) {
    resolve(this.name);
  },
};
 
Promise.resolve(obj);

当参数是一个没有 then 方法的对象,或者参数不是对象时,就会返回状态为 fulfilled 的新的 Promise 对象,并将参数传入下一个 then。

let obj = {
  name: "yqcoder",
};
 
let ps = Promise.resolve(obj);
 
ps.then(function (res) {
  console.log("结果", res);
});

当不带任何参数时,就会返回一个状态为 fulfilled 的 Promise 对象

Promise.resolve();

目录
相关文章
|
5天前
|
前端开发 JavaScript
用JavaScript 实现一个简单的 Promise 并打印结果
用 JavaScript 实现一个简单的 Promise 并打印结果
|
5天前
|
JSON 前端开发 JavaScript
在 JavaScript 中,如何使用 Promise 处理异步操作?
通过以上方式,可以使用Promise来有效地处理各种异步操作,使异步代码更加清晰、易读和易于维护,避免了回调地狱的问题,提高了代码的质量和可维护性。
|
8天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
8天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
12 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
10天前
|
JSON 前端开发 JavaScript
浅谈JavaScript中的Promise、Async和Await
【10月更文挑战第30天】Promise、Async和Await是JavaScript中强大的异步编程工具,它们各自具有独特的优势和适用场景,开发者可以根据具体的项目需求和代码风格选择合适的方式来处理异步操作,从而编写出更加高效、可读和易于维护的JavaScript代码。
18 1
|
13天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
19 1
|
14天前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
14 1
|
17天前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
22 0
|
28天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
118 2
|
28天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
36 0