[解決済み】JavaScriptからREST WebサービスAPIを呼び出すには?
2022-04-02 19:45:45
質問
ボタンが付いたHTMLページがあります。そのボタンをクリックすると、REST WebサービスAPIを呼び出す必要があります。オンラインであらゆるところを検索してみました。何の手がかりもありません。どなたか、この件に関するリード/ヘッドスタートを与えていただけませんか?非常に感謝しています。
どのように解決するのですか?
新しい Fetch API について誰も触れていないことに驚きました。この API は、執筆時点では IE11 を除くすべてのブラウザーでサポートされています。これは、他の多くの例で見られる XMLHttpRequest 構文を単純化するものです。
このAPIには
さらに多くの
が、まずは
fetch()
メソッドを使用します。これは2つの引数を取ります。
- リクエストを表すURLまたはオブジェクト。
- メソッド、ヘッダー、ボディなどを含むオプションの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
}
関連
-
[解決済み] React with ES7: Uncaught TypeError: Cannot read property 'state' of undefined [duplicate] (未定義のプロパティ'state'を読み込むことはできません。
-
[解決済み】JavaScriptで関数が存在するかどうかを確認する方法は?
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでメールアドレスを検証するのに最適な方法は何ですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】TypeError: $(...).DataTable は関数ではありません。
-
[解決済み】フォームコントロールの値アクセサがない
-
[解決済み】jquery $.ajaxオブジェクトのresponseJSONプロパティを取得する方法 [重複]。
-
[解決済み】コンソールがUnterminated JSX contentsエラーを投げる【終了しました
-
[解決済み】Reactのeslintエラーはpropsの検証で見つからない
-
[解決済み】React-Routerの子が1つしかない。
-
[解決済み】'useState' が定義されていない no-undef React
-
[解決済み] [Solved] Uncaught Invariant Violation: 前のレンダリング中よりも多くのフックをレンダリングする
-
[解決済み】Javascript、[オブジェクトHTMLInputElement]を表示中。]
-
[解決済み] Chromeの同一生成元ポリシーを無効にする