Promise学习笔记

最新推荐文章于 2022-11-04 07:22:16 发布

zql0307

最新推荐文章于 2022-11-04 07:22:16 发布

阅读量174

点赞数

分类专栏： ES6/7 文章标签：前端 javascript es6/es7

本文链接：https://blog.csdn.net/Mr_Chelin/article/details/122447420

版权

ES6/7 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

Promise规范

Promise API

Promise链式调用

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

Promise规范

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

这套规范最早诞生于前端社区，规范名称Promise A+

Promise A+

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

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

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

任务总是从未决阶段到已决阶段，无法逆行
任务总是从挂起状态变成完成或失败状态，无法逆行
时间无法倒流，历史无法改写，任务一旦完成或失败，状态就固定下来，永远无法改变

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

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

Promise API

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

基本使用如下：

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

pro.then(
    (data) => {
        // onFulfilled 函数，当任务完成后，会自动运行该函数，data为任务完成的相关数据
    },
    (reason) => {
        // onRejected 函数，当任务失败后，会自动运行该函数，reason为任务失败的相关原因
    }
);

Promise链式调用

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

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

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

若没有相关的后续处理，新任务的状态和前任务一致，数据为前任务的数据
若有后续处理但还未执行，新任务挂起
若后续处理执行了，则根据后续处理的情况确定新任务的状态
- 后续处理执行无错，新任务的状态为完成，数据为后续处理的返回值
- 后续处理执行有错，新任务的状态为失败，数据为异常对象
- 后续执行返回的是一个任务对象，新任务的状态和数据与该任务对象一致

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

// 常见任务处理代码

/*
*  任务成功后，执行处理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，异步任务就有了一种统一的处理方式

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

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