프런트 엔드에서 일반 http 요청을 보내는 방법은 무엇입니까?

Question

1) 프런트 엔드에서 서버로 http requests을 전송하는 방법과 방법은 무엇이며 어떻게 달라졌습니까?

2) 나에게 명백한 유일한 사실은 form을 백엔드의 경로 처리기에 제출할 때 또는 button을 클릭하면 기본적으로 다른 모든 웹 페이지로 리디렉션된다는 것입니다 정상적인 http 요청으로.

3) 우리는 백 엔드에서 프런트 엔드와 같은 http requests을 보낼 수 있는지 궁금합니다.

const https = require("https"); 
 

 
const url = 
 
    "https://maps.googleapis.com/maps/api/geocode/json?address=Florence"; 
 

 
https.get(url, res => { 
 
    res.setEncoding("utf8"); 
 
    let body = ""; 
 
    res.on("data", data => { 
 
    body += data; 
 
    }); 
 
    res.on("end",() => { 
 
    body = JSON.parse(body); 
 
    console.log(
 
     `City: ${body.results[0].formatted_address} ` 
 
    ); 
 
    }); 
 
});

Answer 1

1. 방법 및 HTTP 전송에 대한 다른 접근 방법이 무엇인가는

   프론트 엔드 (클라이언트 측)에서

, 다양한 만들 수 있습니다 요청 서버에 대한 요청. 예
:

• 네이티브 JS와 XMLHttpRequest. 그냥 here에서 귀하의 케이스에 기본 예제를 변경합니다

  ES6 fetch 모듈

  function reqListener() { 
  console.log(this.responseText); 
  } 
  
  var oReq = new XMLHttpRequest(); 
  oReq.addEventListener("load", reqListener); 
  oReq.open("GET", "https://maps.googleapis.com/maps/api/geocode/json?address=Florence"); 
  oReq.send(); 
  

• :

  • 사용하여 약속 : 비동기 사용

    fetch('https://maps.googleapis.com/maps/api/geocode/json?address=Florence').then(res => console.log(res)).catch(e => console.log(e))` 
    

  • 을/await를, 우리는 사용합니다 IIFE :

    (() => { 
        const result = await fetch('https://maps.googleapis.com/maps/api/geocode/json?address=Florence'); 
        console.log(result); 
    })(); 
    

• 또 다른 옵션 :

  • jQuery 요청 : 그냥이 같은
    : $.get(url, function(response) { //...Handle response });

초 질문에 대해

항상 서버에 GET/POST 등의 요청을하고 있습니다. 따라서 Google의 API를 호출하거나 Stackowerflow 페이지를 방문하면 서버에 정확하게 요청을 보내고 답변을 제공합니다.
here에 대한 자세한 내용을 볼 수 있습니다.

3) 백엔드에서 http 요청을 보낼 수 있는지 궁금합니다. 프런트 엔드에서 ?

JS (전면) 솔루션은 브라우저에서 사용하는 것이 좋습니다. 왜냐하면이 경우에 사용하기 때문입니다.