1. ホーム
  2. ジャバスクリプト

[解決済み】JavaScriptからREST WebサービスAPIを呼び出すには?

2022-04-02 19:45:45

質問

ボタンが付いたHTMLページがあります。そのボタンをクリックすると、REST WebサービスAPIを呼び出す必要があります。オンラインであらゆるところを検索してみました。何の手がかりもありません。どなたか、この件に関するリード/ヘッドスタートを与えていただけませんか?非常に感謝しています。

どのように解決するのですか?

新しい Fetch API について誰も触れていないことに驚きました。この API は、執筆時点では IE11 を除くすべてのブラウザーでサポートされています。これは、他の多くの例で見られる XMLHttpRequest 構文を単純化するものです。

このAPIには さらに多くの が、まずは fetch() メソッドを使用します。これは2つの引数を取ります。

  1. リクエストを表すURLまたはオブジェクト。
  2. メソッド、ヘッダー、ボディなどを含むオプションのinitオブジェクト。

シンプルなGETです。

const userAction = async () => {
  const response = await fetch('http://example.com/movies.json');
  const myJson = await response.json(); //extract JSON from the http response
  // do something with myJson
}

前回の再作成 トップアンサー を、POSTで送信します。

const userAction = async () => {
  const response = await fetch('http://example.com/movies.json', {
    method: 'POST',
    body: myBody, // string or object
    headers: {
      'Content-Type': 'application/json'
    }
  });
  const myJson = await response.json(); //extract JSON from the http response
  // do something with myJson
}