web-dev-qa-db-ja.com

JavaScriptのフェッチメソッドを使用して401エラーをキャッチする方法

トークンエンドポイントから新しいトークンを取得した後で再試行できるように、エラー401コードの応答をキャッチする必要があります。 APIからデータを取得するフェッチメソッドを使用しています。

   const request: Request = new Request(url.toString(), {
        headers: this.defaultRequestHeaders,
        method: "get",
        mode: "cors"
    });

   const headers: Headers = new Headers({
        "Accept": "application/json",
        "Content-Type": "application/json"
    });

   fetch(request)
        .then(function(response)
         {
          ///Logic code
         })
        .catch(function(error)
        {
          ///if status code 401. Need help here
        });
javascriptapi
15
Vikrant Singh

ステータスを確認し、200（ok）でない場合はエラーをスローすることができます

 fetch("some-url")
    .then(function(response)
     {
      if(response.status!==200)
       {
          throw new Error(response.status)
       }
     })
    .catch(function(error)
    {
      ///if status code 401...
    });
2
Israel kusayev

401は実際にはサーバーへの要求に対する有効な応答であるため、関係なく有効な応答を実行します。セキュリティの問題が発生した場合、またはサーバーが応答しないか、単に利用できない場合にのみ、catch句が使用されます。誰かと話そうとするようなものだと考えてください。 「私は現在対応できません」または「その情報はありません」と言われても、会話は成功しました成功しました。セキュリティ担当者があなたの間に来て、受信者と話すのを止めた場合、または受信者がdeadの場合にのみ、実際にエラーが発生します会話し、catchを使用してそれに応答する必要があります。

エラー処理コードを分離するだけで、リクエストは成功したが、望ましい結果が得られなかった場合に処理できるようになりますまた、実際のエラーがスローされています：

function catchError( error ){

    console.log( error );

}

request.then(response => {

    if( !response.ok ){

        catchError( response );

    } else {

        ... Act on a successful response here ...

    }

}).catch( catchError );

コメントでは@Nofaceによって提案されたresponse.okを使用していますが、これは理にかなっていますが、必要に応じてresponse.status === 401のみを確認できます。

1
somethinghere
(function () {
var originalFetch = fetch;
fetch = function() {
    return originalFetch.apply(this, arguments).then(function(data) {
        someFunctionToDoSomething();
        return data;
    });
};})();

ソース Fetch APIをリクエストインターセプターとして使用できますか？

1
Mohammad Sabbagh

statusで応答のthenを確認できます。

fetch(request)
  .then(function(response) {
    if (response.status === 401) {
      // do what you need to do here
    }
  })
  .catch(function(error) {});
1
Dario

あなたがしたいとき...

catch (error) {
  console.dir(error) // error.response contains your response
}
0
Aleksandar Panov

これを試すことができます

fetch(request)
  .then(function(response) {
    if (response.status === 401) {
      // do what you need to do here
    }
  })
  .catch(function(error) {
        console.log('DO WHAT YOU WANT')
});
0
Salman Saleem