一般社団法人 全国個人事業主支援協会

COLUMN コラム

1. XMLHttpRequestオブジェクトを使用する方法:

XMLHttpRequestは、古い方法ですが、Web APIを叩く基本的な方法です。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200)
console.log(JSON.parse(xhr.responseText));
}
xhr.send();

2. Fetch APIを使用する方法:

Fetch APIは、XMLHttpRequestよりも新しく、PromiseベースのAPIで、より簡潔にWeb APIにアクセスできます。

fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

3. Axiosライブラリを使用する方法:

Axiosは、PromiseベースのHTTPクライアントライブラリで、Fetch APIよりも機能が豊富です。

npm install axios
const axios = require('axios');
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error:', error);
});

これらの方法の中で、Fetch APIやAxiosの利用が現代のJavaScript開発においては推奨されており、特にAxiosはエラーハンドリングやリクエストとレスポンスの変換など、高度な機能を提供しています。

The following two tabs change content below.

石原 織絵

この記事をシェアする

  • Twitterでシェア
  • Facebookでシェア
  • LINEでシェア