Pernahkah anda mencuba semua panggilan API dalam JavaScript? Berikut adalah ays untuk melakukannya

Panggilan API ialah bahagian penting dalam pembangunan web moden. JavaScript menawarkan beberapa cara untuk menyelesaikan tugas ini, masing-masing mempunyai kelebihan dan kekurangannya sendiri. Artikel ini akan memperkenalkan anda kepada empat kaedah utama untuk membuat panggilan API dalam JavaScript yang boleh anda gunakan dalam projek anda.

XMLHttpRequest (XHR)

XMLHttpRequest (XHR) ialah cara tradisional untuk memanggil API, disokong dalam semua versi penyemak imbas. Kaedah ini boleh dipercayai dan digunakan secara meluas, walaupun sintaksnya kadangkala lebih sukar untuk dibaca dan diselenggara.

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(JSON.parse(xhr.responseText)); // Parse and log the response data
        } else {
            console.error('Error:', xhr.statusText); // Log any errors
        }
    }
};
xhr.send();

---

Ambil API

Ambil API ialah cara yang lebih moden dan lebih mudah untuk membuat panggilan API, berdasarkan janji. Ia menyokong operasi tak segerak dan mudah dilanjutkan menggunakan tak segerak dan menunggu.

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

Menggunakan tak segerak dan menunggu.

async function fetchData() {
    try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        console.log(data); // Log the response data
    } catch (error) {
        console.error('Error:', error); // Log any errors
    }
}
fetchData();

---

Axios

Axios ialah perpustakaan popular untuk permintaan HTTP yang menyediakan antara muka yang mudah dan konsisten untuk membuat panggilan API. Ia perlu dipasang terlebih dahulu menggunakan npm atau benang.
npm pasang axios
atau
benang tambah aksios

Kemudian anda boleh menggunakan Axios untuk membuat panggilan API:

const axios = require('axios');

axios.get("https://api.example.com/data")
    .then(response => {
        console.log(response.data); // Log the response data
    })
    .catch(error => {
        console.error('Error:', error); // Log any errors
    });

Menggunakan tak segerak dan menunggu:

async function fetchData() {
    try {
        const response = await axios.get("https://api.example.com/data");
        console.log(response.data); // Log the response data
    } catch (error) {
        console.error('Error:', error); // Log any errors
    }
}
fetchData();

---

jQuery AJAX

jQuery AJAX ialah kaedah untuk membuat panggilan API menggunakan perpustakaan jQuery. Walaupun jQuery kurang digunakan hari ini, ia masih muncul dalam projek lama.

<!-- Include jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
    $.ajax({
        url: "https://api.example.com/data",
        method: "GET",
        success: function(data) {
            console.log(data); // Log the response data
        },
        error: function(error) {
            console.error('Error:', error); // Log any errors
        }
    });
});
</script>

---

Sumber foto:
RAKOZY, Greg. Buku reka bentuk laman web. dalam talian. Dalam: Unsplash. 2016. Tersedia daripada: https://unsplash.com/photos/html-css-book-vw3Ahg4x1tY. [cit. 2024-07-16].

Atas ialah kandungan terperinci Pernahkah anda mencuba semua panggilan API dalam JavaScript? Berikut adalah ays untuk melakukannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!