ユーティリティパッケージ＠JavaScript¶
はじめに¶
本サイトにつきまして、以下をご認識のほど宜しくお願いいたします。
01. axios¶
axiosとは¶
JavaScript Promiseを使用したHTTPクライアントパッケージである。
axios api¶
HTTPリクエストを送信する。
＊実装例＊
非同期処理としてGETでリクエストを送信する。
// axiosオブジェクトのメソッドはPromiseオブジェクトを返却する。
const asyncFunc = async () => {
axios.get("https://example.com").then((response) => {
console.log(response.data);
});
};
デフォルト設定¶
import axios from "axios";
axios.defaults.baseURL = "https://api.example.com";
axios.defaults.headers.common["Authorization"] = AUTH_TOKEN;
axios.defaults.headers.post["Content-Type"] = "application/json";
リクエスト設定¶
▼ data¶
＊実装例＊
import axios from "axios";
const asyncFunc = async () => {
axios
.get("https://example.com", {
data: {
id: "1",
},
})
.then((response) => {
console.log(response.data);
});
};
▼ headers¶
＊実装例＊
import axios from "axios";
const asyncFunc = async () => {
axios
.get("https://example.com", {
headers: {
"Content-Type": "application/json",
},
})
.then((response) => {
console.log(response.data);
});
};
▼ httpsAgent¶
httpsパッケージを使用して、axiosパッケージを拡張する。
＊実装例＊
クライアント証明書を使用して、HTTPSリクエストを送信する。
import axios from "axios";
import https from 'https';
const asyncFunc = async () => {
axios
.get("https://example.com", {
headers: {
"Content-Type": "application/json",
},
httpAgent: new https.Agent({
cert: "<クライアント証明書のファイル>",
key: "<クライアント証明書とペアになる秘密鍵のファイル>",
rejectUnauthorized: false,
keepAlive: true
});
})
.then((response) => {
console.log(response.data);
});
};
▼ withCredential¶
Cookieヘッダーをリクエストに設定する。
＊実装例＊
import axios from "axios";
const asyncFunc = async () => {
axios
.get("https://example.com", {
headers: {
"Content-Type": "application/json",
},
withCredentials: true,
})
.then((response) => {
console.log(response.data);
});
};
▼ xsrfCookieName¶
＊実装例＊
import axios from "axios";
const asyncFunc = async () => {
axios
.get("https://example.com", {
headers: {
"Content-Type": "application/json",
},
// CSRFトークンのためのヘッダーを設定する
xsrfCookieName: "XSRF-TOKEN",
})
.then((response) => {
console.log(response.data);
});
};
レスポンスのJSON構造¶
▼ レスポンスの出力¶
import axios from "axios";
axios.get("/user/12345").then(function (response) {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});
▼ data¶
{
"data": {}
}
▼ status¶
{
"status": 200
}
▼ statusText¶
{
"statusText": "OK"
}
▼ headers¶
{
"headers": {}
}
▼ config¶
{
"config": {}
}
▼ request¶
{
"request": {}
}
01-02. axios-retry¶
axios-retryとは¶
axiosパッケージによる非同期処理をリトライする。
import axios from "axios";
import axiosRetry from "axios-retry";
// axiosオブジェクトをあらかじめ渡しておく
axiosRetry(axios, {
retries: 1,
retryCondition: () => true,
retryDelay: function (retryCount, error) {
return 2;
},
});
// axiosでリクエストを非同期処理する
const response = await axios.get("http://example.com");
console.log(response.data);
02. Nodemon¶
Nodemonとは¶
JavaScriptのソースコードに変更があれば、Node.js上のプロセスを再起動する。
03. ts-node¶
ts-nodeとは¶
Node.js上で、TypeScriptをJavaScriptにコンパイルせずにそのまま実行する。
04. typescript-call-graph¶
TypeScriptのコールグラフを作成する。
ブラウザ上で確認できる。
tsxファイルは解析できない。
$ npm install -g typescript-call-graph
$ tcg app/**/*
╭───────────────────────────╮
│ Graph visible @ │
│ http://localhost:3000 │
│ Ctrl + C to quit │
╰───────────────────────────╯