字符串数组和number数组,Promise类型

定义字符串数组和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();

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

每天吃饭的羊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值