Bagaimana untuk mengambil data API dengan JS?

Terdapat tiga cara utama untuk mendapatkan data dari API menggunakan JavaScript. Pertama, gunakan fungsi FETCH yang dibina dalam penyemak imbas, yang sesuai untuk permintaan mendapatkan mudah. Perhatikan ketepatan URL, sokongan kors dan pengendalian ralat; kedua, menggabungkan async/menunggu penulisan untuk membuat logik tak segerak lebih jelas dan lebih mudah untuk dikekalkan, tetapi pertimbangkan keserasian pelayar lama; Ketiga, gunakan Perpustakaan Axios, yang mempunyai fungsi yang lebih kuat, menyokong penukaran JSON automatik, membatalkan permintaan, dan lain -lain, yang sesuai untuk projek yang kompleks. Di samping itu, masalah biasa seperti sekatan silang domain, kesilapan format JSON, kesan cache, dan lain-lain boleh diselesaikan dengan menetapkan tajuk tindak balas, mencuba/menangkap tangkapan, menambah parameter rawak, dan lain-lain. Menguasai kaedah dan teknik ini boleh mengendalikan kebanyakan senario permintaan API.

Adalah sangat biasa untuk menggunakan JavaScript untuk mendapatkan data dari API, terutamanya dalam pembangunan front-end. Kaedah teras terutamanya dilakukan melalui fetch atau menggunakan perpustakaan seperti axios . Berikut adalah beberapa kaedah praktikal dan langkah berjaga -jaga.

Gunakan Permintaan Asas

Cara yang paling asas ialah menggunakan fungsi fetch yang datang dengan penyemak imbas. Ia tidak memerlukan perpustakaan pemasangan tambahan dan boleh digunakan secara langsung dalam pelayar moden.

 Ambil ('https://api.example.com/data')
  .then (response => response.json ())
  .THEN (data => console.log (data))
  .catch (error => console.error ('ralat mengambil data:', ralat));

• Pastikan URL betul dan API membenarkan permintaan silang domain (CORS)
• Apabila memproses respons, anda perlu menggunakan .json() atau .text() untuk menukar kandungan.
• Ingat untuk menambah pengendalian ralat.catch .catch() , jika tidak, ia mungkin gagal dengan senyap

Kaedah ini sesuai untuk mendapatkan permintaan mudah. Jika ia adalah jawatan atau jenis permintaan lain, ia perlu diluluskan dalam objek konfigurasi.

Cara yang lebih mudah untuk berurusan dengan tidak segerak

Jika anda menggunakan sintaks yang lebih baru, anda boleh menulisnya bersempena dengan async/await :

 fungsi async fetchData () {
  Cuba {
    Const Response = menunggu pengambilan ('https://api.example.com/data');
    jika (! response.ok) membuang ralat baru ('Response network tidak ok');
    const data = menunggu tindak balas.json ();
    pulangan data;
  } menangkap (ralat) {
    Console.error ('Ambil Ralat:', Ralat);
  }
}

• Tulis logik berurutan lebih intuitif
• Penangkapan ralat juga lebih mudah dikendalikan secara berpusat
• Disarankan untuk menggunakan kaedah ini dalam projek terlebih dahulu

Walau bagaimanapun, sedar bahawa beberapa pelayar lama mungkin tidak menyokongnya, dan penyelesaian lain boleh dipertimbangkan jika mereka perlu bersesuaian dengan IE11.

Buat permintaan dengan Axios

axios adalah perpustakaan pihak ketiga dengan fungsi yang lebih kuat daripada fetch asli, seperti penukaran automatik JSON secara lalai, sokongan untuk pembatalan permintaan, dll.

Pasang pertama (jika menggunakan npm):

 NPM Pasang Axisos

Kemudian gunakan:

 import axios dari 'axios';

axios.get ('https://api.example.com/data')
  .then (response => console.log (response.data))
  .catch (error => {
    jika (error.response) {
      // Pelayan mengembalikan kod status, tetapi tidak 2xx
      console.log ('Status tindak balas:', error.response.status);
    } else {
      console.log ('Ralat permintaan:', error.message);
    }
  });

• Menyokong penyemak imbas dan node.js
• Menukar data tindak balas secara automatik
• Tangkap maklumat ralat dengan lebih terperinci

Jika anda berurusan dengan API dengan kerap, menggunakan axios boleh menjimatkan banyak masa.

Soalan Lazim dan Tip Debugging

• Masalah silang domain : Jika anda melihat "disekat oleh polisi CORS", ini bermakna backend tidak mempunyai set maklumat header yang sesuai, seperti Access-Control-Allow-Origin
• Format JSON Salah : Kadang -kadang API mengembalikan JSON Standard, ingat untuk membungkus JSON.parse() dengan try/catch
• Masalah caching : Beberapa penyemak imbas boleh cache mendapatkan permintaan, dan anda boleh menambah parameter rawak seperti &_=${Date.now()} selepas URL
• Lihat Permintaan Rangkaian : Gunakan Panel Rangkaian di Alat Pemaju Penyemak Imbas untuk melihat apakah permintaan itu berjaya dan kandungan apa yang dikembalikan

Pada dasarnya itu sahaja. Menguasai salah satu kaedah ini dan menyesuaikan parameter dan pengendalian ralat mengikut keperluan sebenar boleh menangani kebanyakan senario permintaan API.

Atas ialah kandungan terperinci Bagaimana untuk mengambil data API dengan JS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!