web-dev-qa-db-ja.com

Axios APIからデータを返す

Node.JSアプリケーションを使用してAPIリクエストを送受信しようとしています。 Axiosを使用して、受信したAPI呼び出しから受信したデータを使用して、別のサーバーにget要求を実行します。 2番目のスニペットは、スクリプトが呼び出しからデータを返すときです。実際にそれを取得してコンソールに書き込みますが、2番目のAPIでそれを送り返しません。

function axiosTest () {
axios.get(url)
.then(function (response) {
        console.log(response.data);
// I need this data here ^^
return response.data;
})
.catch(function (error) {
    console.log(error);
});
}

...

axiosTestResult = axiosTest(); 
response.json({message: "Request received!", data: axiosTestResult});

私はこれが間違っていることを知っています、私はそれを機能させる方法を見つけようとしています。 console.logからデータを取得するように思える唯一の方法は、私の状況では役に立ちません。

javascriptnode.jsrestaxios
28
Bunkerguy

axiosTest関数でaxios呼び出しからプロミスを返し、別の.thenを使用して呼び出すときにプロミスから値を取得します

function axiosTest() {
  return axios.get(url).then(response => {
    // returning the data here allows the caller to get it through another .then(...)
    return response.data
  })
}

axiosTest().then(data => {
  response.json({ message: 'Request received!', data })
})

また、Promiseの仕組みについて詳しく読むことをお勧めします。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

47
kingdaro

Axios getを呼び出す前に空の配列を作成し、関数の最後に.then（function（response））が必要なデータを配列にプッシュした後、配列が返されました

function axiosTest () {
     var strr = [];
        axios.get(url)
       .then(function(response){
               strr.Push(response.data);
        })


        .catch(function(error){
               console.log(error);
           });
        return strr;
}
6
Fahad_Shovon

axiosTest()はasynchronouslyを起動し、待機していません。

functionresponse（variable）をキャプチャするには、_then()axiosTestDataを後で接続する必要があります。

詳細については、 Promise を参照してください。

レベルを上げるには Async を参照してください。

// Dummy Url.
const url = 'https://jsonplaceholder.typicode.com/posts/1'

// Axios Test.
const axiosTest = axios.get

// Axios Test Data.
axiosTest(url).then(function(axiosTestResult) {
  console.log('response.JSON:', {
    message: 'Request received',
    data: axiosTestResult.data
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
2
Arman Charan

AxiosライブラリはPromise（）オブジェクトを作成します。 PromiseはJavaScript ES6の組み込みオブジェクトです。このオブジェクトが新しいキーワードを使用してインスタンス化されるとき、引数として関数を取ります。この単一の関数は、2つの引数を取ります。それぞれの引数は、解決と拒否です。

Promiseはクライアント側のコードを実行し、coolJavascript非同期フローにより、最終的に1つまたは2つのことを解決できます。 Promiseの成功と同等）、またはその拒否（広く誤った解決と見なされます）。たとえば、最終的に応答オブジェクト（Promiseオブジェクトに含まれる）を返す関数を含むPromiseオブジェクトへの参照を保持できます）。そのため、このようなプロミスを使用できる1つの方法は、プロミスが何らかの応答に解決されるのを待つことです。

APIが呼び出しを返すのを数秒待つのは嫌だと思うかもしれません！ UIがAPI応答を待っている間whileできることを望みます。失敗すると、ユーザーインターフェイスが非常に遅くなります。それでは、この問題をどのように処理しますか？

まあ約束はasynchronousです。 Javascriptコードの実行を担当するエンジン（Node、共通ブラウザなど）の標準実装では、約束の結果がどうなるかは事前にわかりませんが、別のプロセスで解決されます。通常の戦略は、send関数（つまり、クラスのReact setState関数）をpromiseに送信し、何らかの条件（ライブラリの選択に依存）。これにより、Promiseの解決に基づいてローカルJavascriptオブジェクトが更新されます。 （従来のOOPの）ゲッターとセッターの代わりに、非同期メソッドにsend送信する可能性のある関数を考えることができます。

この例ではFetchを使用して、promiseで何が行われているかを理解し、axiosコード内で私のアイデアを複製できるかどうかを確認できるようにします。フェッチは基本的には生来のJSON変換なしのaxiosに似ており、約束を解決するための異なるフローがあります（学習するにはaxiosドキュメントを参照する必要があります） 。

GetCache.js

const base_endpoint = BaseEndpoint + "cache/";
// Default function is going to take a selection, date, and a callback to execute.
// We're going to call the base endpoint and selection string passed to the original function.
// This will make our endpoint.
export default (selection, date, callback) => {  
  fetch(base_endpoint + selection + "/" + date) 
     // If the response is not within a 500 (according to Fetch docs) our promise object
     // will _eventually_ resolve to a response. 
    .then(res => {
      // Lets check the status of the response to make sure it's good.
      if (res.status >= 400 && res.status < 600) {
        throw new Error("Bad response");
      }
      // Let's also check the headers to make sure that the server "reckons" its serving 
      //up json
      if (!res.headers.get("content-type").includes("application/json")) {
        throw new TypeError("Response not JSON");
      }
      return res.json();
    })
    // Fulfilling these conditions lets return the data. But how do we get it out of the promise? 
    .then(data => {
      // Using the function we passed to our original function silly! Since we've error 
      // handled above, we're ready to pass the response data as a callback.
      callback(data);
    })
    // Fetch's promise will throw an error by default if the webserver returns a 500 
    // response (as notified by the response code in the HTTP header). 
    .catch(err => console.error(err));
};

GetCacheメソッドを作成しました。例としてReactコンポーネントの状態を更新する様子を見てみましょう...

一部のReact Component.jsx

// Make sure you import GetCache from GetCache.js!

resolveData() {
    const { mySelection, date } = this.state; // We could also use props or pass to the function to acquire our selection and date.
    const setData = data => {
      this.setState({
        data: data,
        loading: false 
        // We could set loading to true and display a wee spinner 
        // while waiting for our response data, 
        // or rely on the local state of data being null.
      });
    };
  GetCache("mySelelection", date, setData);
  }

最終的には、データを「返す」ことはできません。できるという意味ですが、考え方を変える方がより慣用的です...今はsending非同期メソッドへのデータ。

ハッピーコーディング！

1
Callum Dempsey Leach

クライアント側のjsコードのIMOの非常に重要な経験則は、データ処理とUI構築ロジックを異なるfuncsに分けておくことです。これは、axiosデータのフェッチにも有効です。これからわか​​るように、よりシンプルで管理しやすい ok fetch

そしてこれ NOKフェッチ

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>

       function getUrlParams (){
          var url_params = new URLSearchParams();
          if( window.location.toString().indexOf("?") != -1) {
             var href_part = window.location.search.split('?')[1]
             href_part.replace(/([^=&]+)=([^&]*)/g,
                function(m, key, value) {
                   var attr = decodeURIComponent(key)
                   var val = decodeURIComponent(value)
                   url_params.append(attr,val);
             });
          }
          // for(var pair of url_params.entries()) { consolas.log(pair[0]+ '->'+ pair[1]); }
          return url_params ;
       }


      function getServerData (url, urlParams ){
          if ( typeof url_params == "undefined" ) { urlParams = getUrlParams()  }
          return axios.get(url , { params: urlParams } )
          .then(response => {
             return response ;
          })
          .catch(function(error) {
             console.error ( error )
             return error.response;
          })
       }

    // Action !!!
    getServerData(url , url_params)
        .then( response => {
           if ( response.status === 204 ) {
              var warningMsg = response.statusText
              console.warn ( warningMsg )
              return
           } else if ( response.status === 404 || response.status === 400) {
              var errorMsg = response.statusText // + ": "  + response.data.msg // this is my api
              console.error( errorMsg )
              return ;
           } else {
              var data = response.data
              var dataType = (typeof data)
              if ( dataType === 'undefined' ) {
                 var msg = 'unexpected error occurred while fetching data !!!'
                 // pass here to the ui change method the msg aka
                 // showMyMsg ( msg , "error")
              } else {
                 var items = data.dat // obs this is my api aka "dat" attribute - that is whatever happens to be your json key to get the data from
                 // call here the ui building method
                 // BuildList ( items )
              }
              return
           }

        })




    </script>
1
Yordan Georgiev