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

Sangat biasa menggunakan axios dalam aplikasi Vue ialah klien HTTP berasaskan Promise yang boleh digunakan dalam penyemak imbas dan Node.js. Semasa proses pembangunan, mesej ralat "Ralat tidak ditangkap (dalam janji): Permintaan gagal dengan kod status 500" kadangkala muncul untuk pembangun, mesej ralat ini mungkin sukar difahami dan diselesaikan. Artikel ini akan meneroka masalah ini dan penyelesaiannya. . Masalah ini biasanya berlaku apabila terdapat kegagalan bahagian pelayan atau ralat API. Berikut ialah contoh kod:

axios.get('/api')
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.log(error)
  })

Dalam contoh ini, kami menghantar permintaan GET ke pelayan Jika ralat berlaku, fungsi tangkapan akan dicetuskan dan mesej ralat akan dicetak. Dalam kes ini, kita mungkin melihat mesej ralat berikut:

1. Uncaught (in promise) Error: Request failed with status code 500
       at createError (createError.js:16)
       at settle (settle.js:18)
       at XMLHttpRequest.handleLoad (xhr.js:77)

Analisis sebab

Sebab mesej ralat ini ialah API bahagian belakang mengembalikan kod status HTTP 500, iaitu "ralat dalaman pelayan" . Apabila ini berlaku, axios menyediakan maklumat ralat dalam data nilai pulangan dan termasuk kod status respons dalam objek ralat. Oleh itu, dalam kod kami di atas, apabila axios meminta API bahagian belakang untuk mengembalikan ralat 500, ia akan memasuki fungsi tangkapan dan mengeluarkan mesej ralat.

Terdapat banyak sebab mengapa masalah ini boleh berlaku. Pertama, pelayan mungkin mempunyai pepijat perisian atau kegagalan perkakasan yang menyebabkan ralat dalaman dalam permintaan. Kedua, mungkin terdapat masalah dengan kod API, dan beberapa masalah akan menyebabkan respons mengembalikan ralat 500.

Penyelesaian

Bagaimana untuk menyelesaikan masalah ini? Kita boleh menggunakan kaedah berikut.

3.1 Lihat maklumat ralat API bahagian belakang
Pertama, kita harus melihat maklumat ralat terperinci yang dikembalikan oleh API bahagian belakang untuk mendiagnosis masalah dengan lebih baik. Anda boleh melihat maklumat permintaan dan respons di bawah tab Rangkaian penyemak imbas anda, atau anda boleh melihat log pelayan bahagian belakang. Jika ralat berlaku, akan ada mesej ralat yang lebih terperinci untuk membantu kami menyelesaikan masalah tersebut.

3.2 Semak kod API

Kedua, kita harus menyemak kod API dan menentukan sama ada terdapat masalah dengannya. Apabila menyemak kod API, anda harus menyemak aspek berikut:

Jika terdapat sebarang ralat sintaks atau ralat logik.

Sama ada ia boleh mengendalikan permintaan dengan betul dan mengembalikan respons yang betul.

Dalam persekitaran pembangunan, adakah terdapat sebarang pengecualian yang tidak dikendalikan?

3.3 Menambah Pengendali Ralat
Dalam aplikasi Vue, kami boleh menambah pengendali ralat untuk mengurus ralat dengan lebih baik. Berikut ialah contoh pengendalian ralat permintaan Axios:

• axios.get('/api')
    .then(response => {
      console.log(response)
    })
    .catch(error => {
      if (error.response) {
        console.log(error.response.data)
        console.log(error.response.status)
        console.log(error.response.headers)
      } else if (error.request) {
        console.log(error.request)
      } else {
        console.log('Error', error.message)
      }
      console.log(error.config)
    })

  Dalam contoh ini, kami telah menggunakan pernyataan if untuk menyemak bahagian berlainan objek ralat. Jika objek ralat mengandungi objek tindak balas, kami boleh mengakses data tindak balas. Jika tiada objek tindak balas dalam objek ralat, kami akan mengeluarkan mesej ralat. . Untuk menyelesaikan masalah ini, kami perlu menyemak maklumat ralat yang dikembalikan oleh API dan mengendalikannya dengan betul. Sebaik sahaja anda melakukan ini, anda boleh lebih memahami punca ralat dan mengambil langkah yang lebih baik untuk mengelakkan masalah tersebut.

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