ts: 实现promise

已于 2024-05-27 17:56:23 修改
阅读量862 收藏
点赞数 1
文章标签： typescript
于 2024-05-27 14:49:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36413371/article/details/139238152
版权

ts实现的promise和js实现的promise有什么使用上的区别

  1. 类型注解
    可以为 Promise 指定明确的返回类型，如 Promise< string>、Promise<number[]> 等。这有助于在编译时捕获类型错误
  2. 类型推断
    ts的类型推断功能可以自动推断出 Promise 的返回类型， 提高了代码的可读性。
  3. 类型安全性
    如果你尝试将一个 Promise 的解析值赋给一个不兼容的类型，TypeScript 编译器会报错。
  4. 更好的文档和代码提示
    再ide中会提供更好的文档和代码提示，包括 Promise 的类型信息、参数列表、返回值等，有助于你更快地理解代码并减少错误

示例1

// 示例： myPromise.resolve类型推断
let aa1 = myPromise.resolve("123");
let aa2 = Promise.resolve("123");

示例2

// 示例： Promise<string> 是一个类型注解
// 定义一个返回Promise<string>的函数
// let myPromise: Promise<string>;
// myPromise = new Promise((resolve, reject) => {
//   // ... 异步操作
//   resolve('这是另一个返回的字符串数据');
// });
function fetchMessageFromServer(): myPromise<string> {
  // 假设这是一个模拟的异步操作，例如从服务器获取数据
  return new myPromise<string>((resolve, reject) => {
    setTimeout(() => {
      // 模拟成功获取数据
      const message = 123;
      resolve(message); // 解析并返回字符串
    }, 2000); // 假设这个操作需要2秒钟
  });
}

// 使用fetchMessageFromServer函数并处理其结果
fetchMessageFromServer()
  .then((message) => {
    console.log(message); // 输出：Hello from the server!
    console.log(message.length); // 输出：21
  })
  .catch((error) => {
    console.error("An error occurred:", error);
  });

// 注意：在TypeScript中，通常不需要显式指定.then和.catch的参数类型，因为它们可以从Promise的泛型参数中推断出来。

// 如果你使用async/await语法，代码会更加简洁和直观：
async function printMessageFromServer() {
  try {
    const message = await fetchMessageFromServer();
    console.log(message); // 输出：Hello from the server!
    console.log(message.length); // 输出：21
  } catch (error) {
    console.error("An error occurred:", error);
  }
}

printMessageFromServer();

ts实现promise代码

// 2.1 promise有三个状态
const PENDING = "pending"; // 等待
const FULLFILLED = "fullfilled"; // 成功
const REJECTED = "rejected"; // 失败

// 1. promise是一个类, 执行类需要传递构造函数并立即执行
class myPromise<T> {
  constructor(executor) {
    // 构造函数constructor是一个类必须要有的方法，默认返回实例对象
    try {
      executor(this.resolve, this.reject);
    } catch (e) {
      this.reject(e);
    }
  }
  status = PENDING; // 状态
  value: T; // 成功的值默认是没有的是undefined
  reason: any; // 失败的值默认是没有的是undefined
  successCallback: Array<((value: T) => any) | null> = [];
  fallCallback: Array<((reason: any) => any) | null> = [];
  resolve = (value: T) => {
    // 2.2 如果状态不是等待，阻止程序向下执行（因为Promise有三个状态，只能 pending -> fullfilled / pending -> rejected, 一旦状态确定就不可改变）
    if (this.status !== PENDING) return;
    this.status = FULLFILLED; // 更改状态为成功
    this.value = value; // 保存成功的值
    // 5.2 判断成功回调函数是否存在，存在调用
    // this.successCallback && this.successCallback(this.value)
    // while (this.successCallback.length) this.successCallback.shift()(this.value)
    while (this.successCallback.length) {
      const callback = this.successCallback.shift();
      if (callback) callback(this.value);
    }
    // this.successCallback.shift()();
  }; // 箭头函数让函数内部指向类
  reject = (reason) => {
    // 2.3 如果状态不是等待，阻止程序向下执行（因为Promise有三个状态，只能 pending -> fullfilled / pending -> rejected, 一旦状态确定就不可改变）
    if (this.status !== PENDING) return;
    this.status = REJECTED; // 更改状态为失败
    this.reason = reason; // 保存失败的原因
    // 5.2 判断失败回调函数是否存在，存在调用
    // this.fallCallback && this.fallCallback(this.reason)
    // while (this.fallCallback.length) this.fallCallback.shift()(this.reason)
    // while (this.fallCallback.length) this.fallCallback.shift()();
    while (this.fallCallback.length) {
      const callback = this.fallCallback.shift();
      if (callback) callback(this.reason);
    }
  };
  then(
    successCallback?: (value: T) => any,
    fallCallback?: (reason: any) => any
  ) {
    // ???这两行代码意义何在
    successCallback = successCallback ? successCallback : (value) => value;
    fallCallback = fallCallback
      ? fallCallback
      : (reason) => {
          throw reason;
        };

    // 11. 传递
    console.log("this.status", this.status);
    // 返回promise对象可进行链式调用，并在把上一个then传给下一个then
    let promise2 = new myPromise((resolve, reject) => {
      // 3. then方法内部就是判断状态的，状态是成功调用成功回调，失败调用失败回调
      if (this.status === FULLFILLED) {
        // 9.2 同步代码执行后就可以拿到promise
        // setTimeout(() => {
        try {
          // 4.1 then成功的回调有一个参数，表示成功的值（默认是空的，就是undefined）
          let x = successCallback(this.value);
          // 判断x的值是普通值还是promise对象
          // 如果是普通值直接resolve
          // 如果是promise对象则查看返回的结果，根据这个结果决定调用resolve还是reject
          // resolve(x)
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
        // }, 0)
      } else if (this.status === REJECTED) {
        // 4.2 then失败的回调有一个参数，表示失败的原因
        // fallCallback(this.reason)
        // let y = fallCallback(this.reason)
        // reject(y)
        // setTimeout(() => {
        try {
          // 4.1 then成功的回调有一个参数，表示成功的值（默认是空的，就是undefined）
          let x = fallCallback(this.reason);
          // 判断x的值是普通值还是promise对象
          // 如果是普通值直接resolve
          // 如果是promise对象则查看返回的结果，根据这个结果决定调用resolve还是reject
          // resolve(x)
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
        // }, 0)
      } else {
        // 等待状态
        // 5.1  将成功和失败的状态存储起来
        // this.successCallback = successCallback
        // this.fallCallback = fallCallback
        // this.successCallback.push(successCallback)
        // this.fallCallback.push(fallCallback)
        this.successCallback.push(() => {
          // setTimeout(() => {
          try {
            // 4.1 then成功的回调有一个参数，表示成功的值（默认是空的，就是undefined）
            let x = successCallback(this.value);
            // 判断x的值是普通值还是promise对象
            // 如果是普通值直接resolve
            // 如果是promise对象则查看返回的结果，根据这个结果决定调用resolve还是reject
            // resolve(x)
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
          // }, 0)
        });
        this.fallCallback.push(() => {
          // setTimeout(() => {
          try {
            // 4.1 then成功的回调有一个参数，表示成功的值（默认是空的，就是undefined）
            let x = fallCallback(this.reason);
            // 判断x的值是普通值还是promise对象
            // 如果是普通值直接resolve
            // 如果是promise对象则查看返回的结果，根据这个结果决定调用resolve还是reject
            // resolve(x)
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
          // }, 0)
        });
      }
    });
    return promise2;
  }
  finally(callback) {
    return this.then(
      (value) => {
        // callback()
        // return value
        return myPromise.resolve(callback()).then(() => value);
      },
      (reason) => {
        // callback()
        // // throw reason ???为什么我这么不会执行到finally后面的then
        // return reason
        return myPromise.resolve(callback()).then(() => {
          throw reason;
        });
      }
    );
  }
  catch(fallCallback) {
    return this.then(undefined, fallCallback);
  }
  static all(array) {
    // 如果是promise保存结果，如果是普通值也保存下来，最后一并返回
    let result: any[] = [];
    let index = 0;
    console.log("all");
    return new myPromise((resolve, reject) => {
      function addData(key: number, value) {
        result[key] = value;
        index++;
        if (index === array.length) {
          resolve(result);
        }
      }
      for (let i: number = 0; i < array.length; i++) {
        let current = array[i];
        if (current instanceof myPromise) {
          // promise 对象
          current.then(
            (value) => addData(i, value),
            (reason) => reject(reason)
          );
        } else {
          // 普通值
          addData(i, array[i]);
        }
      }
    });
  }
  static resolve(value) {
    if (value instanceof myPromise) return value;
    return new myPromise((resolve) => resolve(value));
  }
}

function resolvePromise(promise2, x, resolve, reject) {
  if (promise2 === x) {
    // 9.1 避免then中同一个promise循环返回
    return reject(
      new TypeError("Chaining cycle detected for promise #<Promise>")
    );
  }
  if (x instanceof myPromise) {
    // x.then((value) => {resolve(value)}, reason => reject(reason))
    x.then(resolve, reject);
  } else {
    resolve(x);
  }
}

// 在node中
// module.exports = myPromise
// 在es6中
// export const myPromise = myPromise
小强有个dream
关注
TS声明promise返回来的数据类型
imkaifan的博客
10-10 183
解释说明（源于AI）：Promise: Promise 是 JavaScript 和 TypeScript 中用于处理异步操作的对象。它代表一个尚未完成但预期将来会完成的操作的结果。Emap: Emap 是一个类型，通常在 TypeScript 中用来表示某种数据结构或对象。具体来说，它可能是一个接口、类或者类型别名，用于定义对象的结构。数组: [] 表示这是一个数组，即可以包含多个 Emap 类型的元素。。在这个示例中：我们定义了一个 Emap 接口，表示具有 id 和 name 属性的对象。
Promise ts版实现
shiyisen_web的博客
07-17 837
Promise ts版实现 /** * @file promise * * promise是一个带有then方法的对象或函数 * value是任何合法的JavaScript值(包括undefined、promiseLike或promise)。 * * pending态时： * 可以过渡到完成或拒绝状态。 * fulfilled态时： * 不能过渡到任何其他状态。 * 必须有一个不能改变的值。 * rejected态时： * 不能过渡到任何其他状
Promise基础（上）
weixin_54685571的博客
01-09 2074
目录 一：Promise是什么？ 二：为什么要是用Promise? 三：Promise体验(随机数抽奖小案例) 四：Promise实践联系 一：理解： 1. 抽象表达： 1）：Promise是一门新的技术(ES6)规范 2）：Promise是JS中进行异步编程的新解决方案（备注：旧的解决方案是单纯使用回调函数） 2. 具体表达： 1）：从语法上来说：Promise是一个构造函数 2）：从功能上来说：Promise对象用...
Promise链式调用原理及实现（TS）
weixin_50368372的博客
02-17 2544
手把手教你理解、实现Promise
初探TS实现一个promise
CSDN_156的博客
11-11 2533
关于手写实现一个promise，网上有很多相关的教程，这里推荐一篇文章Promise实现原理（附源码） - 简书，这片文章对promise的实现过程讲解的很明白 1. 我们先来看下面这个代码，这个代码没有严格遵守Promise/A+规范，就是一个简易版的promise，这个代码可以更好理解promise原理（直逼原理） promise代码 class MyPromise { status = undefined value = undefined reason = undefined
TS Promise && async && await
zien的博客
12-22 3359
通过测试代码，深入了解promise、async、await的功能以及应用方式
ts-promise:TS-Promise-快速，强大，类型安全的承诺
05-02
介绍 TS-Promise是一个快速，可靠，类型安全的Promise库。 特征： 符合Promises / A + 1.1 兼容ES6 Promise接口 可能未处理的拒绝检测（可以禁用） 使用.done()提前抛出未处理的拒绝 长堆栈跟踪支持（在运行时可切换！） 小型（压缩后的压缩版本2.0.0仅重4kB，包括所有内容） 有效地支持无限递归（带有或不带有长堆栈跟踪） 可选的显式承诺链刷新，对测试框架很有用 可读的代码（没有太多技巧） 用法示例 使用npm安装： cd your-project npm install --save ts-promise 如果您使用TypeScript，请在tsconfig.json使用"moduleResolution": "node"使其自动获取此程序包的类型。 为了在浏览器中使用，建议使用诸如Webpack的捆绑程序，但也可以使用dis
5.TS中promise类型的使用
m0_56986233的博客
08-09 2697
TS中promise类型的使用
用 TS 实现 Promise（官方测试工具测试通过）
weixin_45693198的博客
02-20 3633
用TS实现Promise（官方测试工具测试通过） Promises/A+ 规范文档 Promises/A+（原文） Promises/A+（译文） 代码实现 先定义需要用到的类型： // Promise的状态 enum States { PENDING = "pending", FULFILLED = "fulfilled", REJECTED = "rejected", } // 用于接收一个Promise的函数 interface Resolve<T> {
从 TS 造 Promise 的过程建立前端安全感
weixin_34380948的博客
11-30 1020
你还在用 npm 的 star 数来选择依赖吗？在 npm 安全性问题随时爆发 的今天，作为前端开发者的我们应该具备源码阅读的能力，最好知道自己在用什么，这样在使用外部 npm 依赖时才有安全感不是么? 最近遇到一个细思极恐的问题，笔者最近老是收到防脱广告推送亦或是一些与笔者最近说出来的话相关的广告，以前只知道网上的信息流会被窃据，如今难...
TS·promise
zz的专栏
12-15 186
TS·promise
queue-ts：基于并发的基于promise的工作队列，并发性有限
02-24
队列ts 基于承诺的并发性受限的工作人员队列。 用法 // Create a queue with two worker threads const queue = new Queue ( 2 ) ; queue . onEmpty ( ( ) => { console . log ( 'done' ) ; } ) ; // Adding tasks...
promises-aplus:JavaScript Promise的简单TypeScript实现，符合PromiseA +规范
04-23
JavaScript Promise的简单TypeScript实现，符合Promise / A +规范。 规格-https: 测试-https: 发展 为src目录中的每个文件启动打字稿编译，并输出到dist 。 npm start 运行测试 需要先编译为JavaScript。 测试...
TS 实现 Promise 相关 api
weixin_45693198的博客
06-06 965
TS 实现 resolve, reject, all, race 方法
填坑，从零带你手写Promise (typescript)
最新发布
weixin_40710412的博客
09-29 708
手撸promise之前，我们先用ts对我们自己的promise进行简单的类型定义观察一下浏览器提供的Promise对象：在Promise对象本身上，包含了记录promise对象状态的 state 以及记录结果的Result。其中state包含了 pending fulfilled rejected 三个状态。/** Promise状态枚举 *//** 未决策状态 *//** 成功状态 *//** 拒绝状态 */
实现一个TS版，符合 Promise/A+规范的 Promise
油墨香^-^的博客
09-30 1121
的回调函数的参数值，作为该被返回的 Promise 的拒绝状态回调函数的参数值。
ts promise
CodeHouse的博客
09-27 837
const fs = require("fs"); console.log("hello"); // fs.readFile(path, (err,data)={}); fs读取文件回调函数 fs.readFile("./file.txt", (err, data)=>{ if (err) throw err; console.log(data.toString()); }); // promise的回调函数 let p = new Promise((resolve, rejec
Promise TS写法
baidu_41677887的博客
09-23 1164
promsie的使用TS手写
Promise.resolve() 方法
热门推荐
雾里看花叹朦胧
03-04 4万+
Promise.resolve方法允许调用时不带参数，直接返回一个resolved状态的 Promise 对象。 所以，如果希望得到一个 Promise 对象，比较方便的方法就是直接调用Promise.resolve方法。 需要注意的是，立即resolve的 Promise 对象，是在本轮“事件循环”（event loop）的结束时，而不是在下一轮“事件循环”的开始时。 setTimeout(fu...
vue3+ts实现图片预加载
05-25
实现图片预加载可以提升网页性能和用户体验。下面是使用 Vue3 + TypeScript 实现图片预加载的示例代码： 1.首先在组件中定义一个数组，用于存储需要预加载的图片路径。 ```typescript export default defineComponent({ data() { return { imgList: [ "https://example.com/image1.jpg", "https://example.com/image2.jpg", "https://example.com/image3.jpg", ], }; }, }); ``` 2.在组件的 `mounted` 钩子函数中，使用 `Promise.all` 方法创建多个 Promise 对象，用于加载所有图片。 ```typescript export default defineComponent({ mounted() { const promises = this.imgList.map((src) => { return new Promise((resolve, reject) => { const img = new Image(); img.onload = () => { resolve(); }; img.onerror = (e) => { reject(e); }; img.src = src; }); }); Promise.all(promises) .then(() => { console.log("All images loaded successfully."); }) .catch((e) => { console.error("Failed to load image: ", e); }); }, }); ``` 3.在模板中使用 `v-for` 指令循环展示预加载的图片。 ```html <template> <div> <img v-for="(src, index) in imgList" :key="index" :src="src" /> </div> </template> ``` 这样就完成了使用 Vue3 + TypeScript 实现图片预加载的示例代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值