Fetch API에서 res.ok의 중요성 이해

저는 항상 데이터 가져오기에 Axios를 적극적으로 사용했지만 최근에는 대신 Fetch API를 사용하기로 결정했습니다. 탐색하는 동안 공유할 가치가 있다고 생각되는 미묘하지만 중요한 차이점을 발견했습니다.

이 코드 조각부터 시작해 보겠습니다. 무엇을 기록한다고 생각하시나요?

try{
   //this returns a 404 error
   const res = await fetch("randomapi....") 
   console.log("successful")
  }catch(err){
   console.log("failed", err)
}

오류 개체와 함께 "실패"가 콘솔에 기록될 것이라고 예상했다면 혼자가 아닙니다. 최근까지 저도 같은 생각을 했습니다. 하지만 Fetch는 그렇지 않습니다!

여기에 catch가 있습니다. Fetch 요청이 404 또는 500 상태 코드를 수신하더라도 오류가 발생하지 않으며 catch 블록이 트리거되지 않습니다. 대신, 가져오기 기능은 약속을 확인하고 응답이 성공했는지 확인하도록 남겨둡니다.

Fetch로 오류를 올바르게 처리하려면 다음과 같이 res.ok 속성을 명시적으로 확인해야 합니다.

try{
    //returns 404 error
    const res = await fetch("randomapi")
    if(!res.ok){
      throw new Error("fetch request failed")
    }
    console.log("successful")
    let data = await res.json()
    console.log(data)
}catch(err){
  console.log(err)
}

이 접근 방식을 사용하면 응답 상태가 성공 범위(200~299)를 벗어나면 throw 문이 실행되고 오류는 catch 블록에 포착됩니다.

왜 이런 일이 발생하는 걸까요?

Axios와 달리 Fetch는 2xx 범위를 벗어난 HTTP 응답 코드를 오류로 간주하지 않습니다. 대신 성공 여부에 관계없이 모든 HTTP 응답을 이행된 약속으로 처리합니다. 이러한 디자인 선택은 개발자에게 더 많은 제어권을 제공하지만 오류를 올바르게 처리하기 위해서는 추가 노력이 필요합니다.

응답 이해.ok

response.ok 속성은 200~299 사이의 HTTP 상태 코드에 대해 true로 평가되는 부울입니다. 다른 상태 코드에 대해서는 false로 평가됩니다. 이를 통해 가져오기 요청이 성공했는지 쉽고 안정적으로 확인할 수 있습니다.

예:

• 200 상태는 성공을 나타내며 response.ok를 true로 설정합니다.
• 404 상태(찾을 수 없음) 또는 500 상태(서버 오류)가 설정됩니다. 응답.거짓도 괜찮습니다.

클라이언트 측 오류(4xx)와 서버 측 오류(5xx)를 구별하는 등 보다 세부적인 오류 처리가 필요한 경우 response.status를 사용하여 상태 코드에 직접 액세스할 수도 있습니다.

읽어주셔서 감사합니다. 이 내용이 누군가에게 도움이 되기를 바랍니다!

위 내용은 Fetch API에서 res.ok의 중요성 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!