Promise笔记

已于 2022-04-05 09:19:49 修改
阅读量639 收藏
点赞数
文章标签： 前端
于 2022-04-01 10:24:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27651907/article/details/123891249
版权

Promise规范

Promise是一套专门处理异步场景的规范，它能有效的避免回调地狱的产生，使异步代码更加清晰、简洁、统一

Promise A+ 规定：

  1. 所有的异步场景，都可以看作是一个异步任务，每个异步任务，在JS中应该表现为一个对象，该对象称之为Promise对象，也叫做任务对象

  2. 每个任务对象，都应该有两个阶段、三个状态

    image-20210618155145355

    两个阶段

    • 未决阶段：比如向服务器发送了请求，但是服务器还没有作出处理。
    • 已决阶段：服务器已经处理了请求。

    三个状态

    • 挂起状态：此时处于未决阶段，请求的结果还没出来 。
    • 完成状态：此时处于已决阶段，请求的的结果出来了（成功了）
    • 失败转态：此时处于已决阶段，请求的的结果出来了（失败了）

    根据常理，它们之间存在以下逻辑：

    • 任务总是从未决阶段unsettled变到已决阶段settled，无法逆行
    • 任务总是从挂起状态变到完成或失败状态，无法逆行
    • 任务一旦完成或失败，状态就固定下来，状态也是不可逆的

  3. 挂起->完成，称之为resolve；挂起->失败称之为reject。任务完成时，可能有一个相关数据；任务失败时，可能有一个失败原因。

    -

  4. 可以针对任务进行后续处理，针对完成状态的后续处理称之为onFulfilled，针对失败的后续处理称之为onRejected

    image-20210618161125894-

Promise API

ES6提供了一套API，实现了Promise A+规范

基本使用如下：

// 创建一个任务对象，该任务立即进入 pending 状态
const pro = new Promise((resolve, reject) => {
  // 任务的具体执行流程，该函数会立即被执行
  // 调用 resolve(data)，可将任务变为 fulfilled 状态， data 为需要传递的相关数据
  // 调用 reject(err)，可将任务变为 rejected 状态，err 为需要传递的失败原因
});

pro.then(
  (data) => {
    // onFulfilled(成功后续处理) 函数，当任务完成后，会自动运行该函数，data为任务完成的相关数据
  },
  (err) => {
    // onRejected(失败后续处理) 函数，当任务失败后，会自动运行该函数，err 为任务失败的相关原因
  }
);
//或者下面这种写法
pro.then(data => {
    // onFulfilled(成功后续处理) 函数，当任务完成后，会自动运行该函数，data为任务完成的相关数据
}).catch(err => {
    // onRejected(失败后续处理) 函数，当任务失败后，会自动运行该函数，err 为任务失败的相关原因
})

链式调用

image-20210621103501094-

1. then方法必定会返回一个新的Promise

可理解为后续处理也是一个任务

2. 新任务的状态取决于后续处理：

  1. 如果前一个任务没有相关的后续处理，新任务的状态和前任务一致，数据为前任务的数据

    const pro = new Promise((resolve, reject) => {
    resolve('传递的数据')// 同步
})
// pro1没有对por的成功状态进行处理，所以pro是什么状态，por1就是什么状态
const pro1 = pro.catch(err => {
    // pro1 没有针对pro成功进行处理，pro1返回了一个新的任务，状态与Pro状态一致。
})
   
const pro2 = pro1.catch(res => {
    // 由于por1没有对 pro的成功进行处理，所以pro1是什么状态，por2就是什么状态
})
   
console.log(pro); // Promise{<fulfilled>: '传递的数据'}  promise内部没有进行异步操作，所以直接是fulfilled状态
console.log(pro1);// Promise {<pending>}
console.log(pro2);// Promise {<pending>}
setTimeout(() => {
    console.log(pro);// Promise{<fulfilled>: '传递的数据'}
    console.log(pro1);// Promise{<fulfilled>: '传递的数据'}
    console.log(pro2);// Promise{<fulfilled>: '传递的数据'}
}, 1000)

  2. 如果有后续处理但还未执行，新任务处于挂起状态。

    const pro = new Promise(resolve => {
    setTimeout(()=>{
        resolve('I Want My Tears Back Now！')
    },10000)
});
   
const pro1 = pro.then(msg=>{
    console.log(msg);
})
setTimeout(()=>{
    //因为此时Pro还未处理完成，Pro1只能是挂起状态
    console.log(pro);//pending 挂起状态
    console.log(pro1);//pending 挂起状态
},1000)
/*等待十秒后 
pro的状态直接为fulfilled成功状态，并且携带了所传递的信息
pro1的针对pro的成功状态进行处理 状态为fulfill状态，输出pro携带的信息
*/

  3. 若后续处理执行了，则根据后续处理的情况确定新任务的状态

    1. 后续处理执行无错，新任务的状态为完成，数据为后续处理的返回值
    2. 后续处理执行有错，新任务的状态为失败，数据为异常对象
    3. 后续执行后返回的是一个任务对象，新任务的状态和数据与该任务对象一致
    // 1 后续处理执行无错，新任务的状态为完成，数据为后续处理的返回值
const pro = new Promise((resolve, reject) => {
    resolve(1)
})
const pro1 = pro.then(res => {//后续处理无错
    console.log(res);
    return res// 如果没有return返回默认undefined，有则返回返回的值
})
console.log(pro);//fulfilled完成状态 返回值为1
console.log(pro1);//pending挂起状态，默认返回undefined
setTimeout(() => {
    console.log(pro);//fulfilled完成状态 返回值为1
    console.log(pro1);// fulfilled完成状态，默认返回undefined
}, 1000)
/**
如果前一个任务失败了，后一个任务有处理了失败，如果后一任务处理失败成功了，那此时的状态一定是成功状态。
//-----------------------对第1点和第2点的简单总结------------------------
后边的任务状态，如果是存在相关的处理，一定要看处理的过程，不管是对成功或者是失败的处理。如果前面的任务成功了就看后续成功的处理，如果前面的任务失败了就看后续失败的处理，需要看处理的过程有没有问题，没有问题就会进入到成功的状态onFulfilled，有问题就进入失败的状态onRejected；
必须结合图片看 ！！！
*/
   
// 2 后续处理执行有错，新任务的状态为失败，数据为异常对象
	第二点与第一点同理！！！
   
// 3 后续执行后返回的是一个任务对象，新任务的状态和数据与该任务对象一致
const pro = new Promise((resolve, reject) => {
    resolve(1)
})
const pro1 = pro.then(() => {
    //后续执行后返回的是一个任务对象，新任务的状态和数据与该任务对象一致
    //如果后续执行返回的是一个新的promise任务对象，pro1的状态就与新返回的任务对象状态一致
    return new Promise((resolve, reject) => {
        reject()// 调用了错误处理，pro1的状态为 rejected
    })
})
console.log(pro);// fulfilled
console.log(pro1);// pending
setTimeout(() => {
    console.log(pro); // fulfilled 1
    console.log(pro1);// rejected undefined
}, 1000)

    image-20210621103501094-

由于链式任务的存在，异步代码拥有了更强的表达力

// 常见任务处理代码
const pro = new Promise((resolve, reject)=>{})
/*
 * 任务成功后，执行处理1，失败则执行处理2
 */
pro.then(处理1).catch(处理2)

/*
 * 任务成功后，依次执行处理1、处理2
 */
pro.then(处理1).then(处理2)

/*
 * 任务成功后，依次执行处理1、处理2，若任务失败或前面的处理有错，执行处理3
 */
pro.then(处理1).then(处理2).catch(处理3)

Promise的静态方法

MDN Promise参考

Promise.resolve

直接返回一个完成状态的任务

const pro = new Promise.resolve()
// pro 此时的状态直接就是成功状态fulfilled

Promise.reject

直接返回一个失败状态的任务

const pro = new Promise.reject()
// pro 此时的状态直接就是失败状态rejected

Promise.all

参数：传递一个任务数组。

返回一个新的任务，所有任务成功则成功进入then，任何一个失败则失败进入。

const pro1 = new Promise((resolve, reject) => {
    resolve(1)
});
const pro2 = new Promise((resolve, reject) => {
    resolve(2)
});
const pro3 = new Promise((resolve, reject) => {
    resolve(3)
});
//参数：传递一个任务数组。
Promise.all([pro1, pro2, pro3]).then(res => {
    //pro1,pro2,pro3 全部执行成功进入
    console.log(res);//res输出成功后的数据汇总[ 1, 2, 3 ]
}).catch(err => {
    //pro1,pro2,pro3 任意一项失败则进入
    console.log(err);//如果有任意一项失败，输出失败原因
})

Promise.any

参数：传递一个任务数组。

返回一个新的任务，任意一个任务成功则成功进入then，全部任务失败则失败进入catch

注意：比如有三个任务，第一个失败了，第二个成功，第三个成功，但是any不会执行第三个任务了，因为第二个任务已经成功了。

不管有多少任务，只要有一个成功了，后面的任务都不用看了

const pro1 = new Promise((resolve, reject) => {
    reject(1)
});
const pro2 = new Promise((resolve, reject) => {
    resolve(2)
});
const pro3 = new Promise((resolve, reject) => {
    resolve(3)
});
//参数：传递一个任务数组。
Promise.any([pro1, pro2, pro3]).then(res => {
    //pro1,pro2,pro3 任意一个任务执行成功进入
    console.log(res);//res输出第一个成功任务携带的值
}).catch(err => {
    //pro1,pro2,pro3 全部任务失败则进去
    console.log(err);//错误信息
})

Promise.allSettled

参数：传递一个任务数组。

返回一个新任务，任务数组全部进入 已决状态 则成功，该任务不会失败

const pro1 = new Promise((resolve, reject) => {
    reject(1)
});
const pro2 = new Promise((resolve, reject) => {
    resolve(2)
});
const pro3 = new Promise((resolve, reject) => {
    resolve(3)
});
//参数：传递一个任务数组。
Promise.allSettled([pro1, pro2, pro3]).then(res => {
    //pro1,pro2,pro3 执行完毕进入已决状态后执行
    console.log(res);//返回一个数组对象，包含任务状态与携带的值
    /**
     [
        { status: 'rejected', reason: 1 },
        { status: 'fulfilled', value: 2 },
        { status: 'fulfilled', value: 3 }
     ]
     */
})

Promise.race

参数：传递一个任务数组

返回一个新任务，返回一个执行完成的任务

const pro1 = new Promise((resolve, reject) => {
    resolve(1)
});
const pro2 = new Promise((resolve, reject) => {
    reject(2)
});
const pro3 = new Promise((resolve, reject) => {
    resolve(3)
});
//参数：传递一个任务数组。
const por = Promise.race([pro1, pro2, pro3]).then(res => {
    //pro1,pro2,pro3 看这三个谁先执行完成，谁先执行完成了就返回一个任务，por就是谁
    console.log(res);//第一个完成的任务携带的值
})

image-20210618161125894

async，awite

有了Promise，异步任务就有了一种统一的处理方式

有了统一的处理方式，ES官方就可以对其进一步优化

ES7推出了两个关键字async和await，用于更加优雅的表达Promise
注意：async，awite并不是promise的语法糖，！！！我之前面试这么说了，面试官问我他们是有多甜？？？

async

async关键字用于修饰函数，被它修饰的函数，一定返回Promise

async function method1(){
  return 1; // 该函数的返回值是Promise完成后的数据
}

method1(); // Promise { 1 }

async function method2(){
  return Promise.resolve(1); // 若返回的是Promise，则method得到的Promise状态和其一致
}

method2(); // Promise { 1 }

async function method3(){
  throw new Error(1); // 若执行过程报错，则任务是rejected
}

method3(); // Promise { <rejected> Error(1) }

await

await关键字表示等待某个Promise完成，它必须用于async函数中

async function method(){
  const n = await Promise.resolve(1);
  console.log(n); // 1
}

// 上面的函数等同于
function method(){
  return new Promise((resolve, reject)=>{
    Promise.resolve(1).then(n=>{
      console.log(n);
      resolve(1)
    })
  })
}

await也可以等待其他数据

async function method(){
  const n = await 1; // 等同于 await Promise.resolve(1)
}

处理错误

如果需要针对失败的任务进行处理，可以使用try-catch语法

async function method(){
  try{
    const n = await Promise.reject(123); // 这句代码将抛出异常
    console.log('成功', n)
  }
  catch(err){
    console.log('失败', err)
  }
}

method(); // 输出： 失败 123

面试题考点

Promise的基本概念

  1. image-20210618161125894-

链式调用规则

image-20210621103501094-

  1. then方法必定会返回一个新的Promise

    可理解为后续处理也是一个任务

  2. 新任务的状态取决于后续处理：

    • 若没有相关的后续处理，新任务的状态和前任务一致，数据为前任务的数据

    • 若有后续处理但还未执行，新任务挂起。

    • 若后续处理执行了，则根据后续处理的情况确定新任务的状态

      • 后续处理执行无错，新任务的状态为完成，数据为后续处理的返回值
      • 后续处理执行有错，新任务的状态为失败，数据为异常对象
      • 后续执行后返回的是一个任务对象，新任务的状态和数据与该任务对象一致

Promise的静态方法

方法名含义
Promise.resolve(data)直接返回一个完成状态的任务
Promise.reject(reason)直接返回一个拒绝状态的任务
Promise.all(任务数组)返回一个任务
任务数组全部成功则成功
任何一个失败则失败
Promise.any(任务数组)返回一个任务
任务数组任一成功则成功
任务全部失败则失败
Promise.allSettled(任务数组)返回一个任务
任务数组全部已决则成功
该任务不会失败
Promise.race(任务数组)返回一个任务
任务数组任一已决则已决，状态和其一致

async和await

ES7推出了两个关键字async和await，用于更加优雅的表达Promise

async

async关键字用于修饰函数，被它修饰的函数，一定返回Promise

async function method1(){
  return 1; // 该函数的返回值是Promise完成后的数据
}

method1(); // Promise { 1 }

async function method2(){
  return Promise.resolve(1); // 若返回的是Promise，则method得到的Promise状态和其一致
}

method2(); // Promise { 1 }

async function method3(){
  throw new Error(1); // 若执行过程报错，则任务是rejected
}

method3(); // Promise { <rejected> Error(1) }

await

await关键字表示等待某个Promise完成，它必须用于async函数中

async function method(){
  const n = await Promise.resolve(1);
  console.log(n); // 1
}

// 上面的函数等同于
function method(){
  return new Promise((resolve, reject)=>{
    Promise.resolve(1).then(n=>{
      console.log(n);
      resolve(1)
    })
  })
}

await也可以等待其他数据

async function method(){
  const n = await 1; // 等同于 await Promise.resolve(1)
}

如果需要针对失败的任务进行处理，可以使用try-catch语法

async function method(){
  try{
    const n = await Promise.reject(123); // 这句代码将抛出异常
    console.log('成功', n)
  }
  catch(err){
    console.log('失败', err)
  }
}

method(); // 输出： 失败 123

事件循环

根据目前所学，进入事件队列的函数有以下几种：

  • setTimeout的回调，宏任务（macro task）

  • setInterval的回调，宏任务（macro task）

  • Promise的then函数回调，微任务（micro task）

  • requestAnimationFrame的回调，宏任务（macro task）

  • 事件处理函数，宏任务(macro task)
删库并跑路
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
async与await
huihui_999的博客
10-24 6939
1.基本概念:async await号称异步的终极解决方案，async await之后再无回调. 2.基本使用: async用于修饰一个函数, 表示一个函数是异步的. 如果async函数内没有await, 那么async没有意义的, 全是同步的内容. 只有遇到了await开始往下, 才是异步的开始. 我们用代码分析一下: ...
初学者应该看的JavaScript Promise 完整指南
粉丝们务必加入微信粉丝群
09-10 633
作者：Adrian Mejia 译者：前端小智 来源：adrianmjia 点赞再看，养成习惯 本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。 这篇文章算是 JavaScript Promises 比较全面的教程，该文介绍了必要的方法，例如 then，catch和finally。 此外，还包括处理更复杂的情况，例.
async函数和await函数的使用
qq_43440532的博客
11-03 688
async函数返回值为Promise await函数放在一个Promise对象前 async函数和awite函数一般结合使用，实现同步语法，获得异步的Promise的结果，是对Promise用法的升级和优化。 // 1, async函数的语法特点 async function add(a,b){ // return a + b return new Promise(function(resolve){ resolve("abc") }) } console.l
async与awite详解
Lsukai的博客
10-02 2138
【代码】async与awite详解。
async await用法及原理总结
热门推荐
qq_44818085的博客
11-09 1万+
1.Async Await 原理（注：await 只能出现在 async 函数中） 当调用一个 async 函数时，会返回一个 Promise 对象 (关键) async 函数中可能会有 await 表达式，await表达式 会使 async 函数暂停执行，直到表达式中的Promise解析完成后继续执行 async 中 await 后面的代码并返回解决结果。 既然返回的是Promise 对象，所以在最外层不能直接获取其返回值，那么肯定可以用原来的方式：then() 链来处理这个 Promise 对象 原
尚硅谷Promise笔记
LQlove1的博客
12-15 629
主要笔记了Promise的api，和常见的关键问题，还有手写promise，和async和await的实战使用
promise笔记
newbeeAmay的博客
07-31 185
promise的基本使用 // 什么情况下会用到Promise? // 一般情况下是有异步操作时,使用Promise对这个异步操作进行封装 // new -> 构造函数(1.保存了一些状态信息 2.执行传入的函数) // 在执行传入的回调函数时, 会传入两个参数, resolve, reject.本身又是函数 new Promise((resolve, reject) => { setTimeout(() => { // 成功的时候调用resolve /
Promise 笔记
大大黄的博客
11-08 160
Promise 含义 异步编程的一种解决方案，比传统的解决方案【回调函数和事件】更合理。 Promise对象两个特点 对象不受外界影响。 共有三个状态pending， fulfilled ， rejected。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。即：一旦发生无法改变 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：pending => fulfilled 或者 pending => rejec
我的Promise笔记整理
01-12
### 我的Promise笔记整理 #### 一、为什么使用Promise 在JavaScript中，异步编程是一种常见的编程模式，用于处理耗时的操作，如网络请求、文件读写等。传统的异步编程模型通常采用回调函数的方式，例如，在进行一...
Promise笔记发布 (1).txt
07-31
### Promise基础知识详解 #### 一、Promise的基本概念 在JavaScript中，`Promise`是一个非常重要的概念，用于处理异步操作。传统的异步编程方法（如回调函数）可能会导致代码难以维护，这种现象被称为“回调地狱”...
js代码-Promise 笔记
07-15
本笔记将深入探讨Promise的基本概念、构造函数、状态转换、链式调用以及错误处理。 首先，Promise有三种状态：pending（等待中）、fulfilled（已成功）和rejected（已失败）。状态一旦改变，就不会再变，这也是...
Vue2 中对数组进行操作时需要注意什么
m0_73882020的博客
09-06 528
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
TinyWebSever源码逐行注释(五)_ http_conn.cpp
qq_39969848的博客
09-09 774
根据状态转移,通过主从状态机封装了http连接类。其中,主状态机在内部调用从状态机,从状态机将处理状态和数据传给主状态机。http_conn.cpp利用一个主从状态机来处理客户端的htttp连接并生成相应的响应。Linux下C++轻量级Web服务器，助力初学者快速实践网络编程，搭建属于自己的服务器.
使用stripe进行在线支付、退款、订阅、取消订阅功能(uniapp+h5)
weixin_52479803的博客
09-05 711
使用stripe进行在线支付、退款、订阅、取消订阅功能(uniapp+h5)
el-popover弹框自定义位置
weixin_47218354的博客
09-05 358
【代码】el-popover弹框自定义位置。
前端文件预览，PDF，word，TXT
致未来的你。的博客
09-06 452
前端文件预览，PDF，word，TXT
2024伊语IM即时通讯源码/im商城系统/纯源码IM通讯系统安卓+IOS前端纯原生源码
最新发布
翎风世界
09-10 360
2.4 node安装wget "https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xz"资料参考地址：https://www.1234f.com/sj/GitHub/qtym/20240910/677.html。源码下载地址：https://www.123pan.com/s/LA1bVv-5l5Vv。备用下载地址：http://pan.1234f.com:5212/s/5PrS4。api.xxx.com接口。im.xxx.com通讯。
尚硅谷promise笔记
09-10
尚硅谷的Promise笔记涵盖了Promise的基本结构、状态和值、then方法、基本实现以及零碎知识。在笔记中，还介绍了Promise的用法和底层实现原理，包括中断promise链的方式和catch方法的使用。 总结起来，尚硅谷的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值