Vue3の新機能Suspenseで非同期を使った表示処理をスマートに記述しよう
Vueの新バージョン3で登場した新機能の一つが、Suspenseです。これは、ネットワークなどの非同期処理実装時において、その処理前やエラーハンドリングを簡単にしてくれる機能になります。使い方をマスターすれば、非同期処理の伴う表示処理が簡潔に書けるようになるでしょう。 これまでの非同期処理の書き方 例えば、非同期処理で取得したデータをもとに、データの一覧表示を行うコンポーネント（DataTable）があったとします。この場合、DataTableは次のような処理を実装すると思います。 呼び出された直後に「読み込み中…」というラベルを表示する 非同期処理がうまくいった時に、データを一覧表示する 非同期処理が失敗した時に、「エラーが発生しました」というラベルを表示する 呼び出し元になる親コンポーネントは、データを一覧表示するコンポーネントがどのようなステータスにあるのかまったく関知しない形になり
4歳娘「パパ、Promiseやasync/awaitって何？」〜Promise編〜 - Qiita
スペシャルサンクス @sega_yuu @frodo821 とある休日 娘（4歳）「ねえパパ」 ワイ「なんや、娘ちゃん？」 娘「非同期って何？」 ワイ「ひ、非道鬼！？」 娘「そうそう、非同期処理とかいうやつ」 ワイ「非道鬼を処理やて・・・！？」 非道鬼「ヴォ〜〜〜！！！」 娘「！？」 娘「・・・現れたわね、非道鬼」 娘「処理してあげる」 ワイ「娘ちゃん、まだ4歳なのに、もう厨二病か・・・？」 よめ太郎「おい」 よめ太郎「お前まさか、非同期も知らんのか・・・？」 ワイ「いやいや、まさかまさか」 ワイ「流石に知っとるわ」 ワイ「それはそれは・・・極悪非道な・・・鬼のことや・・・」 よめ太郎「お前が非道鬼に喰われてしまえ」 非同期処理とは よめ太郎「ええか、娘ちゃん」 よめ太郎「まず、同期って言葉は」 よめ太郎「タイミングが合うって意味や」 娘「じゃあ、非同期っていうのはタイミングが合わないって
Promiseの使い方、それに代わるasync/awaitの使い方 - Qiita
JavaScriptのasync/awaitはPromiseを使った非同期感たっぷりのコードを同期処理っぽくしてくれるが、async/awaitを理解するには、Promiseも知る必要がある。そこで、Promiseからおさらいしておこうと思う。 構文 まず基本的な構文。どうやってPromiseを作成するのか？ function 非同期的な関数(成功時コールバック, 失敗時コールバック) { if (...) { 成功時コールバック(成果) } else { 失敗時コールバック(問題) } } // ↓executor new Promise(function (resolve, reject) { 非同期的な関数( (成果) => resolve(成果), // 成功時コールバック関数 (問題) => reject(問題), // 失敗時コールバック関数 ) }) Promiseクラスをn
ES2017 async/await で sleep 処理を書く - Qiita
async/await は ES2016 でなく ES2017 でした。以下修正しています。 Node.js v7 より ES2017 async/await が利用できるとの話を耳にしたので「サーバサイドでくらい ES2017 使ってみるかな」とちょいちょい使い始めています。どこかのサーバへクエリを叩いてその結果をさらに別のサーバへのクエリに使うという処理って、手元でちょっとしたツールを作るときにも大いに登場する処理なのですが、async/await が使えることでとても簡単に書けるようになったので、その使用感などを僭越ながら簡単に紹介していきたいと思います。 単純なスリープ処理 始めに感動したのは async/await を使うとスリープ処理がいとも簡単に書けるというところでした。async/await と Promise を色々とこねくり回したところ msec => new Prom
Promiseチェーンの中で条件を満たすまで同じ処理を繰り返す（リトライ処理） - コンパイラかく語りき
Promiseチェーンの中で、特定の条件を満たすまで同じ処理を繰り返したい場合があります。 例: データロード処理 そんな場合のコードサンプルです。 コード こちら。 const retryPromise = (func, delay) => { const retry = (resolve, reject) => func() .then((result) => ({ result, isCompleted: (result !== null) })) .then(({ result, isCompleted }) => (isCompleted) ? resolve(result) : setTimeout(() => retry(resolve, reject), delay)) .catch(reject); return new Promise(retry); }; 解説 解説を
Bluebirdの高速化を可能にする、3つのJavaScriptパフォーマンスの基礎 | POSTD
最近Reaktorが掲載した『 Promises made by a Reaktor developer had an impact on the industry article 』で約束した、Bluebird promiseライブラリの製作者であるプログラマのPetka Antonovからの知見です。 Bluebirdは広く使用されているJavaScript用のpromiseライブラリで、同じような機能が実装されているにも関わらず、他のpromiseよりも100倍速いという理由から最初に知られるようになったのは2013年でした。Bluebirdが高速な理由はライブラリ全体にJavaScriptの最適化の基礎を一貫して適応しているからです。この記事ではBluebirdの最適化に使用する3つの重要な基礎について詳細に説明します。 1. 関数オブジェクトの割り当てを最小限に抑える オブジェク
Promiseはどう動作するのか – Promiseを実装してみる | POSTD
目次 1. はじめに 2. Promiseの概念を理解する 幕間：行列が嫌いな女の子 2.1 Promiseとは何か？ 幕間：実行順序 2.2 Promiseと並行処理 幕間：式の抽象化 3. Promiseのからくりを理解する 3.1. Promiseで式を順序付けする 3.2. 最小限のPromise実行 4.Promiseとエラー処理 幕間：計算失敗の場合 4.1. エラーをPromiseで処理する 4.2. Promiseの失敗の伝播 5. Promiseの結合 5.1. Promiseを確定的に結合する 5.2. Promiseを非確定的に結合する 6. Promiseの実用的な理解 6.1. ECMAScript Promiseの導入 6.2. .then の分析 7. Promiseとは相性が悪いケースとは？ 8. まとめ 参考文献 追加資料 資料とライブラリ 1. はじめに
俺たちはJavaScriptの非同期処理とどう付き合っていけば良いのだろうか - Qiita
おきまりのやつ CYBIRDエンジニア Advent Calendar 2015 2日目担当の @keitarou です。 イケメンスタジオという謎の組織でWEBエンジニアをしております。 最近はNode.jsを使った大規模分散アプリケーションみたいなものを作ってます。 今回のCYBIRDエンジニア Advent Calendarの仕切り役みたいなのもやっています。みんな協力してくれるいい会社だなぁと 1日目は(@gotyoooo)さんの最近のCYBIRDゲームインフラ環境についてでした。うちのインフラエンジニアは超優秀だと思います。転職希望の方はご連絡ください。 はじめに ES6, Promise, Generatorなどの登場によってJavaScriptの非同期処理の実行パターンのバリエーションが一気に増えた気がします。 今回は今現在、どういった手法が存在するのか、どういうメリット・デ
Promiseについて - JS.next
概要 Promiseとは非同期処理を上手く扱う為のAPIであり、パターンである。 非同期の処理の完了後に続けて処理を行いたいとき、よくコールバックパターンが使われるが、処理が連続するとコールバック地獄と言われる分かりづらいソースコードになってしまう。 また、複数の非同期処理が完了した時に処理を行うなど、コールバックパターンでは難しい事をスマートにできるのがこのPromiseである。 今まではDOMの方でDOM Promiseとして仕様策定が進められていたり、ライブラリのDeferredが有名だったが、ES2015標準に入ることになり、V8に実装された。 実装されたメソッド Promise.resolve(x) Promise.reject(x) Promise.all( [p1, p2, p3, ......] ) Promise.race( [p1, p2, p3, ......] )
Promiseで簡単！JavaScript非同期処理入門【後編】
前回に引き続き、ECMAScript 2015（ECMAScript 6）で新たに追加されたPromiseについて、その概要を全2回に渡って紹介します。今回は後編です。 前回のおさらい 前回は、こんなふうにPromiseを使うという例を紹介しました。それは、以下のようにAjaxでAPIにアクセスする例でした。 var fetchSomething1 = function() { return new Promise(function(resolve, reject) { // API1にアクセス doAjaxStuff(someOptions1, { success: function(data) { // 成功した場合 resolve(); }, fail: function() { // 何かしらエラーが発生した場合 reject({ message: 'APIにアクセスできませんでし
Promiseで簡単！JavaScript非同期処理入門【前編】
ECMAScript 2015（ECMAScript 6）で新たに追加されたPromiseについて、その概要を全2回に渡って紹介します。 ひとつずつ処理されるJavaScript まず、Promiseについて解説する前に、基礎的なことではありますが、JavaScriptのコードがどのようにJavaScriptエンジンに処理されるかについて、軽く解説しておきましょう。例えば以下の様なコードがあったとします。 var result1 = 1 + 2; // 3 var result2 = result1 + 100; // 103 /* functionらを準備 */ var doSomething1 = function() { document.getElementById('price').value = result2; }; var doSomething2 = function()
[Javascript] Promise/A+仕様を、チュートリアル形式で詳しく解説します - YoheiM .NET
こんにちは、@yoheiMuneです。 JavaScriptの実装において、「Promise」を聞いたことがある方も多いのではないでしょうか。 今回は、JavaScriptにおけるPromise/A+を深く学ぶことができる記事を翻訳しました。その内容を紹介したいと思います。 Special Thanks to https://flic.kr/p/b5bNqv 翻訳について 本記事は、Matt GreerのJavaScript Promises ... In Wicked Detailの翻訳記事です。翻訳するにあたり、ご本人から許可を頂いています。 本記事では、JavaScriptにおけるPromiseの仕様がどっぷりと解説されていますので、お時間を割いて読んで頂く価値があると思います！ それでは、始まりますー！！ はじめに 私はJavaScriptを使った開発において、長らくPromise
![[Javascript] Promise/A+仕様を、チュートリアル形式で詳しく解説します - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/6268195bcac7935caf735993226dda0f63b569f1/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F326.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
