axios 1.0.0 を確認する
shingo.sasaki検索流入などで来た方に
記事化しました。スクラップの内容は中途半端なので以下記事の方を御覧ください。
shingo.sasaki長らく 0.x 系だった axios が満を持して 1.0.0 になったので主に追加機能を確認していく。
shingo.sasakiAxiosError オブジェクトにスタックトレースが追加された
エラー発生時にスタックトレースを AxiosError オブジェクトに追加する。
axios.get("/hoge").catch((e: AxiosError) => {
console.log(e.stack);
});
ただし利用されている Error.captureStackTrace は非標準機能であるため、環境によって挙動が変わることがある。
shingo.sasakiAxiosStatic 型への AxiosError フィールドの追加
型レベルの修正のみ。
import axios from "axios";
console.log(axios.AxiosError);
一応 axios 経由で AxiosError クラスを参照できるようになったというだけ。
shingo.sasaki
ビルドランナーを webpack から rollup に変更
webpack より rollup のほうがライブラリのバンドルには向いていて、結果的にミニファイ時に 2KB の軽量化に成功したらしい。
shingo.sasakiAxiosStatic 型への toFormData フィールドの追加
toFormData は 0.27 で追加された、オブジェクトを FormData 形式に変換するヘルパー関数。
これが TypeScript から参照できていなかったらしい
import axios from "axios";
const formData = axios.toFormData({
foo: "bar",
baz: 123,
qux: ["a", "b", "c"],
});
console.log(`${formData}`); // [object FormData]
サンプルコードのリファクタ
正直こんなんでも axios にコントリビュートできるのか感はある。
shingo.sasakiドキュメントに pnpm でのインストール方法を追加
これも
shingo.sasakiAbortController 使用時に、DOM Library に依存しないようにする
import axios from "axios";
axios.get("/user", { signal: {
// ここの話
}});
リクエストのキャンセルなどに使用する AbortController は、Node にも実装されているのに、 axios 上では DOM Library 上の AbortController の型を使用しいた。
そのため、以下のように tsconfig.json では DOM Library への参照が必要なってしまう。
{
"compilerOptions": {
"lib": ["DOM"]
}
}
これが修正され、標準ライブラリに依存しない型定義が追加されたため、 tsconfig.json に関係なく型を参照できるようになった。
shingo.sasakiREADME のエコシステム一覧のリンク追加
いるこれ？
shingo.sasaki追加されたインターセプタをすべて破棄するメソッドの追加
eject を一括でできるようになったみたいな。
const instance = axios.create();
instance.interceptors.request.use(() => {});
instance.interceptors.request.clear();
instance.interceptors.response.use(() => {});
instance.interceptors.response.clear();
そしてこれも型定義の追加が忘れられててTSからは使えないぞ。
shingo.sasakiPR出しといた
shingo.sasakitransformResponse のコールバックに HTTPステータスを追加
transformResponse は、レスポンス内容を書き換えるフックを追加する手段。
ここに第三引数としてステータスコードが追加された。
axios.get("https://dummyjson.com/products/1", {
transformResponse(data, headers, status) {
console.log(status); // 200
},
});
Web(xhr)で使用できるプロトコルに blob を追加
axios.get("blob://hogehoge");
意外とこれにハマったことある
shingo.sasakitoFormData へのオプション追加
toFormData 関数に formSerializer オプションを指定できるようになり、シリアライズ時のいくつかの挙動を変更できるように。
shingo.sasakiapplication/x-www-form-urlencoded への自動シリアライゼーション
README から抜粋
const data = {
x: 1,
arr: [1, 2, 3],
arr2: [1, [2], 3],
users: [{name: 'Peter', surname: 'Griffin'}, {name: 'Thomas', surname: 'Anderson'}],
};
await axios.postForm('https://postman-echo.com/post', data,
{headers: {'content-type': 'application/x-www-form-urlencoded'}}
);
{
x: '1',
'arr[]': [ '1', '2', '3' ],
'arr2[0]': '1',
'arr2[1][0]': '2',
'arr2[2]': '3',
'arr3[]': [ '1', '2', '3' ],
'users[0][name]': 'Peter',
'users[0][surname]': 'griffin',
'users[1][name]': 'Thomas',
'users[1][surname]': 'Anderson'
}
自動シリアライゼーションやシリアライゼーションのためのヘルパー関数まわりは便利ではあるけど、あとは細かい機能追加、改修レベルでそんなでかい変化じゃなかったな。
あんまり面白みもなかったので特に記事化もせずクローズ
shingo.sasaki検索流入で需要がある気配がするのでもう少し整理して記事化しようかな。
shingo.sasaki1.0.0 に至る背景についても需要あるかもしれないし調べておく。
- モダン JavaScript のプラクティスに則ったライブラリにしていきたい
- 現在挙がっているモダン機能のリクエストはすべてクローズして次期バージョンのロードマップとし、現バージョンでは安定化を優先する
要望としては ESM 対応や TypeScript 対応が多いように見える。
それに node-fetch 以外の HTTP ライブラリのアダプタ対応や自動リトライ機構なども。