非同期リクエストをロードするための追加クラス

Question

私はReactアプリケーションを構築していますが、私は1つ以上の関数を2回以上使用していることに気付きました。だから私はそれを抽出し、それの新しいクラスを作ることにしました。それは次のようになります。

export default class Fetcher { 
    constructor(url, callback) { 
    this.url = url; 
    this.callback = callback; 
    } 

    getData() { 
    const url = '/wp-json/wp/v2/' + this.url; 
    const req = new XMLHttpRequest(); 

    req.open('get', url, true); 
    req.onreadystatechange =() => { 
     if(req.readyState === 4) { 
     if(req.status === 200) { 
      this.callback(); 
      return req.responseText; 
     } else { 
      throw new Error(); 
     } 
     } 
    } 
    req.send(); 
    } 
} 

そして、私はこのようにそれを使用しています：

import Fetcher from '../Tools/XML'; 
    fetchPost() { 
    const data = new Fetcher('posts?slug='+this.props.params.slug, this.renderPost); 
    console.log(data.getData()); 
    } 

私の問題は、console.log戻りundefinedです。私は、要求が非同期であり、レンダリングが完了してからクエリが完了できるので、これが起こることを理解しています。

私の質問は、これをどのように克服できますか？

Answer 1

コールバックを使用する必要があります。非同期で動作するときには、直接戻り値を持てないためです。これに

this.callback(); 

：

this.callback(req.responseText); 

はその後、コールバック関数ではconsole.logを置く：

renderPost(responseText) { 
    console.log(responseText); 
} 

Answer 2

XMLHttpRequest API

getData()方法では、この行を変更同じ名前のコンストラクターを使用して、MDNごとに非同期呼び出しを行います。https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#XMLHttpRequest。

シナリオでは、このAPIを使用していますが、呼び出し元に何も返さないので、APIは呼び出し元に直接データを返すことはできません。非同期メソッドです。 は、あなたがcallback()を持っている、ので、この方法が完了すると、コールバックは引数としてresponseTextを渡されますので

this.callback(req.responseText); 

を使用して戻ってその呼び出し元への非同期呼び出しの結果を渡すためにそれを使用します。その変更を処理するために、この引数を受け入れるコールバックのメソッドシグネチャは、次のようになります。

renderPost (responseText) { 
    // Use the response now 
    console.log(responseText); 
}