JavaScript异步方法：如何将返回Promise改为直接返回结果-js教程-PHP中文网

JavaScript异步方法：如何将返回Promise改为直接返回结果

心靈之曲

发布： 2025-10-18 11:23:38

原创

726人浏览过

javascript异步方法：如何将返回promise改为直接返回结果

本文旨在解决JavaScript中异步方法返回Promise的问题，并提供将其改写为直接返回解析后的结果的方法。通过使用async和await关键字，我们可以更简洁、直观地处理异步操作，避免Promise嵌套，并直接获取异步操作的最终结果。本文将提供示例代码，详细解释如何修改现有的返回Promise的类方法，使其直接返回期望的数据类型。

在JavaScript中，处理异步操作通常会使用Promise。Promise代表一个异步操作的最终完成 (或失败) 及其结果值。然而，有时我们希望类方法直接返回异步操作的结果，而不是一个Promise对象。这可以通过 async 和 await 关键字来实现，从而简化代码并提高可读性。

使用 async 和 await

async 关键字用于声明一个异步函数。异步函数总是返回一个 Promise。await 关键字只能在 async 函数内部使用，它会暂停异步函数的执行，直到 Promise 被解析（resolved）或拒绝（rejected）。

通过在 fetchAsync 调用前添加 await 关键字，我们可以等待Promise解析完成，并将解析后的结果赋值给 result 变量。然后，我们可以直接返回 result，而不是返回一个Promise。

立即学习“Java免费学习笔记（深入）”；

示例代码

假设我们有以下类，其 GetAllCompanies 方法返回一个Promise：

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

export class MyClass {

  private readonly ServiceEndpoint: string = 
    "/xxx/xxx.DMS.UI.Root/Services/ConfigurationAPI.svc/";

  public async GetAllCompanies(): Promise<CompanyDto[]> {
    return fetchAsync(
      `${this.ServiceEndpoint}Company`,
      'GET'
    )
    .then(value => value.GetAllCompaniesResult);
  }
}

登录后复制

要将其改写为直接返回 CompanyDto[]，我们可以使用 await 关键字：

export class MyClass {

  private readonly ServiceEndpoint: string = 
    "/xxx/xxx.DMS.UI.Root/Services/ConfigurationAPI.svc/";

  public async GetAllCompanies(): Promise<CompanyDto[]> {
    let result = await fetchAsync(
      `${this.ServiceEndpoint}Company`,
      'GET'
    )
    .then(value => value.GetAllCompaniesResult);

    return result; 
  }
}

登录后复制

代码解释：

async 关键字: GetAllCompanies 方法被声明为 async，这意味着它是一个异步函数，并且会返回一个Promise。
await 关键字: 在 fetchAsync 调用前使用了 await 关键字。这会暂停 GetAllCompanies 方法的执行，直到 fetchAsync 返回的Promise被解析。
result 变量: Promise解析后的值，即 value.GetAllCompaniesResult，被赋值给 result 变量。
return result: 方法直接返回 result 变量，也就是 CompanyDto[] 类型的结果。

完整示例

假设 fetchAsync 函数定义如下：

async function fetchAsync(url: string, method: string): Promise<any> {
  const response = await fetch(url, { method: method });
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return await response.json();
}

登录后复制

完整的类和使用示例：

// 假设 CompanyDto 类型定义
interface CompanyDto {
  id: number;
  name: string;
}

async function fetchAsync(url: string, method: string): Promise<any> {
  const response = await fetch(url, { method: method });
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return await response.json();
}

export class MyClass {

  private readonly ServiceEndpoint: string = 
    "/xxx/xxx.DMS.UI.Root/Services/ConfigurationAPI.svc/";

  public async GetAllCompanies(): Promise<CompanyDto[]> {
    let result = await fetchAsync(
      `${this.ServiceEndpoint}Company`,
      'GET'
    )
    .then(value => value.GetAllCompaniesResult);

    return result; 
  }
}


// 使用示例
async function main() {
  const myClass = new MyClass();
  try {
    const companies: CompanyDto[] = await myClass.GetAllCompanies();
    console.log("Companies:", companies);
  } catch (error) {
    console.error("Error fetching companies:", error);
  }
}

main();

登录后复制