九、前端中的异步方法Promise,Promise详解

server/2024/9/25 10:29:49/

文章目录

    • 1.Promise简介
      • 什么是promise
      • 为什么使用Promise
      • promise中的状态
    • 2.Promis的用法

1.Promise简介

什么是promise

Promise是异步编程的一种解决方案,它的构造函数是同步执行的,then 方法是异步执行的。

为什么使用Promise

在JavaScript的世界中,所有代码都是单线程执行的。但是,很多网络操作,浏览器事件,都必须是异步执行,以保证软件的执行效率,毕竟如果用户发一个请求,网站在请求期间直接卡住,用户什么操作都做不了,是一个很糟糕的体验。异步f方法执行后的同步处理可以用回调函数实现,回调函数形式如下:

function callback() {console.log('Done');
}
doSometing(){.....callBack()
}

但是这样存在一个问题,比如我们先要向服务器请求数据A,得到A后,再通过A向服务器请求B,得到B后还需要得到C,最后才能真正用C来处理我们的数据,这时候就会有三层回调!

getA(function(A) {getB(A, function(B) {getC(B, function(C) {console.log('得到最终结果: ' + C);}, failureCallback);}, failureCallback);
}, failureCallback);

阅读上面代码,是不是很难受,上述形成了经典的 回调地狱。Promise就是用来处理这样的问题的。现在用promise来重写写这样的逻辑:

getA().then(function(A) {return getB(A);
})
.then(function(B) {return getC(B);
})
.then(function(C) {console.log('得到最终结果: ' + C);
})
.catch(failureCallback);

这样是不是变得清晰很多啦!
我们可以发现,promise的链式操作减低了编码难度,代码可读性明显增强。

promise中的状态

promise对象仅有三种状态
pending(进行中)
fulfilled(已成功)
rejected(已失败)

pedding(初始状态):调用promise时,一开始就呈现出等待状态,遇到resolve或者reject之前,都处于这个状态,且可以改变,但如果确定了状态(fulfilled/reject),则结果将永远不变,不能再次修改

fulfilled(成功状态):在执行了resolve后,promise则会从pedding变成fulfilled,后续会进入.then 的回调函数中,在回调函数的第一个参数函数中可以获取到值

rejected(失败状态):在执行了reject后,promise状态会变成rejected,rejected函数传递的参数,可以在.then的第二个参数函数中获取的到,或者是在.catch获取到,但是如果程序上的错误,得通过.catch函数去拿到失败消息,在.then中是获取不了的

认真阅读下图,我们能够轻松了解promise整个流程
在这里插入图片描述

2.Promis的用法

Promise对象是一个构造函数,用来生成Promise实例:

const p1 = new Promise((resolve, reject) => {resolve('hello');
})
.then(result => result)
.catch(e => e);

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。

resolve:用于创建一个成功状态的Promise对象,可以之间在.then的成功回调中,获取resolve的值。

const p = Promise.resolve("成功");
p.then((res) => {console.log("----打印:", res); //----打印: 成功
});//该用法类似于
const p1 = new Promise((resolve, reject) => {resolve("成功");
});
p1.then((res) => {console.log("----打印:p1", res); //----打印:p1 成功
});//后续代码中都会出现类似,或者另外中写法,尝试的时候,不能同时放出来执行

reject:这个方法跟Promise.resolve一样,只是作用不同,属于拒绝的状态;可以直接在.then的失败回调中,获取reject的值;也可以在.catch中获取;如果两者同时出现代码中,看看是catch写在前面还是.then函数写在前面 —业务中,拒绝状态用.then去执行回调,异常用.catch

const p = Promise.reject("失败");
p.then((res) => {console.log("----打印:", res); //不执行},(rej) => {console.log("----打印:", rej); //----打印: 失败}
);//另外写法 
p.then((res) => {console.log("----打印:p", res); //不执行},(rej) => {console.log("----打印:p", rej); //----打印:p 失败}
).catch((error) => {console.log("----打印:catch", error); //不执行
});//另外写法---基本没有吧catch写在第一个
p.catch((error) => {console.log("----打印:catch", error); //----打印:catch 失败
}).then((res) => {console.log("----打印:p", res); //不执行},(rej) => {console.log("----打印:p", rej); //不执行}
);//另外写法
p.then((res) => {console.log("----打印:p", res); //不执行
}).catch((error) => {console.log("----打印:catch", error); //----打印:catch 失败
});//该用法类似于
const p1 = new Promise((resolve, reject) => {reject("失败");
});
p1.then((res) => {console.log("----打印:p1", res); //不执行},(rej) => {console.log("----打印:p1", rej); //----打印:p1 失败}
);

另外,Promise构建出来的实例存在以下方法:

  • then()
  • catch()
  • finally()

then():
then是实例状态发生改变时的回调函数,第一个参数是resolved状态的回调函数,第二个参数是rejected状态的回调函数

getJSON("/posts.json").then(function(json) {return json.post;
}).then(function(post) {// ...
});

catch:
catch()方法是 .then(null, rejection) 或 .then(undefined, rejection) 的别名,用于指定发生错误时的回调函数.

getJSON('/posts.json').then(function(posts) {// ...
}).catch(function(error) {// 处理 getJSON 和 前一个回调函数运行时发生的错误console.log('发生错误!', error);
});

finally()
finally()方法用于指定不管 Promise 对象最后状态如何,都会执行的操作

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

http://www.ppmy.cn/server/106207.html

相关文章

大厂面试官问我:为什么 Object 有 wait ,为什么不全在 Thread 类上写?【后端八股文十六:Java基础合集】

本文为【Java基础 合集】初版,后续还会进行优化更新,欢迎大家关注交流~ hello hello~ ,这里是绝命Coding——老白~💖💖 ,欢迎大家点赞🥳🥳关注💥💥收藏&#…

Java爬虫图像处理:从获取到解析

在互联网时代,数据的价值日益凸显,而爬虫技术作为获取网络数据的重要手段,其应用范围越来越广泛。本文将探讨Java爬虫在图像处理方面的应用,包括如何从网络中获取图像数据,以及如何对这些数据进行解析和处理。 Java爬…

【Material-UI】Radio Group中的 Color 属性详解

文章目录 一、Radio Group 组件概述1. 组件介绍2. 基本用法 二、Color 属性详解1. Color 属性的作用2. 使用 Color 属性设置颜色3. 自定义颜色 三、Color 属性的实际应用场景1. 品牌一致性2. 状态指示3. 突出特定选项 四、注意事项1. 色彩对比2. 无障碍设计3. 主题定制 五、总结…

uniapp 地图map画出地市轮廓

最近做uniapp项目 H5微信小程序&#xff0c;需要在地图中打点并把相对应的区域轮廓给画出来。 首先查看uniapp官方文档&#xff1a;https://uniapp.dcloud.net.cn/component/map.html 想在uniapp中使用map直接写map标签即可 <view class"page-section page-section-…

AI大模型算法工程师职业前景怎么样?到底值不值得转行

从ChatGPT到新近的GPT-4&#xff0c;GPT模型的发展表明&#xff0c;AI正在向着“类⼈化”⽅向迅速发展。 GPT-4具备深度阅读和识图能⼒&#xff0c;能够出⾊地通过专业考试并完成复杂指令&#xff0c;向⼈类引以为傲的“创造⼒”发起挑战。 现有的就业结构即将发⽣重⼤变化&a…

C语言内存操作函数

目录 一. C语言内存操作函数 1. memcpy的使用和模拟实现 2. memmove函数 3. memset函数 4. memcmp函数 一. C语言内存操作函数 随着知识的不断积累&#xff0c;我们所想要实现的目标程序就会更加复杂&#xff0c;今天我们来学习一个新的知识叫做C语言内存操作函数&#x…

【通用】C++ union(联合体)

在 C 中&#xff0c;union&#xff08;联合体&#xff09;是一种特殊的数据结构&#xff0c;它允许在同一内存位置存储不同的数据类型。联合体中的所有成员共用同一块内存&#xff0c;因此在任何时刻&#xff0c;只能使用一个成员。 下面是一个 C 中使用联合体的示例&#xff1…

你知道有哪些Spring MVC扩展点可以解析接口参数和处理返回值吗?

1.概述 Spring MVC 是一个灵活且强大的框架&#xff0c;它允许开发者在框架的基础上进行深度定制&#xff0c;以满足各种复杂的业务需求。HandlerMethodArgumentResolver 和 HandlerMethodReturnValueHandler 是 Spring MVC 提供的两个重要扩展点&#xff0c;分别用于处理控制…