Question

也许是一个微不足道的，但我是使用Typescript和fetch API的新手。在导出的类中，我有一个公共方法remoteFetchSomething，如：

export class className {
  remoteFetchSomething = (url : string) : Promise<Response> => {
    return fetch(url)
      .then(
        (r) => r.json()
      )
      .catch((e) => {
        console.log("API errore fetching " + objectType);
      });
  }
}

export const classInstance = new className();

该方法查询远程JSON API服务，在代码中，我使用它：

import { classInstance } from ...

classInstance.remoteFetchSomething('https://example.url')
  .then((json) => {
    console.log(json);
  }
)

console.log实际上是显示结果，但remoteFetchSomething会返回 Promise ，我无法解析和访问JSON对象值。

我想在执行剩余代码之前等待响应，但是如何从promise中解包内容？我应该再放一个.then吗？我错过了什么？

谢谢。

Answer 1

在javascript中等待请求时，您无法同步阻止，这会锁定用户的界面！

在常规JavaScript和大多数版本的TypeScript中，您应该/必须返回一个承诺。

<h2 class="pos_left">This heading is moved left according to its normal position</h2>

在较新版本的打字稿中，有async / await关键字支持 - 所以它可能看起来像这样：

function doRequestNormal(): Promise<any> {
    return fetch(...).then(...);
}

function someOtherMethodNormal() {
    // do some code here
    doRequestNormal.then(() => {
        // continue your execution here after the request
    });
}

请注意，async function doRequestAsync() { var result = await fetch(...); // do something with request; return result; } async function someOtherMethodAsync() { // do some code here var json = await doRequestAsync(); // continue some code here }仍会在引擎盖下返回一个承诺 - 但是当您调用它时，您可以使用doRequestAsync假装您在其上阻止，而不是需要使用await回调。.then(如果从非异步方法调用异步方法，您仍然需要正常使用回调。

Answer 2

到目前为止，我解决了将remoteFetch的返回类型定义为any的问题：

remoteFetchSomething = (url : string) : any => {
return fetch(url)
  .then(
    (r) => r.json()
  )
  .catch((e) => {
    console.log("API errore fetching " + objectType);
  });
}

现在我可以访问下面的data之类的JSON值：

classInstance.remoteFetchSomething('https://example.url').then(
  (json) => {
    console.dump(json.data);
  }
)

[真诚地仍然不清楚为什么我不能＆＃39;使用Promise<Response>类型]

Typescript：如何在返回Promise响应的方法中构造一个fetch API调用

2 个答案: