非同期HTTP通信タイプ（ajax、fetch、axios）

プロジェクトを実行するには、クライアントとサーバの間でデータ交換が必要です.
このため、HTTP通信を使用します.
HTTP通信のためにJSで使用されているAjax、Axios、fetchについて解説します

Ajax (Asynchronous JavaScript And XML)

Ajaxは、高速で動作する動的Webページを作成するための開発方法です.
Webページ全体を再ロードする必要がなく、Webページの一部を更新するだけです.


XMLHttpRequestオブジェクト
Ajaxの最もコアなコンポーネントはXMLHttpRequestオブジェクトです.
Ajaxでは、XMLHttpRequestオブジェクトを使用してWebブラウザでサーバとデータを交換します.
callback地獄が現れる可能性があります.

var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { // 요청에 대한 콜백 
  if (xhr.readyState === xhr.DONE) { // 요청이 완료되면 
    if (xhr.status === 200 || xhr.status === 201) { console.log(xhr.responseText); } else { console.error(xhr.responseText); } } }; xhr.open('GET', 'https://~~URL'); // 메소드와 주소 설정 xhr.send(); // 요청 전송

JQuery Ajax

JクエリやAjaxを用いた開発を容易にするために,あらかじめ各種機能を含む開発環境をAjaxフレームワークと呼ぶ.
その中でも、現在最も広く使われているAjaxフレームワークがjQueryです.
XMLHttpRequestを使用する場合、不便と互換性のため、jQueryではAjaxを使用することが主流となっています.
jQueryを使用するには、cdnをインポートするか、APIファイルを直接ダウンロードする必要があります.

$.ajax({
    url: "/examples/media/request_ajax.php", // 클라이언트가 요청을 보낼 서버의 URL 주소
    data: { name: "홍길동" },                // HTTP 요청과 함께 서버로 보낼 데이터
    type: "GET",                             // HTTP 요청 방식(GET, POST)
    dataType: "json"                         // 서버에서 보내줄 데이터의 타입
})

callback地獄が現れる可能性があります.

$.ajax({
  url: "~~",
  success: function(data) {
    const result = JSON.parse(data);
    $.ajax({
        url: `~~~`
        success: function(data2){
            const result2 = JSON.parse(data2);
            $.ajax({
                url: `~~`
                success: function(data3){
                    ......
                }
            })
        }
    })
  },
}) 

fetch API

内蔵ライブラリなので、importは不要です.
XMLHttpRequest代替はfetch API->非同期httpリクエストの書き込みを容易にします.
fetch APIはPromiseベースです.->コペルは地獄を脱出した
これはReact Nativeのような頻繁な更新にも適用される.
デフォルトの応答結果は、応答オブジェクト->jsonまたはtextに変換する必要がある処理プロセスです.
古いブラウザではサポートされていません.
ネットワーク障害が発生した場合は、待機し続けます.
APIリクエストをキャンセルできません.

fetch('주소', 설정객체).then(콜백).catch(콜백);
fetch(url, { headers: { "Content-Type": "application/json", }, });

Axios

AxiosはブラウザNodejs向けPromise APIを使用したHTTP非同期通信ライブラリ
AxiosもPromiseの基礎です.
クロスブラウザベースで、優れたブラウザ互換性を備えています.
JSONデータフォーマットに自動変換します.
リクエストをキャンセルし、タイムアウトを設定できます.
fetchには存在しない機能がもっとあります.
主にReactに使用されます.
XSRFハッカー技術は比較的安全です.
ライブラリをインストールする必要があります.

const axios = require('axios')
// ID로 사용자 요청 axios
.get('url~~')
// 응답(성공)
.then(function(response) { console.log(response) })
// 응답(실패)
.catch(function(error) { console.log(error) })
// 응답(항상 실행)
.then(function() { // ... })

axiosfetchリクエストオブジェクトにurlがあります.リクエストオブジェクトにurlはありません.サードパーティ製ライブラリに設定する必要があるモダンブラウザバージョンなので、設定する必要はありません.XSRF保護を提供します.特に保護はありません.データ属性を使用します.bodyプロパティを使用します.データにはobjectが含まれます.bodyは文字列化されています.statusは200、statusTextは「OK」で成功しました.応答オブジェクトにokプロパティが含まれている場合は、成功します.JSONデータフォーマットを自動変換します.json()メソッドを使用する必要があります.リクエストをキャンセルしたり、一時停止したりできます.機能は存在しませんHTTPリクエストをブロックできますデフォルトではダウンロードの進行状況に対する基本的なサポートは提供されませんChrome 42+、Firefox 39+、Edge 14+、and Safari 10.1+またはそれ以上のバージョンをサポートします
コメントサイト
https://www.geeksforgeeks.org/difference-between-fetch-and-axios-js-for-making-http-requests/
https://www.zerocho.com/category/HTML&DOM/post/595b4bc97cafe885540c0c1c
https://kyun2da.dev/%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC/axios-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC/