定义字符串数组和number数组
Promise类型
type ApiResponse = { success: true; data: string } | { success: false; error: string };
function fetchData(): Promise<ApiResponse> {
// 实际开发中可能是异步请求
const randomValue = Math.random();
if (randomValue > 0.5) {
return Promise.resolve({ success: true, data: "Successful response" });
} else {
return Promise.resolve({ success: false, error: "Error occurred" });
}
}
fetchData().then(response => {
if (response.success) {
console.log(response.data);
} else {
console.error(response.error);
}
});
在 TypeScript 中,Promise 是用于处理异步操作的一种方式。以下是一些使用 Promise 的示例代码,包括创建 Promise、处理成功和失败的情况,以及结合 async
/await
语法来简化异步操作。
再具体是使用的时候
interface IRequest<T> {
id: T;
}
interface IResponse<T> {
message: string;
result: T;
success: boolean;
}
async function getResult<T>(request: IRequest<T>): Promise<IResponse<number[]>> {
// 假设这里有一个逻辑来根据 request.id 获取数据
const data = [1, 2, 3]; // 示例数据
return {
message: '获取成功',
result: data,
success: true,
};
}
// 使用示例
const request: IRequest<number> = { id: 1 };
getResult(request)
.then(result => {
console.log(result.result); // 应输出: [1, 2, 3]
})
.catch(error => {
console.error('Error:', error);
});
示例 1: 创建 Promise
这里我们展示如何创建一个返回成功结果的 Promise 和一个返回错误结果的 Promise。
function asyncOperation(success: boolean): Promise<string> {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (success) {
resolve("Operation was successful!");
} else {
reject("Operation failed.");
}
}, 1000);
});
}
// 使用示例
asyncOperation(true)
.then(result => {
console.log(result); // 输出: Operation was successful!
})
.catch(error => {
console.error(error); // 不会被调用
});
asyncOperation(false)
.then(result => {
console.log(result); // 不会被调用
})
.catch(error => {
console.error(error); // 输出: Operation failed.
});
示例 2: 使用 async
/await
使用 async
/await
可以使异步代码看起来更像同步代码,便于阅读和维护。
这里的await相当于promise中的return,多个的await相当于promise内部多层嵌套promise和return
async function performAsyncOperation(success: boolean): Promise<void> {
try {
const result = await asyncOperation(success);
console.log(result); // 如果成功则输出结果
} catch (error) {
console.error(error); // 如果失败则输出错误
}
}
// 调用示例
performAsyncOperation(true); // 输出: Operation was successful!
performAsyncOperation(false); // 输出: Operation failed.
示例 3: 批量处理多个 Promise
使用 Promise.all
来并行处理多个异步操作,并等待所有操作完成。
const promise1 = asyncOperation(true);
const promise2 = asyncOperation(true);
const promise3 = asyncOperation(false);
Promise.all([promise1, promise2, promise3])
.then(results => {
console.log(results); // 不会被调用,因为有一个 Promise 失败了
})
.catch(error => {
console.error("One or more operations failed:", error); // 输出: One or more operations failed: Operation failed.
});
示例 4: 批量处理多个 Promise 并确保所有操作都完成
使用 Promise.allSettled
来处理多个异步操作,无论它们是成功还是失败。
Promise.allSettled([promise1, promise2, promise3])
.then(results => {
results.forEach((result, index) => {
if (result.status === "fulfilled") {
console.log(`Promise ${index + 1} succeeded with value: ${result.value}`);
} else {
console.error(`Promise ${index + 1} failed with reason: ${result.reason}`);
}
});
});
示例 5: 自定义类型的 Promise
如果需要返回特定类型的数据,可以在创建 Promise 时指定返回值的类型。
interface User {
id: number;
name: string;
}
function fetchUser(userId: number): Promise<User> {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (userId === 1) {
resolve({ id: 1, name: "John Doe" });
} else {
reject("User not found");
}
}, 1000);
});
}
// 使用示例
fetchUser(1)
.then(user => {
console.log(user); // 输出: { id: 1, name: 'John Doe' }
})
.catch(error => {
console.error(error); // 不会被调用
});
fetchUser(2)
.then(user => {
console.log(user); // 不会被调用
})
.catch(error => {
console.error(error); // 输出: User not found
});
这些示例展示了如何在 TypeScript 中使用 Promise 对象来处理异步操作,包括创建 Promise、处理成功和失败的情况,以及通过 async
/await
使异步代码更加简洁直观。
在实际开发的时候往往要把返回值给前端去处理:接口函数返回值是一个Promise,如何使用常量去接收呢:
function fetchData(): Promise<number> {
return new Promise(resolve => {
setTimeout(() => resolve(42), 1000);
});
}
async function main() {
// 显式定义类型
const result: number = await fetchData();
// 或者依赖于类型推断
// const result = await fetchData();
console.log(result); // 输出: 42
}
function fetchData(): Promise<number> {
// 模拟异步操作
return new Promise(resolve => {
setTimeout(() => resolve(42), 1000);
});
}
type S = ReturnType<typeof fetchData>;
// const a: S = fetchData();
// console.log('a', a);
const b: Promise<number> = fetchData(); // b 的类型应该是 Promise<number>
console.log('b', b);
// 如果你想要访问 Promise<number> 的结果,你需要使用 async/await 或者 .then 方法
async function main() {
const result: number = await fetchData();
console.log('result', result); // 输出结果: 42
}
main();