วิธีที่ได้รับความนิยมมากที่สุดในการส่งคำขอ HTTP ใน JavaScript มีดังนี้

JavaScript มีโมดูลและวิธีการที่ยอดเยี่ยมในการสร้างคำขอ HTTP ที่สามารถใช้เพื่อส่งหรือรับข้อมูลจากทรัพยากรฝั่งเซิร์ฟเวอร์ ในบทความนี้เราจะมาดูวิธียอดนิยมสองสามวิธีในการสร้างคำขอ HTTP ใน JavaScript

อาแจ็กซ์

Ajax เป็นวิธีดั้งเดิมในการสร้างคำขอ HTTP แบบอะซิงโครนัส สามารถส่งข้อมูลโดยใช้วิธี HTTP POST และรับโดยใช้วิธี HTTP GET ลองมาดูและGETขอ ฉันจะใช้ JSONPlaceholder ซึ่งเป็น REST API ออนไลน์ฟรีสำหรับนักพัฒนาที่ส่งคืนข้อมูลแบบสุ่มในรูปแบบ JSON

ในการโทร HTTP ใน Ajax คุณต้องเริ่มต้นXMLHttpRequest()เมธอดใหม่ระบุปลายทาง URL และเมธอด HTTP (ในกรณีนี้คือ GET) สุดท้ายเราใช้open()วิธีผูกเมธอด HTTP และปลายทาง URL เข้าด้วยกันและเรียกใช้send()เมธอดเพื่อปิดการร้องขอ

เราบันทึกการตอบสนอง HTTP ไปยังคอนโซลโดยใช้XMLHTTPRequest.onreadystatechangeคุณสมบัติที่มีตัวจัดการเหตุการณ์ที่จะถูกเรียกเมื่อreadystatechangedเหตุการณ์เริ่มทำงาน

const Http = new XMLHttpRequest(); const url="//jsonplaceholder.typicode.com/posts"; Http.open("GET", url); Http.send(); Http.onreadystatechange = (e) => { console.log(Http.responseText) }

หากคุณดูคอนโซลเบราว์เซอร์ของคุณคอนโซลจะส่งคืนอาร์เรย์ของข้อมูลในรูปแบบ JSON แต่เราจะรู้ได้อย่างไรว่าคำขอเสร็จสมบูรณ์แล้ว? กล่าวอีกนัยหนึ่งเราจะจัดการกับการตอบสนองกับ Ajax ได้อย่างไร?

onreadystatechangeแห่งนี้มีสองวิธีreadyStateและstatusซึ่งช่วยให้เราสามารถตรวจสอบสถานะของการร้องขอของเรา

ถ้าreadyStateเท่ากับ 4 แสดงว่าการร้องขอเสร็จสิ้น readyStateแห่งนี้มีการตอบสนองที่ 5 เรียนรู้เพิ่มเติมได้ที่นี่

นอกเหนือจากการโทร Ajax โดยตรงด้วย JavaScript แล้วยังมีวิธีการอื่นที่มีประสิทธิภาพมากกว่าในการโทร HTTP เช่น$.Ajaxซึ่งเป็นวิธีการ jQuery ฉันจะพูดถึงเรื่องเหล่านี้ตอนนี้

วิธี jQuery

jQuery มีหลายวิธีในการจัดการคำขอ HTTP อย่างง่ายดาย ในการใช้วิธีการเหล่านี้คุณจะต้องรวมไลบรารี jQuery ไว้ในโปรเจ็กต์ของคุณ

$ .ajax

jQuery Ajax เป็นหนึ่งในวิธีที่ง่ายที่สุดในการโทร HTTP

เมธอด $ .ajax ใช้พารามิเตอร์หลายตัวซึ่งบางตัวจำเป็นและตัวเลือกอื่น ๆ ประกอบด้วยสองตัวเลือกการโทรกลับsuccessและerrorเพื่อจัดการกับการตอบกลับที่ได้รับ

วิธี $ .get

เมธอด $ .get ใช้เพื่อดำเนินการตามคำขอ GET ต้องใช้สองพารามิเตอร์: ปลายทางและฟังก์ชันเรียกกลับ

$ .post

$.postวิธีเป็นวิธีที่จะโพสต์ข้อมูลไปยังเซิร์ฟเวอร์อื่น ใช้พารามิเตอร์สามตัวurlได้แก่ ข้อมูลที่คุณต้องการโพสต์และฟังก์ชันเรียกกลับ

$ .getJSON

$.getJSONวิธีเดียวที่ดึงข้อมูลที่อยู่ในรูปแบบ JSON ใช้สองพารามิเตอร์: urlและฟังก์ชันเรียกกลับ

jQuery มีวิธีการเหล่านี้เพื่อขอหรือโพสต์ข้อมูลไปยังเซิร์ฟเวอร์ระยะไกล แต่คุณสามารถใส่วิธีการเหล่านี้ทั้งหมดเป็น$.ajaxวิธีเดียวได้:

ดึงข้อมูล

fetchเป็นเว็บ API ใหม่ที่มีประสิทธิภาพซึ่งช่วยให้คุณสร้างคำขอแบบอะซิงโครนัสได้ อันที่จริงfetchเป็นวิธีที่ดีที่สุดและเป็นวิธีที่ฉันชอบที่สุดในการขอ HTTP ส่งคืน "Promise" ซึ่งเป็นหนึ่งในคุณสมบัติที่ยอดเยี่ยมของ ES6หากคุณไม่คุ้นเคยกับ ES6 คุณสามารถอ่านได้ในบทความนี้ คำสัญญาช่วยให้เราจัดการคำขอแบบอะซิงโครนัสได้อย่างชาญฉลาดยิ่งขึ้น ลองมาดูวิธีการfetchทำงานในทางเทคนิค

fetchฟังก์ชั่นใช้เวลาหนึ่งพารามิเตอร์ที่จำเป็นที่: endpointURL นอกจากนี้ยังมีพารามิเตอร์ทางเลือกอื่น ๆ ดังตัวอย่างด้านล่าง:

อย่างที่คุณเห็นfetchมีข้อดีหลายประการในการสร้างคำขอ HTTP คุณสามารถเรียนรู้เพิ่มเติมได้ที่นี่ นอกจากนี้ภายในการดึงข้อมูลยังมีโมดูลและปลั๊กอินอื่น ๆ ที่ช่วยให้เราสามารถส่งและรับคำขอไปยังและจากฝั่งเซิร์ฟเวอร์เช่น axios

Axios

Axios เป็นไลบรารีโอเพ่นซอร์สสำหรับการร้องขอ HTTP และมีคุณสมบัติที่ยอดเยี่ยมมากมาย มาดูวิธีการทำงานกัน

การใช้งาน:

ขั้นแรกคุณต้องรวม Axios มีสองวิธีในการรวม Axios ในโครงการของคุณ

ขั้นแรกคุณสามารถใช้ npm:

npm install axios --save

จากนั้นคุณจะต้องนำเข้า

import axios from 'axios'

ประการที่สองคุณสามารถรวม axios โดยใช้ CDN

การร้องขอด้วย axios:

ด้วย Axios คุณสามารถใช้GETและPOSTเพื่อดึงและโพสต์ข้อมูลจากเซิร์ฟเวอร์

รับ:

axiosรับพารามิเตอร์ที่ต้องการหนึ่งพารามิเตอร์และสามารถใช้พารามิเตอร์ทางเลือกที่สองด้วย สิ่งนี้ใช้ข้อมูลบางส่วนเป็นแบบสอบถามง่ายๆ

โพสต์:

Axios ส่งคืน "Promise" หากคุณคุ้นเคยกับคำสัญญาคุณคงทราบดีว่าคำสัญญาสามารถดำเนินการตามคำขอได้หลายรายการ คุณสามารถทำสิ่งเดียวกันกับ axios และเรียกใช้คำขอหลายรายการในเวลาเดียวกัน

Axios รองรับวิธีการและตัวเลือกอื่น ๆ อีกมากมาย คุณสามารถสำรวจได้ที่นี่

Angular HttpClient

Angular has its own HTTP module that works with Angular apps. It uses the RxJS library to handle asynchronous requests and provides many options to perform the HTTP requests.

Making a call to the server using the Angular HttpClient

To make a request using the Angular HttpClient, we have to run our code inside an Angular app. So I created one. If you’re not familiar with Angular, check out my article, learn how to create your first Angular app in 20 minutes.

The first thing we need to do is to import HttpClientModule in app.module.ts

Then, we have to create a service to handle the requests. You can easily generate a service using Angular CLI.

ng g service FetchdataService

Then, we need to import HttpClient in fetchdataService.ts service and inject it inside the constructor.

And in app.component.ts import fetchdataService

//import import { FetchdataService } from './fetchdata.service';

Finally, call the service and run it.

app.component.ts:

You can check out the demo example on Stackblitz.

Wrapping Up

We’ve just covered the most popular ways to make an HTTP call request in JavaScript.

Thank you for your time. If you like it, clap up to 50, click follow, and reach out to me on Twitter.

By the way, I’ve recently worked with a strong group of software engineers for one of my mobile applications. The organization was great, and the product was delivered very quickly, much faster than other firms and freelancers I’ve worked with, and I think I can honestly recommend them for other projects out there. Shoot me an email if you want to get in touch — [email protected].