Promise 笔记

最新推荐文章于 2025-01-26 16:57:08 发布
最新推荐文章于 2025-01-26 16:57:08 发布
阅读量228 收藏
点赞数
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alice_Lee_Lee/article/details/121873177
版权

简介

1. 什么是Promise？
  • Promise是JS中进行异步编程的新解决方案（fs 文件操作，数据库操作，AJAX，定时器）
  • Promise是一个构造函数，promise对象用来封装一个异步操作并可以获取其成功/失败的结果值
2. Promise的优点
  • 指定回调函数的方式更加灵活
  • 支持链式调用，可以解决回调地狱问题

回调地狱

  • 含义：回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件
  • 缺点：不便于阅读；不便于异常处理

使用

简单使用

<h1>Promise初体验</h1>
<hr />
<button id="btn">点我抽奖</button>
<script>
  //生成随机数
  function rand(m, n) {
    return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
  }
  document.getElementById("btn").onclick = function () {
    const p = new Promise((resolve, reject) => {
      setTimeout(() => {
        let n = rand(1, 100);
        if (n <= 30) {
          resolve(n); // 将Promise对象的状态设置为 成功
        } else {
          reject(n); // 将Promise对象的状态设置为 失败
        }
      }, 1000);
    });
    // 调用then方法
    p.then(
      // 成功回调
      (value) => {
        alert("中奖了！您的中奖数字为：" + value);
      },
      // 失败回调
      (reason) => {
        alert("啥也没有，您的号码为：" + reason);
      }
    );
  };
</script>

fs文件读取

const fs = require("fs");

function mineReadFile(path) {
  return new Promise((resolve, reject) => {
    fs.readFile(path, (err, data) => {
      if (err) {
        reject(err);
      } else {
        resolve(data);
      }
    });
  });
}

mineReadFile("./note.txt").then(
  (value) => {
    console.log(value.toString());
  },
  (reason) => {
    console.log(reason);
  }
);

const fs = require("fs");
const util = require("util");
let mineReadFile = util.promisify(fs.readFile);

mineReadFile("./note.txt").then(
  (value) => {
    console.log(value.toString());
  },
  (reason) => {
    console.log(reason);
  }
);

AJAX请求

<h1>Promise 封装 AJAX</h1>
<hr />
<button id="btn">点我发送 AJAX请求</button>
<script>
  document.getElementById("btn").onclick = function () {
    const p = new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open("GET", "https://api.apiopen.top/getJoke");
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            resolve(xhr.response);
          } else {
            reject(xhr.status);
          }
        }
      };
    });
    p.then(
      (value) => {
        console.log(value);
      },
      (reason) => {
        console.log(reason);
      }
    );
  };
</script>

Promise的状态改变

  • Promise的状态指的是Promise实例对象中的一个属性
  • 改变只有两种：pending 变为 resolved / fullfilled 或者是 pending 变为 rejected
  • pending 是初始默认值，表示未决定的
  • 一个promise对象只能改变一次，无论变为成功还是失败，都会有一个结果数据

Promise对象的值

  • Promise实例对象中的另一个属性，保存的是异步任务成功或失败的结果
  • resolve 和 reject 函数才可以修改这个值

Promise的基本流程

在这里插入图片描述

Promise 的 API

Promise()

const p = new Promise((resolve, reject) => {})
/*
executor 函数：(resolve, reject) => {} 也叫执行器函数
resolve 函数：内部定义成功时调用的函数 value => {}
reject 函数：内部定义失败时调用的函数 reason => {}
说明：executor 会在 Promise 内部立即同步调用，异步操作在执行器中执行
*/

Promise.prototype.then(onResolved, onRejected) => {}

p.then(onResolved, onRejected) => {}
/*
onResolved 函数：成功的回调函数 value => {}
onRejected 函数：失败的回调函数 reason => {}
说明：指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调，返回一个新的 promise 对象
*/

Promise.prototype.catch(onRejected) => {}

const p = new Promise((resolve, reject) => {
  reject("error!dudu!");
});
p.catch((reason) => {
  console.log(reason); // error!dudu!
});

Promise.resolve()

// 如果传入的参数为 非promise类型的对象，返回的结果为成功promise对象
Promise.resolve(1208).then((value) => {
  console.log(value); // 1208
});
// 如果传入的参数为 promise类型的对象，则参数的结果决定了 resolve 的结果，如果参数成功结果就是成功
Promise.resolve(p).then(
  (value) => {
    console.log("成功了~", value);
  },
  (reason) => {
    console.log("失败了~", reason);
  }
);

Promise.reject()

// 不管参数是什么，返回都是一个失败的promise对象，对象的值就是参数的值
Promise.reject(1208).catch((reason) => {
  console.log(reason); // 1208
});
Promise.reject(
  new Promise((resolve, reject) => {
    resolve("success!dudu!");
  })
).catch((reason) => {
  console.log(reason); // Promise { 'success!dudu!' } 成功的promise对象
});

Promise.all()

const p = new Promise((resolve, reject) => {
  reject("error!dudu!");
});
const p0 = new Promise((resolve, reject) => {
  reject("defeat!dudu!");
});
const p2 = new Promise((resolve, reject) => {
  resolve("success!dudu!");
});
const p3 = new Promise((resolve, reject) => {
  resolve("victory!dudu!");
});
// 返回的promise对象只有当数组中的所有对象都成功时才成功
Promise.all([p, p0, p2]).then(
  (value) => {
    console.log("成功了~", value);
  },
  (reason) => {
    console.log("失败了~", reason); // 失败了~ error!dudu! 失败的返回值是数组中第一个失败对象的值
  }
);
Promise.all([p3, p2]).then(
  (value) => {
    console.log("成功了~", value); // 成功了~ [ 'victory!dudu!', 'success!dudu!' ] 成功的值所有对象组成的数组
  },
  (reason) => {
    console.log("失败了~", reason);
  }
);

Promise.race()

const p = new Promise((resolve, reject) => {
  reject("error!dudu!");
});
const p2 = new Promise((resolve, reject) => {
  resolve("success!dudu!");
});
// 返回的promise对象与数组中先得到结果的promise对象相同
Promise.race([p, p2]).then(
  (value) => {
    console.log("成功了~", value);
  },
  (reason) => {
    console.log("失败了~", reason);
  }
);

一些关键问题

1. 修改Promise对象状态的方法

调用 resolve方法将状态从 pending 修改为 resolved

const p = new Promise((resolve, reject) => {
  resolve("dudu");
});
console.log(p);

调用 reject方法将状态从 pending 修改为 rejected

const p = new Promise((resolve, reject) => {
  reject("dudu");
});
console.log(p);

通过抛出错误的方式，将状态从 pending 修改为 rejected

const p = new Promise((resolve, reject) => {
  throw "dudu";
});
console.log(p);
2. 多个回调的执行

当Promise对象的状态改变时，对应的多个回调都会执行

const p = new Promise((resolve, reject) => {
  resolve("dudu");
});
// 下面指定的两个回调都会执行
p.then((value) => {
  console.log("1.成功了...", value);
});
p.then((value) => {
  console.log("2.成功了...", value);
});
3. 改变promise状态和指定回调函数的先后顺序

先改变状态再指定回调：使用同步代码改变状态 或 回调也在异步中指定

const p = new Promise((resolve, reject) => {
  resolve("dudu");
});
p.then(
  (value) => {
    console.log("成功了...", value);
  },
  (reason) => {
    console.log("失败了...", reason);
  }
);

先指定回调再改变状态：使用异步代码改变状态

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("zhou");
  }, 1000);
});
p.then(
  (value) => {
    console.log("成功了...", value);
  },
  (reason) => {
    console.log("失败了...", reason);
  }
);
4. promise.then() 返回的新 promise 的结果状态
const p = new Promise((resolve, reject) => {
  resolve("zhou");
});
/*
result 是一个promise对象，它的值由回调方法的结果决定
1. 如果抛出异常，result的状态为失败，值为回调throw的内容
2. 如果返回结果为非promise类型的对象，result的状态为成功，值为回调返回的值
3. 如果返回结果为promise类型的对象，result由回调中返回的对象来决定
*/
const result = p.then((value) => {
  console.log("成功了...", value);
  // throw "zh  ou";
  // return 123;
  return new Promise((resolve, reject) => {
    // resolve("我在回调里成功了");
    reject("我在回调里失败了");
  });
});
console.log(result);
5. promise串联多个操作任务

由于promise的then方法返回的还是promise对象，可以进行链式调用

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("dudu");
  }, 1000);
});
p.then((value) => {
  console.log("成功了...", value);
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("dududu");
    }, 1000);
  });
}).then((value) => {
  console.log("成功了...", value);
});
6. promise异常穿透

当使用 promise 的 then 链式调用时，可以在最后指定失败的回调，前面的任何操作出了异常，都会传到最后失败的回调中处理

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("dudu");
    // reject("dudududududu");
  }, 1000);
});
p.then((value) => {
  console.log("成功了...", value);
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // resolve("dududu");
      reject("dudududududu");
    }, 1000);
  });
})
  .then((value) => {
    console.log("成功了...", value);
  })
  .then((value) => {
    console.log("成功了...", value);
  })
  .catch((reason) => {
    console.log(reason);
  });
7. 中断Promise链

含义：当使用promise的then链式调用时，在中间间断，不再调用后面的回调函数
方式：在回调函数中返回一个pending状态的promise对象

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("dudu");
  }, 1000);
});
p.then((value) => {
  console.log("成功了...", value);
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("dududu");
    }, 1000);
  });
})
  .then((value) => {
    console.log("成功了...", value);
    // 返回一个pending状态的promise对象
    return new Promise(() => {});
  })
  .then((value) => {
    console.log("成功了...", value);
  })
  .catch((reason) => {
    console.log(reason);
  });

async 和 await

1. async 函数
  • 函数的返回值为promise对象
  • promise 对象的结果由 async 函数执行的返回值决定
// 和then方法返回值的规则相同
async function fn() {
  // return 123;
  // return new Promise((resolve, reject) => {
  //   reject("OK");
  // });
  throw "error";
}
console.log(fn());
2. await 表达式
  • await 右侧的表达式一般为 promise 对象，但也可以使其他的值
  • 如果是 promise 对象，await 返回的是 promise 成功的值
  • 如果是其他值，直接将此值作为 await 的返回值
async function fn() {
  // let r1 = await new Promise((resolve, reject) => {
  //   resolve("OK");
  // });
  // let r2 = await 200;
  // console.log(r2);
  try {
    let r3 = await new Promise((resolve, reject) => {
      reject("error");
    });
  } catch (error) {
    console.log(error);
  }
}
fn();

注意：

  • await 必须写在 async 函数中，但 async 函数中可以没有 await
  • 如果 await 的 promise 失败了，就会抛出异常，需要通过 try…catch 捕获处理
3. 两个实例

读取三个文件

const fs = require("fs");
const util = require("util");
let mineReadFile = util.promisify(fs.readFile);

async function main() {
  try {
    let data1 = await mineReadFile("./note.txt");
    let data2 = await mineReadFile("./note.txt");
    let data3 = await mineReadFile("./note.txt");
    console.log(data1, data2, data3);
  } catch (error) {
    console.log(error);
  }
}

main();

发送AJAX请求

async function main() {
  try {
    let data = await axios({
      method: "GET",
      url: "https://api.apiopen.top/getJoke",
    });
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

main();

可以省略回调函数，书写比较简洁清晰

深入理解promise的三种状态与链式调用pending/reslove/reject
JackieDYH的博客
03-01 1688
promise出现的目的一为处理JavaScript里的异步，再就是避免回调地狱。 promise三种状态 1.pending：在过程中还没有结果 2.resolved：成功 3.rejected：失败 状态变化 1、pending -> resolved 2、pending -> rejected 状态的表现 pending状态不会触发then和catch resolved状态会触发后续的then回调函数 rejected状态会触发后续的catch回调函数 ..
我的Promise笔记整理
01-12
### 我的Promise笔记整理 #### 一、为什么使用Promise 在JavaScript中，异步编程是一种常见的编程模式，用于处理耗时的操作，如网络请求、文件读写等。传统的异步编程模型通常采用回调函数的方式，例如，在进行一...
promise（3）——Promise对象的两个属性：”PromiseState、PromiseResult；两个回调函数参数：resolve、reject；四个方法
热门推荐
木子 旭的博客
03-07 1万+
1.promise状态改变 Promise一共有三种状态： 未决定的：pending 成功：resolved、fulfilled 失败：rejected Promise一共有两种状态变化： （1）从pending变成resolved/fulfilled （2）从pending变成reject Promise有一个属性对应其状态：PromiseState 2.Promise的resolve和reject两个回调函数参数 当new一个Promise对象的时候，该Promise对象的PromiseSta
Promise 执行机制——共有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败） & 宏任务（主线） 微任务（穿插）
weixin_44867717的博客
12-04 1万+
Promise 执行机制——共有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败） & 宏任务（主线） 微任务（穿插） 深入探讨 Promise 之前，有个概念先交代一下，有助于对后文进行了解。 微任务 通常，我们把消息队列中的任务成为宏任务，而每一个宏任务中都包含了一个微任务队列。等到当前宏任务中的主要任务执行完成了以后，渲染引擎其实并不着急执行下一个宏任务，而是先去执行当前宏任务中的微任务。 只是引入了概念，我想大家会跟我有同样的疑惑，平常大部分的开发中
Promise笔记
m0_56983341的博客
09-26 900
promise笔记
尚硅谷Promise笔记
LQlove1的博客
12-15 673
主要笔记了Promise的api，和常见的关键问题，还有手写promise，和async和await的实战使用
promise笔记
newbeeAmay的博客
07-31 214
promise的基本使用 // 什么情况下会用到Promise? // 一般情况下是有异步操作时,使用Promise对这个异步操作进行封装 // new -> 构造函数(1.保存了一些状态信息 2.执行传入的函数) // 在执行传入的回调函数时, 会传入两个参数, resolve, reject.本身又是函数 new Promise((resolve, reject) => { setTimeout(() => { // 成功的时候调用resolve /
Promise笔记（完结版）
sokoooo的博客
01-24 1428
一、基本知识 1.promise的状态改变：promise状态是实例对象中的一个属性-PromiseState（内置的） 1）Promise状态：pending（pending？Pendding） 未决定的、resolved/fullfilled 成功、rejected 失败 2）状态的改变只存在两种情况：从 pending -> resolved 或者 从 pending -> rejected 3）一个promise对象只能改变一次状态 4）成功的结果数据一般称为value、失败的
Promise笔记发布 (1).txt
07-31
### Promise基础知识详解 #### 一、Promise的基本概念 在JavaScript中，`Promise`是一个非常重要的概念，用于处理异步操作。传统的异步编程方法（如回调函数）可能会导致代码难以维护，这种现象被称为“回调地狱”...
js代码-Promise 笔记
07-15
本笔记将深入探讨Promise的基本概念、构造函数、状态转换、链式调用以及错误处理。 首先，Promise有三种状态：pending（等待中）、fulfilled（已成功）和rejected（已失败）。状态一旦改变，就不会再变，这也是...
Android WebView 中网页被劫持的原因及解决方案
陆业聪
01-25 609
在 Android WebView 中，网页被劫持的情况可能由多种因素引起，包括 JavaScript 重定向、恶意网页、设置不当等。通过采取适当的安全措施，开发者可以有效降低这些风险，保护用户的浏览体验和数据安全。确保在开发过程中关注这些潜在的安全隐患，将有助于提升应用的整体安全性和用户信任度。
TypeScript进阶（三）：断言
最新发布
IT全栈 华强工作室
01-26 482
在TypeScript中，断言是把两种具有重叠关系的数据类型进行相互转换的一种 TS 语法，其可以把其中的一种数据类型转换成另外一种数据类型。类型断言和类型转换产生的效果一样，但语法格式不同。type定义的数据类型是引用数据类型，例如Array对象，不能是基本数据类型，例如stringnumberboolean，并且有 A 类实现了 B type 定义的数据类型【implements。
前端三件套详解之 HTML
2301_80330510的博客
01-24 884
超文本标记语言（英语：，简称：HTML）是一种用于创建网页的标准标记语言HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，用浏览器即可对HTML文件进行读取和显示。HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言:HyperTextMarkupLanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签。
制作动态菜单
m0_59860403的博客
01-23 245
什么叫做动态菜单？动态菜单就是根据用户属于不同的角色，每个角色还有不同的菜单，左侧菜单栏会有不同的显示。
HTML基础知识
2401_88481074的博客
01-22 617
希望用户提交一些特定的信息，但考虑到安全问题，或者是用户操作问题，不希望该数据发生改变。二者的区别readonly（只读）是会被提交的；表单项还要定义value属性，该属性用于明确提交时的实参（默认就是用户在窗口上输入的东西）多个单选框使用相同的name属性值，则就会有互斥效果。对于html代码来说，某些字符是有特殊含义的，如果想显示这些特殊符号，需要进行转义。（有下面两个属性）---------form只是设置了如何提交往哪提交。定义数据的提交地址（三种写法①完整的url②相对路径④绝对路径）
uniapp APP端页面触发调用webview（页面为uniapp开发的H5）里的方法
m0_49083276的博客
01-22 437
使用 getCurrentInstance() 获取当前组件的 Vue 实例，通过 instance.proxy.$scope.$getAppWebview() 获取 Uniapp 的原生 WebView 对象。使用 WebView 提供的 evalJS 方法，执行嵌入 H5 页面内的 JavaScript 代码。代码大意：调完接口后将接口返回参数注入webview。
第11篇：vue3 中 props 的使用
小画家
01-22 293
注意多个的话 中间是没有 , // <Person a = "哈哈中" :list = persons />import {defineProps} from 'vue' // 定义一个属性。{id:'e98219e13',name:'李四',age:19},{id:'e98219e14',name:'王五',age:20}{id:'e98219e12',name:'张三',age:18},']) // 注意如果多个的话 //// 遍历循环 v-for。
尚硅谷promise笔记
09-10
尚硅谷的Promise笔记涵盖了Promise的基本结构、状态和值、then方法、基本实现以及零碎知识。在笔记中，还介绍了Promise的用法和底层实现原理，包括中断promise链的方式和catch方法的使用。 总结起来，尚硅谷的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值