Fetch
JavaScript は、必要に応じていつでもサーバへリクエストを送信し、新しい情報を読み込むことができます。 例えば、次のようなことができます: 注文を送信する ユーザ情報を読み込む サーバから最新の更新情報を受け取る …など …そしてこれらはすべてページをリロードすることなく行うことができます。 それを表す包括的な用語 “AJAX” (Asynchronous Javascript And Xml)があります。XML を使う必要はありません: この用語は昔から来ています。 ネットワークリクエストを送信し、サーバから情報を取得するための様々な方法があります。 fetch() メソッドはモダンで多目的に利用できるため、これから始めましょう。fetch は数年間進化と改善を続けています。今のところサポートはブラウザの間でとてもしっかりしています。 基本構文は次の通りです: url – アクセ
非同期処理とは？ 同期処理との違い、実装方法について解説 | クラウド導入・システム運用ならアールワークスへ
非同期処理について詳しく説明する前に、まず同期処理について説明します。 同期処理とは、複数のタスクを実行する際に一つずつ順番にタスクが実行される方式のことです。同期処理の場合、必ずプログラムに記載したとおりの順番でタスクが処理されます。そのため処理全体を把握しやすいメリットがあります。 一方でデメリットは、タスクの処理完了までに時間がかかり、ユーザーにとってはストレスとなる場合があることです。 「タスク1」「タスク2」を非同期処理するアプリケーションに、ユーザーAから「タスク1,2」を処理するリクエスト、ユーザーBから「タスク1」のみを処理するリクエストがあった場合で説明します。 非同期処理は、あるタスクを実行している最中にその処理を止めることなく別の処理を実行できるため、上図のように、ユーザーAのリクエストを処理中にユーザーBからのリクエストがあっても、ユーザーBはユーザーAの処理完了を
【JavaScript】Fetch API による非同期ネットワーク通信
この記事では、JavaScript における非同期ネットワーク通信の手段の一つである Fetch API について解説する。 同期通信と非同期通信 ブラウザに表示されている内容は、ブラウザから URL を指定してリクエスト（要求）を送信し、ネットワーク（インターネット）を介して、その URL で指定したデータを保有しているWebサーバーがレスポンス（応答）を返すことで取得されている。 そしてこのページ内容を取得する通信には、同期通信と非同期通信の２種類が存在する。 同期通信の場合、ブラウザはリクエストを送信すると受信待ちになり、処理を停止するため、ユーザーの操作を受け付けなくなる。その後、Webサーバーからの応答があると、取得した新しいページを画面に表示させ、ユーザーの操作も受け付けるようになる。 一方、非同期通信の場合は、JavaScript でリクエストを送信し、イベント処理としてWe
JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説
JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説した記事を紹介します。 ⭐️🎀 JavaScript Visualized: Promises & Async/Await by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コールバック地獄 Promiseの構文 イベントループ: Microtasksと(Macro)tasks AsyncとAwait はじめに JavaScriptのコードが期待通りに実行されないことに悩まされたことはないですか？ おそらく、関数が不規則に実行されたり、予測できないタイミングで実行されたり、実行が遅れたりしたことがあるかもしれません。そして、ES6で導入された新機能Promiseが原因かもしれません！ 何年も
Callback を撲滅せよ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。言語サポート（Node.js）チームの伊藤（@koh110）です。 Node.js v10 も10月にLTSとなり async/await によるフロー制御は当たり前のように利用されるようになってきました。JavaScriptの非同期処理は async/await から覚える人も今後増えていくでしょう。今回はそんな非同期処理について、社内での事例を交えて記事を書いていこうと思います。 index Promise 化がなぜ重要なのか ユーザーに promisify をさせる落とし穴 Road to Promise まとめ Promise 化がなぜ重要なのか ちょうど3年前のアドベントカレンダーで、今後はいろいろなモジュー
async/await を完全に理解する
この記事ではasync/awaitについて完全に理解する[1]ことを目標に説明します。 完全に理解するために一部厳密には正確ではない表現をしますがご了承ください。 (明らかに事実と異なる内容が含まれている場合はご指摘いただけると助かります) ちなみにC#の文法説明になりますが、他の言語でも基本的な考え方は同じはずです。例えばJavaScriptの場合はTask型をPromise型に置き換えていい感じに読んでください。 非同期処理とTask型 async/awaitを完全に理解するためには、非同期処理の扱い方について完全に理解する必要があります。 そもそも非同期処理って何？という方はググってください。同期処理と非同期処理の違いについては完全に理解した前提で説明します。 非同期処理は複数のタスクを同時並行に処理するためのものですが、実際にコードを書いていると非同期で処理しているタスクが終わるま
async function - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017. Learn moreSee full compatibilityReport feedback async function 宣言は、与えられた名前で新しい非同期関数のバインドを作成します。その関数の本体の中では await キーワードを使うことができ、ます。async および await キーワードを使用することで、プロミスベースの非同期の動作を、プロミスチェーンを明示的に構成する必要なく、よりすっきりとした方法で書くことができます。 非同期関数は async function 式を使用して定義することもできます。
まだXMLHttpRequestを使ってるの？ fetchのすすめ
JavaScriptでWeb的なプログラムを書いたことがある人は、XMLHttpRequestを使った経験もあるのではないかと思います。XMLHttpRequest，略してXHRは、JavaScript（+DOM）でサーバーとHTTP通信をするための唯一の方法としての地位を長らく保ってきましたが1、ここ3〜4年でより新しいAPIであるfetch APIが登場しました。fetch APIが出たばかりの頃は何だこのおもちゃはと正直思いましたが、いつの間にか仕様が充実していい感じになっていました。 皆さんは、この新しいAPIであるfetchをちゃんと使っているでしょうか。それとも、古いXHRを未だに使っているのでしょうか。この記事では、未だにfetchを使っていない人を主な対象としてfetchの使い方を解説します。（XHRと比較しながら解説するので$.ajaxとかaxiosとかしか使ったことがな
【Express.js】非同期処理の個人的ベストプラクティス (async/await) - Qiita
Express で非同期処理 サーバサイドで Node.js を使うユースケースとしては APIサーバ (BFF、SSR 含む) が考えられるが、 主な処理 (DB との接続、http 通信など) は基本的に非同期処理になっている 非同期処理のライブラリは色々あるが現在は標準に組み込まれた Promise を使うのが主流となっており、これを使えばコールバック地獄は避けられるが、できれば async/await を使って直感的に書きたい JavaScriptの同期、非同期、コールバック、プロミス辺りを整理してみる async/await 入門（JavaScript） しかし結局 await は async の中でしか書けないため、Express を利用する場合は実質トップレベルの RequestHandler 内でどう処理するかという問題が生じる アンチパターン: そのまま async をつ
async/await 入門（JavaScript） - Qiita
はじめに 今更ですが、JavaScriptのasync/awaitに関する備忘録になります。 「今まで$.Deferred()やPromiseなどで非同期処理は書いたことがあるが、async/awaitはわからない」 「$.Deferred()やPromiseなどの非同期処理の書き方より、もっと簡潔に書ける書き方があれば知りたい」 「今までの非同期処理の書き方と比べて何が良いのかわからない」 といった人達向けの記事です。 $.Deferred()やPromiseなどで非同期処理を書いたことがある前提のため、非同期処理自体に関する説明は記載しておりません。 記載している利用例のコードはChrome（最新）のコンソール上で動きますので、コンソール上で実行して動作を確認してみると理解が深まりやすいと思います。 本記事で用いている用語 Promiseを返す Promiseオブジェクトを返すこと。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
