HOWTO · JavaScript
JavaScript MIME タイプ
Mime は、ファイルとその拡張子を識別するために参照されます。 クライアントとサーバーがリクエストを送信し、レスポンスを受信する際にファイルに依存する主な目的は、ファイルの仕様によってユーザーとサーバーが適切に動作できるようにするためです。
MIME (Multipurpose Internet Mail Extensions) は、ドキュメント タイプと拡張子を示し、ファイルの機能を表すメディア タイプです。
技術的には、Web ページまたは Web ブラウザーでのコンテンツの読み込み時に、複数の HTTP 要求をサーバーに送信します。 そして、リクエストの有効性に基づいて、サーバーは対応するレスポンスをクライアント (つまり私たち) に送信します。
ローカル PC には、ファイル名とその拡張子が表示されています。 ただし、ブラウザーが同じデータを処理したり、要求を介して送信したりする場合、ファイルは同じ ID を持ちません。
送信時にデフォルトの mime タイプが追加される場合や、未加工のコードを追加する必要がある場合があります。
mime タイプには、Type/SubType のような基本的な構造があります。 ここで、type は、ファイルがテキスト、画像、またはその他のファイルである場合、ファイルの特性を示します。
subtype は拡張子を持ちます。 ブラウザは、mime タイプなしでリクエストを介して送信されたファイルを処理します。
mime タイプを text/plain に設定することが多いため、この問題は解決されます。
この記事では、リクエストとレスポンスの mime タイプを視覚化する方法を検討します。 それでは、理解を深めるためにコードにジャンプしてプレビューしてみましょう。
JavaScriptの場合のMIMEタイプ
mime タイプには有効な範囲があり、エクスペリエンスを改善したいという開発者の要望に応じて頻繁に更新されます。 JavaScript の場合、デフォルトまたは最も一般的に使用される mime タイプは text/javascript です。
また、JSON およびその他の規則には、さまざまな mime タイプがあります。
ここで、以下のコードでは、URL をフェッチし、リクエストがサーバーによって受け入れられると、レスポンスを取得します。 これに関して、リクエストで送信されたドキュメントの mime タイプと、レスポンスで受信したデータの mime タイプをチェックします。
コードスニペット：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="btn()">Mime</button>
<p id="mime"></p>
<script id="sc" src="mime.js"></script>
</body>
</html>
var mime = document.getElementById('mime')
function getData() {
url = 'https://dummy.restapiexample.com/api/v1/employee/1'
params = {
headers: {'Content-Type': 'application/json'}
} fetch(url, params)
.then((response) => {
return response.text();
})
.then((data) => {mime.innerHTML = data})
}
function btn() {
getData();
}
出力：
ご覧のとおり、Mime ボタンをクリックすると、リクエストは指定された URL からデータをフェッチするようになりました。 取得するために送信されたとき、HTML は text/html として、JavaScript は text/javascript として取り込まれました。
しかし、応答を受け取ったとき、データは JSON 形式でした。 したがって、応答ヘッダーには application/json に記述されていました。 これが、JavaScript で mime タイプを表示する方法です。
また、mime-types という名前のパッケージがあり、コマンドでローカル PC にインストールできます。
npm install mime-types
その後、mime.getType を実行して、特定のドキュメントまたはファイルの詳細を表示できます。 次のリダイレクトにより、mime の ドキュメント に移動します。
