0
点赞
收藏
分享

微信扫一扫

Promise笔记

Ad大成 2022-04-01 阅读 76
前端

Promise规范

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

Promise A+ 规定：

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

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

    image-20210618155145355

    两个阶段

    三个状态

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

  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-

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

// 常见任务处理代码
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)
举报

相关推荐

Promise学习笔记

前端

Promise 学习笔记

学习笔记工作生活饥人谷技术博客

【学习笔记】Axios、Promise

linuxc++

Promise学习笔记一

学习javascript前端

node笔记记录10promise介绍2

编程语言

node笔记记录12promise介绍3

编程语言

node笔记记录9promise介绍1

学习回调函数异步操作jQuery前端开发

Javascript(笔记52) - promise - 2 API和方法

javascriptpromise前端开发

Javascript(笔记38) - ES6特性 - Promise

回调函数构造函数javascriptES6promiseJavaScript前端开发

node笔记记录13promise介绍4

学习JavaScript前端开发
0 条评论