首页 > 编程语言 >异步编程解决方案 Promise

异步编程解决方案 Promise

时间:2023-03-24 13:31:27浏览次数:48  
标签:异步 resolve console res 编程 Promise reject promise


1. 回调地狱
2. Promise 的使用
3. Promise 的状态
4. Promise 的结果
5. Promise 的 then 方法
6. Promise 的 catch 方法
7. 回调地狱的解决方案

1. 回调地狱


回调地狱: 在回调函数中嵌套回调函数

因为 ajax 请求是异步的,所以想要使用上一次请求的结果作为请求参数,所以必须在上一次请求的回调函数中执行下次请求,这种写法非常繁琐,我们亲切的把它称之为 回调地狱

ES6 原生提供了 Promise 对象,Promise 解决了回调地狱的问题

回调地狱代码示例:


1. // 第一次请求
2. $.ajax({
3. url: './login.json',
4. success(res) {
5. // 使用第一次请求的结果发送第二次请求
6. $.ajax({
7. url: './user.json',
8. data: { id: res.id },
9. success(res) {
10. // 使用第二次请求的结果发送第三次请求
11. $.ajax({
12. url: './getUserList.json',
13. data: { where: res.userinfo.name },
14. success(res) {
15. console.log('res', res)
16. }
17. })
18. }
19. })
20. }
21. })

2. Promise 的使用


Promise 是一个构造函数,接受一个函数作为参数,通过 new 关键字实例化


1. new Promise((resolve, reject) => { });

查看 Promise 实例的属性


1. const promise = new Promise((resolve, reject) => { });
2. console.dir(promise);

得出 Promise 实例有两个属性: state(状态),result(结果)

异步编程解决方案 Promise_前端

3. Promise 的状态


Promise 实例的三种状态

1. pending (准备,待解决,进行中)
2. fulfilled(已完成,成功)
3. rejected (已拒绝,失败)

Promise 状态的改变:

通过调用 resolve(),reject() 改变当前 promise 对象的状态,promise 对象的状态改变是一次性的。


1. const promise = new Promise((resolve, reject) => {
2. // 使当前 promise 对象状态改为 fulfilled
3. // resolve()
4. // 使当前 promise 对象状态改为 rejected
5. // reject()
6. });

4. Promise 的结果


Promise 实例的另外一个属性 result 的值就是调用 resolve() 或 reject() 的参数


异步编程解决方案 Promise_ajax_02

异步编程解决方案 Promise_ajax_02

1. const promise = new Promise((resolve, reject) => {
2. resolve({ name: 'liang' })
3. });
4. console.dir(promise);
5. const promise2 = new Promise((resolve, reject) => {
6. reject({ name: 'wang' })
7. });
8. console.dir(promise2);

5. Promise 的 then 方法


then 方法是第一个参数在 promise 状态是 fulfilled 执行,第二个参数在 promise 状态是 rejected 执行

then 方法的返回值是一个 promise 对象


1. const p = new Promise((resolve, reject) => {
2. reject({ name: 'liang' })
3. });
4. p.then(res => {
5. // 当 promise 状态是 fulfilled 执行
6. console.log('成功时调用', res)
7. }, reason => {
8. // 当 promise 状态是 rejected 执行
9. console.log('失败时调用', reason)
10. });

在 then 方法中使用 return 可以将 then 方法返回的 promise 实例改为 fulfilled 状态

在 then 方法中,如果代码出错(错误异常),会将返回的 promise 实例状态改为 rejected


1. // 如果 promise 的状态不改变 then 方法无法执行
2. const p = new Promise((resolve, reject) => {
3. resolve()
4. });
5. const t = p.then(res => {
6. console.log('成功时调用', res)
7. // 在 then 方法中使用 return 可以将 then 方法返回的 promise 实例状态改为 fulfilled
8. // return 123
9. 
10. // 如果这里的代码出错 会将 t 实例的状态改为 rejected
11. console.log(a);
12. }, reason => {
13. console.log('失败时调用', reason)
14. });
15. t.then(res => {
16. // res 123
17. console.log('t 成功', res)
18. }, reason => {
19. console.log('t 失败', reason)
20. })

6. Promise 的 catch 方法


catch 方法参数中的函数执行时机 ?

1. 当 promise 实例状态改为 rejected 时
2. promise 构造函数的参数方法体中有错误发生(其实也是状态变为 rejected )


1. const p = new Promise((resolve, reject) => {
2. // 下面两种错误都会触发 catch 方法
3. // reject('有错误')
4. // throw new Error('出错了')
5. });
6. p.catch(res => {
7. console.log('res', res)
8. })

catch 方法 和 then 方法的第二个参数都能捕捉到 promise 实例状态改为 rejected 时的情况,那么平时推荐怎么用 ?下面是 Promise 最常见的写法,推荐这么使用


1. const p = new Promise((resolve, reject) => {
2. resolve()
3. // reject()
4. });
5. p.then(res => {
6. console.log('res', res)
7. }).catch(reason => {
8. console.log('reason', reason)
9. })

7. 回调地狱的解决方案


回调地狱写法

异步编程解决方案 Promise_前端_04

第一次改造: 使用 Promise

异步编程解决方案 Promise_回调函数_05

第二次改造: 封装函数

异步编程解决方案 Promise_回调函数_06

第三次改造: 终极解决方案(使用 async + await)

异步编程解决方案 Promise_前端_07

标签:异步,resolve,console,res,编程,Promise,reject,promise
From: https://blog.51cto.com/10zhancom/6147167

相关文章

  • 使用C#&.NET Core编程实现获取所有Windows服务列表及对Windows服务(Windows Service)
    使用C#&.NETCore编程实现获取所有Windows服务列表及对Windows服务(WindowsService)的启动/停止/重启的方法原文链接:https://codedefault.com/p/start-stop-restart-inst......
  • ChatGPT编程秀-1:从一个爬虫开始
    思考问题域我要写一个爬虫,把ChatGPT上我的数据都爬下来,首先想想我们的问题域,我想到几个问题:不能用HTTP请求去爬,如果我直接用HTTP请求去抓的话,一个我要花太多精力在登录上了,......
  • 网络编程
    网络编程1.什么是网络编程在网络通信协议下,不同计算机上运行的程序,可以进行数据传输2.网络通信的两大模式(C/S和B/S)客户端服务器模式(C/S)优点:界面炫酷,可以使......
  • 日志之MDC和异步多线程间传递线程id
    目录1MDC1.1简介1.2MDC坐标和使用1.3主要方法2多线程间使用2.1MDC工具类2.2拦截器定义和配置2.3Java线程池中使用2.3.1配置线程池2.3.2使用ExecutorCompletionSe......
  • Go语言并发编程(2):channel 通道介绍和使用
    一、简介channel不仅可以用于goroutine间进行安全通信,还可以用于同步内存访问。而且Go社区强烈推荐使用channel通道实现goroutine之间的通信,不要通过共享内存......
  • Go语言并发编程(3):sync包介绍和使用(上)-Mutex,RWMutex,WaitGroup,sync.Map
    一、sync包简介在并发编程中,为了解决竞争条件问题,Go语言提供了sync标准包,它提供了基本的同步原语,例如互斥锁、读写锁等。sync包使用建议:除了Once和WaitGroup......
  • Go语言并发编程(4):sync包介绍和使用(下)-Once,Pool,Cond
    sync包下:Once,Pool,Cond一、sync.Once执行一次Once简介sync.Once是Go提供的让函数只执行一次的一种实现。如果once.Do(f)被调用多次,只有第一次调用会调用f。......
  • 编程常用的语句
    基本类型、包装类、字符串之间的转换1、基本类型和包装类基本类型和包装类可通过自动装箱和拆箱实现。inti=24;Integera=newInteger(i);//手动装箱Integerb......
  • C++编程题(蓝桥杯)
        运行结果  #include<iostream>usingnamespacestd;voidjingsai1(){//chh:水深;chs:最初水下深度;intchh=0,chs=0;intI_depth=0;cou......
  • 软件开发需要编程作为最基本的基础
    软件开发需要编程作为最基本的基础,软件开发更是一门艺术,编程也是一门手艺,那么小编今天就来说一说我的个人技巧还有经验.软件开发1.作为一个软件的开发技术,我们要言出必行......