一文了解Promise使用与实现

简介: Promise

前言

Promise 作为一个前端必备技能,不管是从项目应用还是面试,都应该对其有所了解与使用。

常常遇到的面试五连问:

  • 说说你对 Promise 理解?
  • Promise 的出现解决了什么问题?
  • Promise 有哪些状态?
  • 你用过 Promise 哪些方法?
  • 如何实现一个 Promise ?

什么是 Promise?

Promise 是异步编程的一种解决方案:从语法上讲,promise 是一个对象,从它可以获取异步操作的消息;从本意上讲,它是承诺,承诺它过一段时间会给你一个结果。

Promise 有三种状态:pending(等待态),fulfiled(成功态),rejected(失败态);状态一旦改变,就不会再变。创造 Promise 实例后,它会立即执行。

一般来说我们会碰到的回调嵌套都不会很多,一般就一到两级,但是某些情况下,回调嵌套很多时,代码就会非常繁琐,会给我们的编程带来很多的麻烦,这种情况俗称——回调地狱。

这时候我们的Promise 就应运而生、粉墨登场了。

Promise 的基本使用

Promise 是一个构造函数,自己身上有 allrejectresolve 这几个眼熟的方法,原型上有 thencatch 等同样很眼熟的方法。

Promise 的构造函数接收一个参数:函数,并且这个函数需要传入两个参数:

resolve:异步操作执行成功后的回调函数;

reject:异步操作执行失败后的回调函数;

catch 的用法

我们知道Promise 对象除了then 方法,还有一个catch 方法,它是做什么用的呢?其实它和then 的第二个参数一样,用来指定reject 的回调。

resolve 的回调中,我们 console.log(test),而 test 这个变量是没有被定义的。如果我们不用 Promise,代码运行到这里就直接在控制台报错了,不往下运行了,也就是说进到catch方法里面去了,而且把错误原因传到了 reject 参数中。即便是有错误的代码也不会报错了,这与我们的 try/catch 语句有相同的功能。

finally 的用法

finally 方法返回一个 Promise。在 promise 结束时,无论结果是 fulfilled 或者是 rejected ,都会执行指定的回调函数。这为在 Promise 是否成功完成后都需要执行的代码提供了一种方式。

resolve的用法

Promise.resolve(value) 方法返回一个以给定值解析后的 Promise 对象。如果这个值是一个 promise ,那么将返回这个 promise ;如果这个值是 thenable(即带有"then" 方法),返回的promise会“跟随”这个 thenable 的对象,采用它的最终状态;否则返回的promise将以此值完成。此函数将类promise对象的多层嵌套展平。

目录
相关文章
|
JavaScript Go
异步加载 JS 的方法
异步加载 JS 的方法
351 156
|
前端开发
css清除浮动的方法
今天写页面突然用到要清除浮动的样式,然后就想不去起来了(尴尬)
777 154
|
存储 监控 JavaScript
vue--vuex详解
vue vuex
4259 154
|
移动开发 JavaScript 网络架构
vue3中vue-router使用(2)
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举
569 156
|
JavaScript
vscode编辑器怎么用代码片段生成用户的文件模板?
vscode编辑器怎么用代码片段生成用户的文件模板?
1011 155
vscode编辑器怎么用代码片段生成用户的文件模板?
|
自动驾驶 机器人 大数据
我眼中的云栖大会
说实话,我之前真不知道云栖大会(请原谅我孤陋寡闻),我也是最近一个月才被同事邀请进入阿里云开发者社区的。在群里看到同事发的这个征文后我才知道的云栖大会。然后特意的去查询搜索了一下云栖大会。
1157 155
我眼中的云栖大会
|
前端开发
koa框架学习记录(5)
一个前端学习koa的简单记录
914 155
|
JavaScript 前端开发
koa框架学习记录(1)
一个前端学习koa的简单记录
944 154
|
前端开发 中间件
koa框架学习记录(4)
一个前端学习koa的简单记录
936 155
|
缓存 开发工具 git
git操作命令
今天工作中突然要是用git给本地仓库添加一个新的远程仓库,想不起来操作命令了 就去查了一下常用的操作命令
940 155