1 - 40 件 / 47件
Intro Fetch API の実装が広まり、IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。 どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まり この名前は非常に長いため、通常 XHR と略される。 この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。 したがって、Web API の中でもかなり異質な命名である XHR が、XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、Microsoft の命名規則に「
最近の流れを見ていての感想文なので、ideaとして投稿します。筆者のバックグラウンドとしては、Remixの商業記事を書いたり、App Routerの商業記事を書いたりしている人です。 さて、筆者は2022年の秋から、社内システムではありますがRemixをプロダクション運用しています。また、Next.jsのApp Routerについても、パラダイムとしてはRemixにインスパイアされた部分が多い[1]おかげで、順調にキャッチアップできています。 RemixとApp Routerは、ルーティングとデータフェッチを高度に統合しており、Progressively Enhanced SPA(PESPA)と呼ばれることもあるそうです。PESPAについては、次の記事が話題になりましたね。 このPESPAであるRemixを実運用する中で、フレームワークの手触りが近年触ってきたものと大きく違っている点があっ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2022年4月、Deno に以下のバグが報告されました。 fetch API を使って 300KB ぐらいあるファイルをアップロードすると、一定確率でアップロードされたファイルが壊れるというバグの報告です。 報告者によれば、1.20.6 まではバグは発生しておらず、1.21.0 から発生するようになったという事です。1.20.6 の次のリリースが 1.21.0 なので、パッチバージョン1個分まで、バグの発生時期が特定されている状態です。 fetch 周りは自分はほぼ実装していないので「担当範囲ではない」感覚だったので、普通にスルーしてい
いまどきのWebアプリにおいては、ファイルのダウンロード機能が必要な場面が多々あります。例えば、バックエンドが生成したCSVデータをファイルとしてダウンロードさせる「CSVダウンロード」機能などです。 今回はAPI[1]から得られたデータをファイルとしてダウンロードさせたい場合のフロントエンドの実装方法について考察します。 要件 今回考える要件は、前述のとおり、APIから得られたデータをファイルとしてダウンロードさせることです。具体的には、以下のような要件を考えます。 APIをGETリクエストで呼び出し、そのレスポンスをそのままファイルとしてダウンロードする フロントエンドでの何らかのアクション(ボタンクリックなど)によってダウンロードがトリガーされる 追加の要件次第でやり方は変わりますが、とりあえず以上の前提で考えます。 ベストな方法 とりあえず、筆者が考える一番ベストな方法を紹介します
const url = "https://fetch-api-normalization.deno.dev"; await fetch(url, { method: "PATCH" }); await fetch(url, { method: "patch" }); 実行すると、次のようなエラーを得るはずです。 PATCH を小文字で書いた際のエラーの一例 さて、どのような条件でこのエラーが発生するのでしょうか?これが意図されたものなのだとしたら、 GET や POST は大文字・小文字を無視してよくて PATCH は無視できない理由がなにかあるのでしょうか?以下でその理由を探ってみましょう。 いつエラーが発生するか このエラーは、 Fetch API を利用して外部の HTTP サーバーに対してリクエストを行う時に、 PATCH と書くべきところを patch と書いていると発生します。
カミナシのソフトウェアエンジニア佐藤です。カミナシレポートの開発に携わっています。 フロントエンドのエラーは「画面リロードやブラウザ再起動で復旧できる(かもしれない)」「クラッシュしてもユーザーの端末に閉じる」などの理由から、バックエンドよりは精緻に扱われない傾向があると個人的には感じています。 その一方、カミナシレポートは、ノンデスクワーカー向けの不安定なネットワーク環境で利用されることも多々あるアプリです。そのため、デジタルツールに不慣れな方のために精緻なフィードバックが必要とされる、リロードに頼ることが難しいケースがある、などの理由でエラーの扱いにも慎重になる必要があります。 本記事では、カミナシレポートのフロントエンド開発をする中で、 バックエンドの API コール時にエラーが発生する条件とその内容(型・クラス) これらエラーをハンドリングする箇所 について、把握しておきたいと感じ
Next.js のドキュメントには次のように記載されてる React will automatically cache fetch requests with the same input in a temporary cache. This is an optimization to avoid the same data being fetched more than once during a rendering pass - and is especially useful when multiple components need to fetch the same data. React が自動的に fetch request をキャッシュすると書いてある。
JavaScript (TypeScript) のコードから HTTP リクエストを送る手段として, 最近では Web 標準の一つである Fetch Standard で定義された fetch() が使われることが多いですね. await fetch("https://example.com"); リクエストヘッダーには Host を設定できない Fetch Standard では Host をはじめとして Content-Length, Cookie, Origin など, いくつかのリクエストヘッダーを設定 (JavaScript から上書き) することが禁止されています. https://fetch.spec.whatwg.org/#forbidden-request-header いずれのヘッダーも HTTP やセキュリティ上の取り決めに従うために, ページの JavaSript
ショートアンサー React 18 からのフックである、useSyncExternalStore を使えばいいようです。 ※(注記) useEffect がまったくだめだというわけではありません。 ※(注記) クライアントサイドレンダリングのみを考えています。サーバーサイドレンダリングを考慮すると違った答えになるかもしれません。 サンプルコード 次のような useData フックを作ってみます。 JSON API の GET レスポンスを返すシンプルなものです。 実験をしやすいように、リクエスト URL を変えるボタンを置いてあります。 import { useEffect, useState } from "react" export function SearchResults() { const [id, setID] = useState(1) const todo = useData(`http
最近めっきりDenoに触ってない。一言で言うと飽きてしまった。 とはいえどうなってるかくらいの情報は追っているのだが、どうも使いたいと言う気分にならない。 今自分はDenoコントリビューターではないのでいち開発者としての外から見たDenoの現状を語ってみる 最近のDenoはWeb標準に追従している 具体的には、fetch APIの実装に始まり、ブラウザに実装されているAPIの実装を頑張っている windowオブジェクトもあるし、webcryptoやWebGPUのような、ブラウザでも誰も使ったことのないようなAPIまで実装している 自分はどうもこの流れに乗れなかった この方針は現在のDenoコアチームの強い姿勢であり、最近JavaScriptの標準化団体であるTC39に参加したという だがDenoがサーバーサイドの言語である以上、ブラウザに存在する様々なブラウザ的問題を解決するための仕組みや
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
前置き この記事は リクルートエンジニアアドベントカレンダーの3日目の記事です。 Recruit Engineers Advent Calendar 2022 - Adventar ちなみにココで書いたやつを一部抜粋させていただいております(ネタ切れにより過去投稿を利用してしまっております。。。すいません。。。) www.codegrid.net fetch が Node v18 から試験的にサポートされた ブラウザでは数年前から採用されていた HTTP リクエストを行う関数の fetch が global 空間に関数として作成されました。使うだけなら特に何のフラグもいりません、その代わり使うと Experimental であることを知らせる Warnings が出ます。 // fetch.mjs const response = await fetch('https://api.gith
We’re excited to announce that Node.js 18 was released today! Highlights include the update of the V8 JavaScript engine to 10.1, global fetch enabled by default, and a core test runner module. Initially, Node.js 18 will replace Node.js 17 as our ‘Current’ release line. As per the release schedule, Node.js 18 will be the 'Current' release for the next 6 months and then promoted to Long-term Support
みなさん、フロントエンド開発時のモックサーバーは何を使っていますか?モックサーバーといっても様々なアプローチがあると思いますが、最近活用している MSW が便利だったので紹介します。MSW(Mock Service Worker)はブラウザリクエストを Service Worker がインターセプトし、任意のレスポンスを返すことが出来るライブラリです。 次の様な Express 風ハンドラーで、モックレスポンスを表現することができます。なんとこのコードがブラウザで動いてしまいます。 import { setupWorker, rest } from "msw"; const worker = setupWorker( rest.get("https://myapi.dev/csr", (req, res, ctx) => { return res( ctx.json({ title: "C
Added Added stack trace to AxiosError #4624 Add AxiosError to AxiosStatic #4654 Replaced Rollup as our build runner #4596 Added generic TS types for the exposed toFormData helper #4668 Added listen callback function #4096 Added instructions for installing using PNPM #4207 Added generic AxiosAbortSignal TS interface to avoid importing AbortController polyfill #4229 Added axios-url-template in ECOSY
はじめに 今回はSWRとTanStack Queryの比較によってそれぞれの特徴と違いを整理したいと思います。背景としてネット上にある両者の比較記事は2022年以前のものが多く、当時に比べSWR2.0がリリースされたことなどで比較の観点が変化したように感じました。改めて整理することで技術選定の参考になればと思います。 前提 今回は以下のバージョンを前提にします。(2023年08月26日時点でLatest) SWR v2.2.0 TanStack Query v4.34.0 また、私自身はTanStack Queryを業務で1年ほど扱ったことがありSWRは全く経験がない状態です。この記事はどちらが優れているかを示すためのものではなく、あくまで客観的に比較することを目的にしています。 目次 ここでは以下の3つの観点から比較を行い考察をします。 interfaceでの比較 機能面での比較 キャッシ
Fetch Upload Streaming とは Fetch Upload Streaming とは、ブラウザの JavaScript の POST リクエストで HTTP のストリーミングを行える機能です。より具体的には、Fetch API の body に ReadableStream や WritableStream のような Streams API を渡せるようになります。 const stream = new ReadableStream({}) fetch(`/send?room=${roomId}`, { method: "POST", body: stream, duplex: "half", }); かねてより Fetch API ではレスポンスを ReadableStream で取得できたのですが、反対にリクエスト時に body に ReadableStream を渡
Intro 最近 AbortSignal.any() が提案され、急速に実装が進んでいる。 すでに定義されている AbortSignal.timeout() や addEventListener() への Signal なども含め、非同期処理の中断を実装する際の API はかなり整備されてきた。 これら API のモチベーションと設計を中心にまとめる。 Abort 後のリソース解放 AbortSignal によって、非同期処理のキャンセルが可能になった。例として、Server 上での Fetch のタイムアウトの例を考えよう。 app.get("/entries", async (req, res) => { const perRequestController = new AbortController() const perRequestSignal = perRequestContr
Level up your testing skills by learning directly from me! Read more Honestly, I'd never thought I'd be writing about this, but the matter of patching globals turned out to be one of those topics that a lot of engineers seem to misunderstand. Most of us don't do monkey-patching, and even fewer stay around those implementations long enough to witness their impact. All the more reason to talk about
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Right now, when you go to copilot.github.com you're greeted with this example: async function isPositive(text) { const response = await fetch(`http://text-processing.com/api/sentiment/`, { method: 'POST', body: `text=${text}`, headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, }); const json = await response.json(); return json.label === 'pos'; } This is bad and might result in sec
Photo by Brixiv from PexelsIn my previous article, "Deep Insights Into JavaScript’s Fetch API", I discussed the basics of the Fetch API. But it’s worth acknowledging that fetch() isn’t consistently an ideal solution, and there are sometimes better alternatives for making HTTP requests. Here I’ll describe why Axios is better than fetch() in development. This is my 36th Medium article. Overview and
Impact Undici fetch() uses Math.random() to choose the boundary for a multipart/form-data request. It is known that the output of Math.random() can be predicted if several of its generated values are known. If there is a mechanism in an app that sends multipart requests to an attacker-controlled website, they can use this to leak the necessary values. Therefore, An attacker can tamper with the req
はじめに 今、Next.js 15がホットな話題ですが、そのNext.js 15で導入された、use cahceにより、これまでのNext.jsのcache戦略が大きく改良されることになりました。 また、よりシンプルかつ柔軟なcache戦略を取り入れやすくなり、大幅に開発体験が改良されることになるであろうため、use cacheについて以下の記事を参考に解説しようと思います。 Next.js 14までの課題 1. fetch()について これまでNext.jsのfetch()といえば、デフォルトでcacheされるものでした。 しかしながら、これはfetch()を使用しない場合を、十分考慮したものではありませんでした。 そのため、ローカルデータベースアクセスに対する制御は十分に提供されていないといった課題がありました。 2. fetch()以外を使用する場合、エスケープハッチが必要だった エ
2024年5月10日 追記 ありがたいことにこの記事は2024現在もたまにアクセスやいいねがあるのですが、 リクエスト先でリダイレクトが発生するときに追加で注意してほしいことがあるので以下に別記事を書きました。 また、そのうち await 使った版のこの記事も書こうと思います。 TL;DR このへん書いてあることをかいつまんだだけです URL送りつけるだけだとなぜか伝わらないことがあったので書きました Fetch の使用 | Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch Response | Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/Response Fetch API が 4xx エラーを rej
fetchとaxiosはどちらも外部リソースを取得するためのライブラリーで非同期で動くためPromise型を返します。 似ているライブラリーですが、主に4つの違いがあるのでそれぞれを解説してきます。 インストール方法 HTTPメソッド通信 JSONデータの取得方法 エラーハンドリング 1.インストール方法 fetchはブラウザの標準ライブラリーでインストールせずに使うことができます。 一方、axiosはインストールが必要です。以下のコマンドで取り込むことができます。 yarn add axios npm install axios そして、モジュールのインポートも必要です。 import axios from "axios" 2.HTTPメソッド通信 HTTPメソッド通信毎の呼び出し方がfetchとaxiosで異なります。 fetchによるPOST通信 fetchでPOST通信を行う際は第
2023年10月17日, Version 21.0.0 (Current), @RafaelGSS and @targos We're excited to announce the release of Node.js 21! Highlights include updates of the V8 JavaScript engine to 11.8, stable fetch and WebStreams, a new experimental flag to change the interpretation of ambiguous code from CommonJS to ES modules (--experimental-default-type), many updates to our test runner, and more! Node.js 21 will repl
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Node.js v17.5 introduces support for fetch() – a popular cross-platform HTTP client API that works in browsers and Web/Service Workers – as an experimental core feature. fetch() support has been a long-requested addition by many, who want to write cross-platform HTTP request code and are familiar with the fetch() API shape and call patterns. So much so that the node-fetch module exists solely to b
こんにちは!DA(データアナリティクス)事業本部 サービスソリューション部の大高です。 Next.jsと同じチームによって作成されている、データ取得のための React Hooks ライブラリとして「SWR」というライブラリがあります。 今回はこのライブラリの一番基本の部分をNext.jsのプロジェクトで試してみたいと思います。 SWRとは 公式サイトにも以下のように記載されていますが「SWR」という名前はHTTPキャッシュ無効化戦略であるstale-while-revalidateに由来しています。 "SWR" という名前は、 HTTP RFC 5861 で提唱された HTTP キャッシュ無効化戦略である stale-while-revalidate に由来しています。 SWR は、まずキャッシュからデータを返し(stale)、次にフェッチリクエストを送り(revalidate)、最後に
JavaScript は、必要に応じていつでもサーバへリクエストを送信し、新しい情報を読み込むことができます。 例えば、次のようなことができます: 注文を送信する ユーザ情報を読み込む サーバから最新の更新情報を受け取る ...など ...そしてこれらはすべてページをリロードすることなく行うことができます。 それを表す包括的な用語 "AJAX" (Asynchronous Javascript And Xml)があります。XML を使う必要はありません: この用語は昔から来ています。 ネットワークリクエストを送信し、サーバから情報を取得するための様々な方法があります。 fetch() メソッドはモダンで多目的に利用できるため、これから始めましょう。fetch は数年間進化と改善を続けています。今のところサポートはブラウザの間でとてもしっかりしています。 基本構文は次の通りです: url – アクセ
Code Generator for HTTP Requests Generate production-ready code for HTTP requests with Google Apps Script, Node.js fetch, and cURL commands.
正直、ファイルのアップロードは考慮すべきことが多すぎてあまり関わりたくないのですが、そうも行かないのが世の定めw 今回はFetchAPIを利用してサクッとファイルをアップする手法についてまとめます。 サーバ側はPHPで実装しますが、考え方は他の言語でも流用できるのではないかと思います。 基本的な原理 FetchAPI ブラウザ側 サーバ側 入力内容をチェックする ブラウザ側 ファイルが選択されているか ファイル容量 ファイル形式 サーバ側(PHP) ファイルが正常に受信できているか ファイルが送信されていない ファイル受信時にエラーが発生 何らかのアタックを受けている ファイルサイズ ファイル形式(画像ファイルか) サンプル 実行例 コード HTML JavaScript PHP その他 HTMLでファイル形式を制限する PHPでファイル容量を制限する 参考ページ 基本的な原理 Fetch
About the release Version 2.0 brings the biggest API change to the library since its inception. Alongside the new API, it includes various features, such as ReadableStream support, ESM-compatibility, and countless bug fixes. This guide will help you migrate your application to version 2.0. We highly recommend you read it from start to finish. Make sure to read the official announcement for this re
多くの開発者がAbortControllerを理解していると思っているかもしれませんが、その機能は基本的な用途をはるかに超えています。たとえば、fetchリクエストのキャンセル、イベントリスナーの管理、Reactフックとの連携などです。 本当にAbortControllerの威力を知っていますか?それでは見てみましょう。 AbortControllerを使ったfetchリクエストのキャンセル AbortControllerをfetchと一緒に使うことは、最も一般的な用途です。 以下は、AbortControllerを使ってキャンセル可能なfetchリクエストを作成する例です: fetchButton.onclick = async () => { const controller = new AbortController(); // キャンセルボタンを追加 abortButton.onc
Breaking changes Drops support for Node.js 16. Please upgrade to Node.js 18 or later to use the global Fetch API. Drops support for TypeScript < 4.7. All browser-side exports, like setupWorker, SetupWorkerApi, etc., must be imported from msw/browser now. Renames the rest object to http (rest.get -> http.get). Response resolver call signature is no longer (req, res, ctx) => res() but instead ({ req
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く