一、Promise是什么?
Promise是JS中进行异步操作的新的解决方案(旧的方案是回调函数的形式,回调函数里嵌套函数)
从语法上来说,Promise是一个构造函数。
从功能上来说,用Promise的实例封装异步操作并获取结果。

二、为什么要用Promise?
在旧的回调函数的形式中,当后一个异步请求的参数依赖于前一个异步请求的结果时,就会出现层层嵌套的情况,使得代码维护性变得比较差,Promise可以很好的解决这个问题,then的链式调用使得Promise的结构层次很清晰,async和await能使代码的运行变成同步。
下面的图片里的伪代码可以进行一个简单演示。

三、Promise的基本流程
我们使用Promise这个构造函数,创建它的实例对象,在入参中传入回调函数,回调函数中执行异步操作,并返回Promise的执行结果成功(resolve)或失败(reject)或抛出异常,then方法中定义成功(onResolved)及失败(onRejected)的函数,来对Promise的返回结果进行处理。要注意,promise.then也是一个promise。

基本语法如下:

new Promise((resolve, reject)=>{
// 执行异步操作,操作完成后将执行结果返回
setTimeout(()=>{
resolve(1)
}, 2000)
}).then(value=>{
// 当返回为resolve时,执行成功的处理结果
console.log('success', value)
}, reason=>{
// 当返回为reject时,执行失败的处理结果
console.log('fail', reason)
})

简单图示如下

四、Promise的重要概念
1、Promise三种状态,等待中 pending、成功 resolved/fulfilled、失败 rejected,当Promise实例创建时,即为pending状态,如何改变promise的状态
(1) resolve(value) ---- 如果当前是pending就会变为resolved
(2) reject(reason) ---- 如果当前是pending就会变为rejected
(3) 抛出异常           ---- 如果当前是pending就会变为rejected

2、Promise的状态不可逆,一旦由等待--->成功,或者由等待--->失败,就不能再变更为其它的状态。

3、Promise通过.then来获取promise的执行结果,第一个参数传入成功的处理函数,第二个参数传入失败的处理函数,失败还可以通过catch进行异常穿透,最后处理。

4、promise.then也是promise,所以then才能进行链式调用,then的返回结果取决于then方法里的执行结果
(1) then方法返回任意的非promise的值时,此时链式调用下一个then方法里执行的是成功的函数,(包括没有返回值,此时返回的undefined)
(2) then方法里返回promise,then的返回结果由promise的执行结果决定,resolve即执行成功的函数,reject即执行失败的函数
(3) then方法中直接抛出异常,即执行失败的的函数

Promise的理解与使用(一)的更多相关文章

  1. promise的理解和使用

    1. Promise是什么 1.1 promise 的理解 1. 抽象表达: Promise 是 JS 中进行异步编程的新的解决方案(旧的是纯回调形式) 2. 具体表达: (1)从语法上说:Promi ...

  2. 「每日一题」面试官问你对Promise的理解?可能是需要你能手动实现各个特性

    关注「松宝写代码」,精选好文,每日一题 加入我们一起学习,day day up 作者:saucxs | songEagle 来源:原创 一.前言 2020.12.23日刚立的flag,每日一题,题目类 ...

  3. promise的理解和应用

    老铁们,我又满血复活了,今天我准备来吹一波我对promise,如有错吴请直接指出,明白了吗?话不多说开始吧 首先我们需要知道啥叫promise,我问了问大佬,他说这个东西是 异步操作的同步代码(but ...

  4. 谈谈你对Promise的理解

    一.Promise是什么? 理解 抽象表达: Promise 是一门新的技术(ES6 规范) Promise 是 JS 中进行异步编程的新解决方案(备注:旧方案是单纯使用回调函数) 具体表达: 从语法 ...

  5. promise的理解

    为什么会有promise,他的作用是什么? promise主要是为了解决js中多个异步回调难以维护和控制的问题. 什么是promise? 从图中,我们可以看出,Promise是一个函数,这个函数上有在 ...

  6. 对Promise的理解?

    ES6原生提供了promise对象 所谓Promise,就是一个对象,用来传递异步操作的消息.它代表了某个未来才会知道结果的事件(通过是一个异步操作),并且这个事件提供统一的API,可供进一步处理 P ...

  7. 一点对Promise的理解与总结

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/10959411.html,多谢,=.=~ axios用多了就开始疑惑它里面到底是个啥,虽然总被告知 ...

  8. 谈谈我对Promise的理解

    一.Promise是什么? Promise是最早由社区提出和实现的一种解决异步编程的方案,比其他传统的解决方案(回调函数和事件)更合理和更强大. ES6 将其写进了语言标准,统一了用法,原生提供了Pr ...

  9. 简单理解ECMAScript2015中的Promise

    ECMAScript6中新增了Promise对象, 所谓Promise对象,即代表着一个还未完成,但将来某时会完成的操作(通常是异步操作).使用Promise对象,我们就可以避免陷入函数层层嵌套的‘回 ...

  10. 深入理解promise

    如今promise大行其道,关于异步方面的几乎都有它的影子,新的fetch api返回的是promise对象,generator中的yield后面一般也会跟promise对象,async的await后 ...

随机推荐

  1. Finalshell

    使用VMware可以得到Linux虚拟机,但是在VMware中操作Linux的命令行页面不太方便 1.内容的复制.粘贴跨越VMware不方便 2.文件的上传.下载跨越VMware不方便 3.也就是和L ...

  2. vue处理图片路径出问题时显示默认图片

    <img :src="item.url? item.url: '' " alt :onerror="defaultImg" /> 这里一定要判断sr ...

  3. 2022-07-13:给你一个整数数组 arr ,你一开始在数组的第一个元素处(下标为 0)。 每一步,你可以从下标 i 跳到下标 i + 1 、i - 1 或者 j : i + 1 需满足:i +

    2022-07-13:给你一个整数数组 arr ,你一开始在数组的第一个元素处(下标为 0). 每一步,你可以从下标 i 跳到下标 i + 1 .i - 1 或者 j : i + 1 需满足:i + ...

  4. 2021-10-12:验证回文串。给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写。说明:本题中,我们将空字符串定义为有效的回文串 。输入: “A man, a plan

    2021-10-12:验证回文串.给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写.说明:本题中,我们将空字符串定义为有效的回文串 .输入: "A man, a ...

  5. Django-Virtualenv虚拟环境安装、新建,激活和手动指定Python解释器、虚拟环境安装Django、创建Django项目、运行Django项目

    一.安装虚拟环境: 命令:pip3 install virtualenv 二.安装管理工具: 命令:pip3 install virtualenvwrapper 三.新建: 命令:python -m ...

  6. vue之关闭eslint及vue/require-v-for-key 、vue/no-unsed-vars报错解决方法

    报错:Page1组件已经注册但是没有被使用.  vue/no-unused-components 如果报错以下: 解决方法: 首先打开项目中的package,json 找到eslint-config ...

  7. 从GFS到GPT,AI Infra的激荡20年

    ​导读 最近AIGC和LLM的浪潮层层迭起,大有把AI行业过去十年画的饼,一夜之间完全变现的势头.而 AI Infra (构建AI所需的基础设施),也成了讨论的焦点之一.大众对AI Infra的关注点 ...

  8. centos linux系统安装详解

    打开vmware,版本差异区别不大 选择创建新的虚拟机 选择典型,是默认选项不用改,点击下一步 选择稍后安装操作系统(默认选项不用改),点击下一步 选择linux,并且版本改为centos 64位,点 ...

  9. 记录一次ScrollViewer控件 经过大量文本数据卡顿的原因

    在 WPF 中,CanContentScroll 是 ScrollViewer 控件的一个附加属性,它控制滚动视图中的内容是否按项或像素来滚动. 当 CanContentScroll 设置为 fals ...

  10. 在树莓派上实现numpy的conv2d卷积神经网络做图像分类,加载pytorch的模型参数,推理mnist手写数字识别,并使用多进程加速

    这几天又在玩树莓派,先是搞了个物联网,又在尝试在树莓派上搞一些简单的神经网络,这次搞得是卷积识别mnist手写数字识别 训练代码在电脑上,cpu就能训练,很快的: import torch impor ...