Typescript：Promiseの応答を返すメソッドの内部でfetch API呼び出しを構造化する方法

Question

私はたぶん些細なことだが、私はTypescriptで新しい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オブジェクトの値を解析してアクセスできません。

私は残りのコードを実行する前に応答を待っていますが、どのように私は約束からコンテンツをアンラップしますか？私はもう一度.thenを置くべきですか？私は何が欠けていますか？ありがとうございました。

Answer 1

javascriptでリクエストを待っている間に同期してブロックすることはできません。ユーザーのインターフェースがロックされます。

通常のjavascriptとほとんどのバージョンのTypeScriptでは、約束を返す必要があります。 typescriptですの新しいバージョンで

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

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

は、非同期/のawaitキーワードのサポートがあります - その代わりに、それは次のようになります。

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(コールバックを使用する代わりに、ブロックしているとふりまとうことができます。非同期メソッドから非同期メソッドを呼び出す場合は、引き続き通常通りコールバックを使用する必要があります。

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

そして今、私は以下のdataのようなJSON値にアクセスすることができます：今、私はanyとしてremoteFetchの戻り値の型を定義し、問題を解決することで

Answer 2

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

[誠実まだ明確ではありませんどうして私は 'Promise<Response>タイプを使用してください