【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.
デフォルトでは、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で検証後追記します。
参考
axios
github.com