Bagaimanakah saya menggunakan API Uni.request Uni-App untuk membuat permintaan HTTP?

Cara Menggunakan API Uni.Request untuk Membuat Permintaan HTTP

API uni.request dalam Uni-App adalah alat serba boleh untuk membuat permintaan HTTP ke pelbagai pelayan. Ia adalah pembungkus di sekitar objek XMLHTTPREQUEST asli, memberikan pendekatan yang lebih mudah dan silang platform. Berikut adalah pecahan terperinci cara menggunakannya:

Penggunaan Asas:

Fungsi teras adalah uni.request() , yang mengambil objek pilihan sebagai hujahnya. Objek ini menentukan butiran permintaan. Permintaan mendapatkan mudah mungkin kelihatan seperti ini:

 <code class="javascript">uni.request({ url: 'https://api.example.com/data', method: 'GET', success: (res) => { console.log('Request successful:', res.data); }, fail: (err) => { console.error('Request failed:', err); }, complete: (res) => { console.log('Request completed:', res); } });</code>

Kod ini menghantar permintaan GET ke https://api.example.com/data . Panggilan balik success mengendalikan tindak balas yang berjaya, fail mengendalikan kesilapan, dan melaksanakan complete tanpa mengira kejayaan atau kegagalan. res.data mengandungi data tindak balas.

Pilihan Lanjutan:

uni.request menyokong pelbagai pilihan untuk menyesuaikan permintaan anda:

• method : Menentukan kaedah HTTP (GET, POST, PUT, DELETE, dll.). Lalai untuk mendapatkan.
• data : Data untuk dihantar dengan permintaan (biasanya untuk pos, letakkan, dll.). Ini boleh menjadi objek atau rentetan.
• header : Objek yang mengandungi tajuk HTTP (contohnya, Content-Type , Authorization ).
• dataType : Menentukan jenis data yang dijangkakan tindak balas ('JSON' adalah perkara biasa).
• responseType : Menentukan jenis tindak balas yang diharapkan ('teks', 'arraybuffer', dan lain -lain).
• timeout : Menetapkan masa tamat untuk permintaan dalam milisaat.

Contoh permintaan pos:

 <code class="javascript">uni.request({ url: 'https://api.example.com/submit', method: 'POST', header: { 'Content-Type': 'application/json' }, data: { name: 'John Doe', email: 'john.doe@example.com' }, success: (res) => { // ... }, fail: (err) => { // ... } });</code>

Apakah teknik pengendalian ralat biasa apabila menggunakan uni.request dalam uni-app?

Pengendalian ralat yang teguh adalah penting untuk pengalaman pengguna yang lancar. Berikut adalah teknik biasa untuk mengendalikan kesilapan dengan uni.request :

• fail panggilan balik: Panggilan balik fail adalah mekanisme utama. Ia menerima objek ralat yang mengandungi maklumat mengenai kegagalan (contohnya, kod status, mesej ralat). Gunakan ini untuk memberikan mesej ralat bermaklumat kepada pengguna atau log ralat untuk debugging.
• Pemeriksaan Kod Status: Periksa kod status HTTP dalam panggilan balik fail (atau bahkan complete untuk pengendalian yang lebih komprehensif). Kod status yang berbeza menunjukkan isu yang berbeza (404 tidak dijumpai, 500 ralat pelayan dalaman, dan lain -lain). Mengendalikan kes -kes ini secara berbeza, memberikan maklum balas pengguna yang disesuaikan.
• Pengendalian Ralat Rangkaian: Mengesan isu sambungan rangkaian. uni.request mungkin gagal kerana kekurangan sambungan internet. Anda boleh menggunakan uni.getSystemInfoSync().networkType untuk memeriksa status rangkaian sebelum membuat permintaan atau mengendalikan kesilapan rangkaian khusus dalam panggilan balik fail .
• Cuba ... Catch Blocks: Walaupun kurang biasa dengan uni.request yang sudah menyediakan panggilan balik, anda boleh membungkus panggilan uni.request dalam try...catch blok untuk menangkap kesilapan yang tidak dijangka yang mungkin berlaku di luar permintaan itu sendiri (misalnya, kesilapan parsing JSON).
• Pengendalian ralat generik: Sediakan mesej ralat generik kepada pengguna jika ralat tertentu tidak jelas atau terlalu teknikal. Log butiran ralat penuh untuk tujuan debugging.

Contoh dengan pemeriksaan kod status:

 <code class="javascript">uni.request({ // ... request options ... fail: (err) => { if (err.statusCode === 404) { uni.showToast({ title: 'Resource not found', icon: 'error' }); } else if (err.statusCode === 500) { uni.showToast({ title: 'Server error', icon: 'error' }); } else { uni.showToast({ title: 'An error occurred', icon: 'error' }); console.error('Request failed:', err); } } });</code>

Bagaimana saya boleh mengintegrasikan uni.request dengan sistem pengesahan projek uni-app saya?

Mengintegrasikan uni.request dengan sistem pengesahan biasanya melibatkan menambah tajuk kebenaran kepada setiap permintaan. Header ini biasanya mengandungi token (JWT, ID sesi, dll) yang mengenal pasti pengguna yang disahkan.

Pelaksanaan:

1. Penyimpanan Token: Simpan token pengesahan dengan selamat (contohnya, dalam storan Uni-app menggunakan uni.setStorageSync dan uni.getStorageSync ).
2. Suntikan header: Sebelum membuat setiap permintaan, dapatkan token dan masukkannya ke objek header :

 <code class="javascript">const token = uni.getStorageSync('token'); uni.request({ url: 'https://api.example.com/protected-data', header: { 'Authorization': `Bearer ${token}` // Adjust as needed for your auth scheme }, success: (res) => { // ... }, fail: (err) => { // Handle authentication errors (eg, 401 Unauthorized) if (err.statusCode === 401) { // Redirect to login or refresh token } } });</code>

3. Token menyegarkan: Melaksanakan token yang menyegarkan jika sistem pengesahan anda menggunakan token jangka pendek. Semak tamat tempoh token dan menyegarkan semula secara automatik sebelum ia tamat. Ini biasanya melibatkan membuat permintaan berasingan untuk titik akhir refresh token.
4. Pengendalian ralat: Mengendalikan kesilapan pengesahan (seperti 401 tidak dibenarkan) dengan sewajarnya. Ini mungkin melibatkan pengalihan pengguna ke halaman log masuk atau mendorong mereka untuk mengutamakan semula.

Bolehkah saya menggunakan uni.request untuk memuat naik fail dalam projek un-app saya?

Ya, uni.request boleh memuat naik fail, tetapi ia memerlukan menggunakan API formData . Inilah Caranya:

Pelaksanaan:

1. Buat FormData: Buat objek FormData dan tambahkan fail kepadanya. Anda perlu mengakses fail menggunakan API Pemilihan Fail Uni-App yang sesuai (misalnya, uni.chooseImage atau uni.chooseVideo ).
2. Tetapkan Kandungan-Jenis: Tetapkan tajuk Content-Type ke multipart/form-data .
3. Hantar permintaan: Hantar permintaan pos dengan objek FormData sebagai data .

Contoh:

 <code class="javascript">uni.chooseImage({ count: 1, success: (res) => { const filePath = res.tempFiles[0].path; const formData = new FormData(); formData.append('file', { uri: filePath, name: 'file.jpg', // Adjust filename as needed type: 'image/jpeg' // Adjust file type as needed }); uni.request({ url: 'https://api.example.com/upload', method: 'POST', header: { 'Content-Type': 'multipart/form-data' }, data: formData, success: (res) => { // ... }, fail: (err) => { // ... } }); } });</code>

Ingat untuk menyesuaikan name dan type sifat mengikut fail yang dimuat naik. Sisi pelayan perlu dikonfigurasikan untuk mengendalikan muat naik multipart/form-data . Juga, pertimbangkan untuk menggunakan penunjuk kemajuan untuk menunjukkan kemajuan memuat naik kepada pengguna untuk pengalaman pengguna yang lebih baik, yang biasanya memerlukan pendekatan yang berbeza di luar uni.request asas.

Atas ialah kandungan terperinci Bagaimanakah saya menggunakan API Uni.request Uni-App untuk membuat permintaan HTTP?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!