Cara Menangkap Ralat dengan Fetch Promises: Mengapa Penolakan Bersyarat Tidak Berfungsi?

Menangkap Ralat dengan Mengambil Janji: Penolakan Bersyarat

Dalam aplikasi Redux, pembangun sering menggunakan fetch untuk permintaan tak segerak. Walau bagaimanapun, pengendalian ralat apabila permintaan gagal boleh menjadi mencabar, terutamanya jika permintaan itu mengembalikan kod status bukan OK.

Pertimbangkan coretan kod berikut:

function fetchVehicle(id) {
    return dispatch => {
        return dispatch({
            type: 'FETCH_VEHICLE',
            payload: fetch(`http://swapi.co/api/vehicles/${id}/`)
                .then(status)
                .then(res => res.json())
                .catch(error => {
                    throw(error);
                })
        });
    };
}

function status(res) {
    if (!res.ok) {
        return Promise.reject()
    }
    return res;
}

Matlamatnya adalah untuk menolak janji dan tangkap ralat dalam pengurang jika kod status tidak OK. Walau bagaimanapun, kod tidak berfungsi seperti yang dimaksudkan: janji tidak akan ditolak.

Memahami Janji Ambil

Ambil janji hanya menolak dengan TypeError apabila ralat rangkaian berlaku . Respons dengan kod status 4xx atau 5xx tidak dianggap sebagai ralat rangkaian, jadi ralat tidak dilemparkan.

Melempar Ralat Tersuai

Untuk menangkap ralat bukan rangkaian ini, kita boleh membuang ralat secara manual jika kod status menunjukkan permintaan yang gagal:

function fetchVehicle(id) {
  return fetch(`http://swapi.co/api/vehicles/${id}/`)
    .then(response => {
      if (!response.ok) {
        throw new Error('Something went wrong');
      }
      return response.json();
    })
    .catch(error => {
      console.log(error);
    });
}

Sekarang, jika permintaan itu mengembalikan kod status bukan OK, ia akan mencetuskan pengendali ralat dan log mesej ralat. Pengurang kemudiannya boleh mengendalikan ralat ini dengan sewajarnya.

Atas ialah kandungan terperinci Cara Menangkap Ralat dengan Fetch Promises: Mengapa Penolakan Bersyarat Tidak Berfungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!