展示类网站开发费用,wordpress添加博客栏目,南山网站建设方案书,wordpress 文章首标点ts实现的promise和js实现的promise有什么使用上的区别 类型注解 可以为 Promise 指定明确的返回类型#xff0c;如 Promise string、Promisenumber[] 等。这有助于在编译时捕获类型错误类型推断 ts的类型推断功能可以自动推断出 Promise 的返回类型#xff0…ts实现的promise和js实现的promise有什么使用上的区别 类型注解 可以为 Promise 指定明确的返回类型如 Promise string、Promisenumber[] 等。这有助于在编译时捕获类型错误类型推断 ts的类型推断功能可以自动推断出 Promise 的返回类型 提高了代码的可读性。类型安全性 如果你尝试将一个 Promise 的解析值赋给一个不兼容的类型TypeScript 编译器会报错。更好的文档和代码提示 再ide中会提供更好的文档和代码提示包括 Promise 的类型信息、参数列表、返回值等有助于你更快地理解代码并减少错误 示例1
// 示例 myPromise.resolve类型推断
let aa1 myPromise.resolve(123);
let aa2 Promise.resolve(123);示例2
// 示例 Promisestring 是一个类型注解
// 定义一个返回Promisestring的函数
// let myPromise: Promisestring;
// myPromise new Promise((resolve, reject) {
// // ... 异步操作
// resolve(这是另一个返回的字符串数据);
// });
function fetchMessageFromServer(): myPromisestring {// 假设这是一个模拟的异步操作例如从服务器获取数据return new myPromisestring((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 myPromiseT {constructor(executor) {// 构造函数constructor是一个类必须要有的方法默认返回实例对象try {executor(this.resolve, this.reject);} catch (e) {this.reject(e);}}status PENDING; // 状态value: T; // 成功的值默认是没有的是undefinedreason: any; // 失败的值默认是没有的是undefinedsuccessCallback: 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传给下一个thenlet promise2 new myPromise((resolve, reject) {// 3. then方法内部就是判断状态的状态是成功调用成功回调失败调用失败回调if (this.status FULLFILLED) {// 9.2 同步代码执行后就可以拿到promise// setTimeout(() {try {// 4.1 then成功的回调有一个参数表示成功的值默认是空的就是undefinedlet 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成功的回调有一个参数表示成功的值默认是空的就是undefinedlet 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成功的回调有一个参数表示成功的值默认是空的就是undefinedlet 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成功的回调有一个参数表示成功的值默认是空的就是undefinedlet 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 valuereturn myPromise.resolve(callback()).then(() value);},(reason) {// callback()// // throw reason ???为什么我这么不会执行到finally后面的then// return reasonreturn 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
