web-dev-qa-db-ja.com

これはフェッチAPIを使用してエラーを処理する正しい方法ですか？

ReactコンポーネントのhandleSubmit関数でフェッチAPIを使用して、次のようにデータを投稿しています：

handleSubmit(event) {
event.preventDefault();

var error = false;

var { username, password } = this.state

var mailFormat = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/


if (!username.match(mailFormat)) {
  this.setState({ usernameError: true });
  error = true;
} else {
  this.setState({ usernameError: false });
}

if (password.length < 8) {
  this.setState({ passwordError: true });
  error = true;
} else {
  this.setState({ passwordError: false })
}

if (error) {
  this.setState({ formSuccess: false });
  return;
}

return window.fetch('http://localhost:8016/users/registration', {
  method: 'POST',
  headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
  body: JSON.stringify({ username_email: username, password: password })
})
 // .then(this.handleErrors)
 .then((response)=>{
  if (response.ok) {
   const { token } = response.clone();

   const loginOptions = {
    token,
    cookieOptions: { expires: 1 },
    callback: () => Router.Push('/login')
   }
   setTimeout(() => {
    login(loginOptions)
   }, 5000)

   this.setState({
    username: '', password: '', userNameDup: false, formError: false, formSuccess: true
   })

   return response.json();
  } else if (!response.ok) {
   if (response.status === 409) {
    console.log("response.status ", response.status);
    this.setState({
     userNameDup: true, formError: true, formSuccess: false
    });
    return;
   }
  }
  return response;
 })
.catch(function (error) {
    console.log(error);
  });
}

フェッチの使用に関する私の質問は、通常、このように投稿リクエストを行うための1つのコードです。

var url = 'https://example.com/profile';
var data = {username: 'example'};

fetch(url, {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers:{
    'Content-Type': 'application/json'
  }
}).then(res => res.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));

あなたが私のバージョンで見ることができるように、私は条件付きでエラーを処理しています。 （try catchブロックを使用したバージョンを見たことがあると思います。エラー処理のエラー/ノードスタイルに慣れていると思います。）

とにかく、私の条件式のelse句がエラーを処理している場合、catch関数のポイントは何だろうと思いますか？それはまだ利用されますか？

だから誰でも私にエラー処理に関する状況を処理するための最もユビキタスなスタイルを教えてもらえますか？

ありがとうございました！

design-patternsjavascriptweb-development
2
Antonio Pavicevac-Ortiz

MDN docs に従って：

Fetch（）から返されたPromiseは、応答がHTTP 404または500であってもHTTPエラーステータスで拒否しません。代わりに、正常に解決され（okステータスがfalseに設定されています）、ネットワーク障害またはリクエストの完了を妨げるものがある場合。

それを知っていれば、次に進む前に少なくとも_response.ok == true_かどうかを確認する必要があります。あなたが与えた例は、それが常にハッピーパスに行くことを想定していますが、これは明らかに応答を処理する正しい方法ではありません。

コードにあるものが理想的です。

追伸else if (!response.ok)をelseに単純化できます

1
Jesse