Kemahiran pembangunan Vue3+TS+Vite: cara berinteraksi dengan API bahagian belakang

Kemahiran pembangunan Vue3+TS+Vite: Cara berinteraksi dengan API bahagian belakang

Pengenalan:
Dalam pembangunan aplikasi web, interaksi data antara bahagian hadapan dan bahagian belakang adalah pautan yang sangat penting. Sebagai rangka kerja bahagian hadapan yang popular, Vue3 mempunyai banyak cara untuk berinteraksi dengan API bahagian belakang. Artikel ini akan memperkenalkan cara menggunakan persekitaran pembangunan Vue3 + TypeScript + Vite untuk berinteraksi dengan API bahagian belakang dan mendalami pemahaman melalui contoh kod.

1. Gunakan Axios untuk menghantar permintaan
Axios ialah perpustakaan permintaan HTTP yang popular yang menyokong penggunaan dalam pelayar dan persekitaran Node.js. Mula-mula kita perlu memasang Axios dalam projek dan memperkenalkannya di mana perlu.

Kod contoh:

import axios from 'axios';

export function fetchUserData(userId: number) {
  return axios.get(`/api/user/${userId}`);
}

Dalam contoh ini, kami mentakrifkan fungsi fetchUserData yang menerima parameter userId dan menghantar permintaan GET ke /api/user/{userId}laluan API bahagian belakang menggunakan Axios. Axios akan mengembalikan Janji, dan kami boleh menggunakan kaedah itu untuk memproses data yang dikembalikan.

2 Gunakan API Ambil untuk menghantar permintaan
Selain Axios, kami juga boleh menggunakan API Ambil asli JavaScript untuk menghantar permintaan. API Ambil ialah alternatif moden kepada perpustakaan permintaan HTTP XMLHttpRequest, yang menyokong penggunaan dalam penyemak imbas.

Kod sampel:

export function fetchUserData(userId: number) {
  return fetch(`/api/user/${userId}`).then(res => res.json());
}

Dalam contoh ini, kami menggunakan API Ambil untuk menghantar permintaan GET dan memproses data yang dikembalikan melalui kaedah itu. Perlu diingatkan bahawa API Ambil mengembalikan Janji, dan kita perlu menggunakan kaedah json untuk menghuraikan data yang dikembalikan.

3. Hasil permintaan pemprosesan
Secara umumnya, data yang dikembalikan oleh API bahagian belakang mungkin mempunyai dua situasi: kejayaan dan kegagalan. Kami perlu menentukan sama ada permintaan itu berjaya berdasarkan kod status yang dikembalikan dan memproses hasil yang berbeza.

Kod sampel:

export function fetchUserData(userId: number) {
  return axios.get(`/api/user/${userId}`).then(res => {
    if (res.status === 200) {
      // 请求成功
      return res.data;
    } else {
      // 请求失败
      throw new Error(res.statusText);
    }
  });
}

Dalam contoh ini, kami menggunakan Axios untuk menghantar permintaan GET dan menilai kod status yang dikembalikan. Jika kod status ialah 200, ini bermakna permintaan itu berjaya, dan kami boleh mendapatkan data yang dikembalikan melalui res.data. Jika kod status bukan 200, ini bermakna permintaan gagal dan kita boleh membuang ralat melalui pernyataan lontaran.

4. Gunakan asynchronous/wait untuk memproses permintaan
Selain menggunakan kaedah kemudian untuk memproses Promise, kami juga boleh menggunakan sintaks asynchronous/wait yang diperkenalkan dalam ES2017 untuk memproses permintaan.

Kod sampel:

export async function fetchUserData(userId: number) {
  try {
    const res = await axios.get(`/api/user/${userId}`);
    if (res.status === 200) {
      return res.data;
    } else {
      throw new Error(res.statusText);
    }
  } catch (error) {
    console.error(error);
  }
}

Dalam contoh ini, kami menggunakan sintaks tak segerak/menunggu untuk mengendalikan permintaan tak segerak. Dengan menambahkan kata kunci async di hadapan fungsi, kita boleh menggunakan await dalam fungsi untuk menunggu hasil Janji. Dalam pernyataan cuba-tangkap, kita boleh menggunakan await untuk menunggu permintaan GET Axios dan memproses hasil yang dikembalikan dengan cara yang sama.

Kesimpulan:
Artikel ini memperkenalkan cara menggunakan persekitaran pembangunan Vue3 + TypeScript + Vite untuk berinteraksi dengan API bahagian belakang dan memperdalam pemahaman melalui contoh kod. Kami boleh menggunakan Axios atau Fetch API untuk menghantar permintaan dan memproses keputusan permintaan berdasarkan kod status yang dikembalikan. Saya harap artikel ini akan membantu semua orang dalam berinteraksi dengan API bahagian belakang dalam pembangunan Vue3.

Atas ialah kandungan terperinci Kemahiran pembangunan Vue3+TS+Vite: cara berinteraksi dengan API bahagian belakang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!