【Typescript】axiosのREADME読んでみた Part9【React】

この記事はReactでaxiosを使うために、axiosのREADMEの情報をまとめたものです。React×Typescriptのサンプルコードも載せています。

こんにちは！nomurabbitです。今回はaxiosに関する記事です。

Part9の今回はURLエンコーディングについてです。Typescriptの型の解説やサンプルコードを交えて一緒に勉強していきましょう

Using application/x-www-form-urlencoded format

By default, axios serializes JavaScript objects to JSON. To send data in the application/x-www-form-urlencoded format instead, you can use one of the following options.

github.com

デフォルトでは、axiosはJavascriptのObjectをJSONにシリアライズします。URLエンコードのフォーマットでシリアライズしたい場合には次の方法を使ってください。

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

ちなみに、TypescriptでのURLSearchParamsインターフェースはこのように定義されています。

interface URLSearchParams {
    [Symbol.iterator](): IterableIterator<[string, string]>;
    /** Returns an array of key, value pairs for every entry in the search params. */
    entries(): IterableIterator<[string, string]>;
    /** Returns a list of keys in the search params. */
    keys(): IterableIterator<string>;
    /** Returns a list of values in the search params. */
    values(): IterableIterator<string>;
}

Note that URLSearchParams is not supported by all browsers (see caniuse.com), but there is a polyfill available (make sure to polyfill the global environment).

URLSearchParams は全てのブラウザをサポートしているわけではないけれど、polyfill は有効ですとのこと。

qsライブラリ

Alternatively, you can encode data using the qs library

代替手段としてqsライブラリを使うこともできます。

const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

ES6の場合

import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

Typescriptのサンプル

import qs from 'qs';

const qsTest = () => {
  const data = { 'bar': 123 };
  console.log(qs.stringify(data));
}

Typescriptの実行結果

※querystring モジュール、urlモジュールおよびform-dataライブラリについてはtypescriptで検証後追記します。

まとめ

というわけで今回はURLエンコーディングについて勉強してきましたが、axiosのREADME読んでみた Part9いかがでしたでしょうか？

次回もぜひご覧ください。では！

参考

axios
github.com