Promise(微任务)- 让你看完就懂
创始人
2024-03-08 10:13:57
0

1. 图示

思维导图链接 https://www.zhixi.com/view/23ff2291

在这里插入图片描述

2. 使用promise原因

在没有promise的时候,一直使用setTimeout函数,这样就会造成回调地狱。

3. 基本状态

promise 有三种状态

  1. pending(此时 promise还没有调用完成)
  2. fulfilled(promise 调用完成,状态是成功了)
  3. rejected(promise 调用完成,状态是失败了)

Promise 状态一旦从pending转换为fulfilled或者rejected, 那么状态将不会再次改变

4. 类上的常用方法

Promise 类上方法也是经常使用的

  1. Promise.resolve()
传入值返回值
传入一个promise res值返回res, 直接promise 结果值
传入一个promise rej 值返回为rej类型, 直接promise 结果值
传入一个基本类型值返回res类型, 直接获取值

结论 resolve 传入rej 类型时,返回也是rej。但是无论传入什么都被解析为最终结果

  1. Promise.reject()
传入值返回值
传入一个promise res值直接是rej ,直接返回promise
传入一个promise rej 值直接是rej, 直接返回promise
传入一个基本类型值返回res类型, 直接获取值

结论 reject 传入什么都是rej,且返回值就是传入值

  1. Promise.all()

    传入一个promise数组(如果是基本类型直接就是 res类型的Promise), 等待所有的promise 完毕,但是有一个promise为rej 就直接返回 失败结果, 不再等待全部执行完毕。

  2. Promise.race()

    是 Promise.race 只要传入的 Promise 对象,有一个状态变化了(无论对错),就会立即结束,而不会等待其他 Promise 对象返回。

  3. Promise.allSettled()

    传入一个promise数组(如果是基本类型直接就是 res类型的Promise), 无论是正确还是错误,最后整合为一个数组,全部返回。返回的值代表每个promise的状态和结果,错误的就是 错误状态和错误信息。

5. 原型链式调用返回值

  1. then resolve返回, then reject 返回, catch 返回 三者 return 后是一样的
三者一样
1.传入一个promise res值   返回res类型, 直接promise 结果值
2.传入一个promise rej 值   直接是rej,  直接promise 结果值
3.传入一个基本类型值      返回res类型, 直接获取值
  1. finally 返回

不管promise最后的状态,在执行完then或catch指定的回调函数以后,都会执行finally方法指定的回调函数。

finally 是没有return (返回值的),且不对当前一次的返回值造成影响。且finally 是没有任何传参的。

6.(then 里面的 reject) 和 catch 的区别

1.catch 方法可以捕获到 catch 之前整条 promise 链路上所有抛出的异常。

2.then 方法的第二个参数捕获的异常依赖于上一个 Promise 对象的执行结果。

如果是promise内部报错 reject 抛出错误后,then 的第二个参数就能捕获得到,如果then的第二个参数不存在,则catch方法会捕获到。

如果是then的第一个参数函数 resolve 中抛出了异常,即成功回调函数出现异常后,then的第二个参数reject 捕获捕获不到,catch方法可以捕获到。

7. async await 合并使用

1.await 同一行后面的内容对应 Promise 主体内容,即同步执行的
2.( 重点) await 下一行的内容对应 then()里面的内容,是异步执行的,
其实也是await这行执行的相当于then方法。对await右边的值进行返回
示例:async function asyncFun() {console.log('async1 start');await 111;console.log('async1 inner');}asyncFun();console.log('script end');3.await 同一行后面应该跟着一个 Promise 对象,如果不是,需要转换(如果是常量会自动转换)
4.async 函数的返回值还是一个 Promise 对象

8. 使用try catch 的注意事项

try catch 是传统的异常捕获方式,这里只能捕获同步代码的异常,并不能捕获异步异常,因此无法对 Promise 进行完整的异常捕获。

总结,看道题


function promise2() {  return new Promise((resolve) => {  console.log('promise2 start');  resolve();  })  
}  
function promise3() {  return new Promise((resolve) => {  console.log('promise3 start');  resolve();  })  
}  
function promise4() {  return new Promise((resolve) => {  console.log('promise4 start');  resolve();  }).then(() => {  console.log('promise4 end');  })  
}  
async function asyncFun() {  console.log('async1 start');  await promise2();  console.log('async1 inner');  await promise3();  console.log('async1 end');  
}  
setTimeout(() => {  console.log('setTimeout start');  promise1();  console.log('setTimeout end');  
}, 0);  
asyncFun();  
promise4();  
console.log('script end');

相关内容

热门资讯

保存时出现了1个错误,导致这篇... 当保存文章时出现错误时,可以通过以下步骤解决问题:查看错误信息:查看错误提示信息可以帮助我们了解具体...
汇川伺服电机位置控制模式参数配... 1. 基本控制参数设置 1)设置位置控制模式   2)绝对值位置线性模...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分,它可以提供高速稳定的网络连接。但是,有时候我们会遇到不能访问光...
表格中数据未显示 当表格中的数据未显示时,可能是由于以下几个原因导致的:HTML代码问题:检查表格的HTML代码是否正...
本地主机上的图像未显示 问题描述:在本地主机上显示图像时,图像未能正常显示。解决方法:以下是一些可能的解决方法,具体取决于问...
表格列调整大小出现问题 问题描述:表格列调整大小出现问题,无法正常调整列宽。解决方法:检查表格的布局方式是否正确。确保表格使...
不一致的条件格式 要解决不一致的条件格式问题,可以按照以下步骤进行:确定条件格式的规则:首先,需要明确条件格式的规则是...
Android|无法访问或保存... 这个问题可能是由于权限设置不正确导致的。您需要在应用程序清单文件中添加以下代码来请求适当的权限:此外...
【NI Multisim 14...   目录 序言 一、工具栏 🍊1.“标准”工具栏 🍊 2.视图工具...
银河麒麟V10SP1高级服务器... 银河麒麟高级服务器操作系统简介: 银河麒麟高级服务器操作系统V10是针对企业级关键业务...