こんにちは。名無しのnです。
今日は名無しのnのフェッチ入門講座を開いていきます（一部ai)
フェッチAPIを使用すると、JavaScriptで簡単にネットワーク通信が可能です。例えば、ウェブからデータを取得したり、サーバーに情報を送信したりするのに役立ちます。フェッチAPIはPromiseベースで動作し、非同期処理を簡単に実現できます。
この講座では、フェッチAPIの基本的な使い方から応用的なテクニックまでを紹介します。実際の例を使って理解を深めていきましょう。
コード
以下は、基本的なフェッチAPIの使い方の例です。
基本的なフェッチの使い方
f-g.js
// URLからデータを取得する基本的な例
fetch('uri')
.then(response => {
if (!response.ok) {
throw new Error('ネットワークエラー: ' + response.status);
}
return response.json(); // レスポンスをJSONとして取得
})
.then(data => {
console.log(data); // 取得したデータを表示
})
.catch(error => {
console.error('エラーが発生しました:', error);
});
POSTリクエストの例
f-p.js
// サーバーにデータを送信するPOSTリクエスト
fetch('', {
method: 'POST', // リクエストの種類
headers: {
'Content-Type': 'application/json' // JSONデータを送信する
},
body: JSON.stringify({ // 送信するデータ
title: 'フェッチAPI入門',
body: 'この記事はフェッチAPIの使い方を学ぶための例です。',
userId: 1
})
})
.then(response => {
if (!response.ok) {
throw new Error('ネットワークエラー: ' + response.status);
}
return response.json(); // レスポンスをJSONとして取得
})
.then(data => {
console.log('作成されたデータ:', data);
})
.catch(error => {
console.error('エラーが発生しました:', error);
});
注意CORS
フェッチAPIを使用する際に注意が必要な点として、CORS（Cross-Origin Resource Sharing）制限があります。CORSは、ブラウザが異なるドメイン間でのリクエストを制限する仕組みです。この制限により、アクセスしようとするリソースがCORSを許可していない場合、フェッチAPIを使用してデータを取得できないことがあります。
たとえば、次のようなエラーが表示されることがあります：
Access to fetch at 'https://example.com/api' from origin 'https://yourdomain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
この問題を解決するには、以下のような方法を検討できます：
サーバー側でCORSを許可する設定を追加する。
プロキシサーバーを利用して、CORS制限を回避する。
必要に応じてmode: 'no-cors'オプションを使用する（ただし制限された操作しかできません）。
CORSの制限について理解し、適切な対応を行うことで、安全かつ効率的にフェッチAPIを活用することができます！
これについては,べつのきじで詳しく説明します！
まとめ
まーフェッチはデータを送信＆getするものです。
ご意見や質問があればコメント欄で教えてください！
また次回！