Apakah yang perlu saya lakukan jika "Ralat Tidak Ditangkap (dalam janji): Permintaan gagal dengan kod status 400" berlaku apabila menggunakan axios dalam aplikasi Vue?

Menggunakan axios sebagai rangka kerja permintaan rangkaian dalam aplikasi Vue, pemprosesan data biasanya melibatkan komunikasi dengan API bahagian belakang. Walau bagaimanapun, dalam beberapa kes, kami mungkin menghadapi ralat iaitu "Ralat Tidak Ditangkap (dalam janji): Permintaan gagal dengan kod status 400". Ralat ini biasanya berlaku apabila meminta API, menunjukkan bahawa permintaan telah dihantar, tetapi pelayan tidak dapat memproses permintaan kerana format data yang salah atau parameter yang salah.

Bagaimana untuk menangani ralat ini? Di bawah ini kami akan membincangkan beberapa penyelesaian yang mungkin.

1. Semak URL dan parameter permintaan API

Pertama, kita perlu menyemak URL dan parameter permintaan API untuk memastikan ia memenuhi keperluan API. Masalah ini biasanya disebabkan oleh parameter yang salah atau URL yang salah disediakan semasa meminta API, menyebabkan pelayan tidak dapat memproses permintaan.

Anda boleh menggunakan alatan pembangunan penyemak imbas Chrome untuk melihat URL dan parameter yang diminta untuk menyemak sama ada ia betul.

2. Tetapkan fail pengepala permintaan axios

Dalam aplikasi Vue, kami biasanya menggunakan pemalam axios untuk menghantar permintaan HTTP. Jika anda perlu menetapkan parameter tertentu atau fail pengepala dalam pengepala permintaan apabila meminta API, maka kami perlu memastikan bahawa pengepala permintaan ditetapkan dengan betul dalam pemalam axios.

axios.defaults.headers.common['Authorization'] = 'Pembawa ' + token;

Dalam kod di atas, kami menetapkan pengepala permintaan untuk menambahkan token Pembawa kepada Kebenaran.

3. Hantar format data yang betul apabila meminta API

Dalam aplikasi, jenis data yang kita kenal ialah JSON. Apabila memproses data dalam aplikasi Vue, kami perlu memastikan bahawa data dihantar ke pelayan dalam format JSON. Jika kami menghantar data dalam format lain (contohnya, data borang atau data format XML), pelayan mungkin mengembalikan ralat 400.

Gunakan Content-Type: application/json pengepala untuk memastikan data dihantar dalam format JSON. Berikut ialah contoh menghantar objek data ke API bahagian belakang dalam format JSON.

biarkan data = { nama: 'John', umur: 30 };
axios.post('/api/user', JSON.stringify(data), { headers: { 'Content-Type': 'application/json ' } });

4. Tangkap ralat dan paparkan mesej ralat

Kita boleh menggunakan pemintas tindak balas axios untuk menangkap ralat dan memaparkan mesej ralat. Dalam aplikasi Vue, kita boleh mencipta contoh axios dalam fail main.js dan menambah pemintas respons.

Dalam coretan kod berikut, kami telah menambah pemintas respons pada tika axios. Apabila ralat permintaan berlaku, pengendali ralat pemintas respons dipanggil dan mesej ralat dipaparkan.

import axios dari 'axios';
import Vue dari 'vue';

let instance = axios.create({
baseURL: 'http://localhost:3000',
tamat masa: 30000
});

});
instance.interceptors.response.use(function (respons) {
return response;
}, function (error) {
Vue.prototype.$message.error(error.message);
return Promise.reject(error);

});

Dalam coretan kod di atas, kami menggunakan contoh $message Vue untuk memaparkan mesej ralat.

Ringkasan

Dalam aplikasi Vue, kami biasanya menggunakan axios sebagai perpustakaan permintaan rangkaian. Apabila meminta API, kami mungkin menghadapi ralat "Tidak Diperoleh (dalam janji): Permintaan gagal dengan kod status 400". Ralat ini biasanya menunjukkan bahawa kita perlu menyemak URL, parameter, pengepala permintaan dan format data permintaan API.

Apabila menyelesaikan masalah ini, kami boleh menyelesaikan masalah dengan menyemak URL dan parameter permintaan API, menetapkan fail pengepala permintaan axios, menghantar format data yang betul dan menangkap ralat dan memaparkan mesej ralat. 🎜

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika "Ralat Tidak Ditangkap (dalam janji): Permintaan gagal dengan kod status 400" berlaku apabila menggunakan axios dalam aplikasi Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!