Bagaimana untuk memanggil antara muka dengan javascript

JavaScript ialah bahasa pengaturcaraan yang sangat berkuasa yang boleh memanjangkan fungsinya dengan memanggil API dan perkhidmatan web. Dalam artikel ini, kita akan menyelami cara memanggil antara muka menggunakan JavaScript.

1. Konsep antara muka

Antaramuka ialah saluran komunikasi antara sistem perisian yang berbeza, juga dipanggil API (Application Programming Interface). Melalui API, pengaturcara malah boleh mendayakan komunikasi antara bahasa pengaturcaraan yang berbeza. Jadi, jika kita ingin menggunakan JavaScript untuk memanggil antara muka, kita perlu memahami konsep asas antara muka.

2. Kaedah panggilan

JavaScript boleh memanggil API dalam pelbagai cara. Kaedah yang paling biasa digunakan ialah AJAX (Asynchronous JavaScript and XML) dan Fetch API. API Ambil ialah API baharu terbina dalam penyemak imbas moden yang boleh menghantar permintaan HTTP ke bahagian pelayan dan menerima respons.

3. Fetch API

Fetch API ialah API berasaskan Promise, jadi ia sangat sesuai untuk pelaksanaan dalam persekitaran tak segerak. Menggunakan API Ambil, anda boleh menghantar permintaan HTTP dan memproses hasil respons menggunakan fungsi menyelesaikan dan menolak. Contohnya:

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

Kod di atas menghantar permintaan GET ke https://api.example.com/data dan kemudian menghuraikan respons JSON dan mengeluarkannya ke konsol penyemak imbas. Jika permintaan berjaya, fungsi panggil balik kemudian akan dicetuskan jika ralat berlaku, fungsi panggil balik tangkapan akan dicetuskan.

4. AJAX

AJAX ialah teknologi yang berinteraksi dengan sistem pelayan bahagian belakang dan halaman web bahagian hadapan Ia boleh mencapai kemas kini tak segerak tanpa perlu mengemas kini data selepas halaman web dimuatkan sepenuhnya. Teknologi ini adalah berdasarkan objek XMLHttpRequest, yang berinteraksi dengan pelayan dengan menghantar permintaan HTTP, menerima data daripada pelayan dan menggunakan JavaScript untuk mengemas kini kandungan halaman web tanpa memuat semula keseluruhan halaman. Contohnya:

const xhr = new XMLHttpRequest();
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.error(xhr.statusText);
  }
};
xhr.open('GET', 'https://api.example.com/data');
xhr.send();

Kod di atas mencipta objek XMLHttpRequest, menghantar permintaan GET ke https://api.example.com/data dan mengembalikan respons kepada konsol penyemak imbas. Jika permintaan berjaya, output teks respons akan dijawab jika permintaan gagal, output teks status akan dijawab.

5. Panggilan antara muka asas

Seterusnya, kami akan menggunakan JavaScript untuk memanggil sampel API.

fetch('https://swapi.dev/api/people/1/')
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error(err));

Kod di atas memanggil https://swapi.dev/api/people/1/, yang mengembalikan maklumat tentang watak dalam "Star Wars". Jika respons berjaya, fungsi panggil balik akan dicetuskan, respons JSON akan dihuraikan dan dikeluarkan ke konsol penyemak imbas.

6. Keizinan API

Sesetengah API memerlukan kebenaran untuk mengakses. Sila pastikan anda mendapatkan kebenaran penuh sebelum menghubungi API. Sebagai contoh, banyak API menggunakan rangka kerja pengesahan OAuth 2.0 untuk melindungi sumber mereka. OAuth 2.0 ialah standard terbuka yang popular untuk mengakses API yang dilindungi, yang membolehkan pengguna membenarkan aplikasi dan mengakses sumber yang diperlukan. OAuth 2.0 membenarkan empat proses kebenaran biasa: proses kod kebenaran, proses tersirat, proses kelayakan kata laluan dan proses kelayakan pelanggan.

7. Ringkasan

Dalam artikel ini, kami melihat secara mendalam tentang cara menggunakan JavaScript untuk memanggil API. Kami memperkenalkan dua kaedah Fetch API dan AJAX, dan menyediakan contoh panggilan antara muka asas. Antara muka ialah bahagian penting dalam pembangunan web moden, jadi memahami cara menggunakan JavaScript untuk memanggil antara muka akan membantu anda membangunkan aplikasi web yang lebih berkuasa. Pada masa yang sama, ingat untuk mendapatkan kebenaran yang mencukupi sebelum menggunakan API.

Atas ialah kandungan terperinci Bagaimana untuk memanggil antara muka dengan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!