web-dev-qa-db-ja.com

fetch（）で非同期/待機してエラーを処理する方法

Reactアプリにストライプ非同期コードがあり、コードにエラー処理を追加しようとしていますが、それを処理する方法がわかりません。then（）でそれを行う方法は知っていますが、非同期/ awaitは私にとって新しい

[〜＃〜]編集済み[〜＃〜]

.catch（）を追加しました。応答タブのネットワークタブでエラーが発生しました。コンソールにログを記録できますか？

    submit = async () => {
    const { email, price, name, phone, city, street, country } = this.state;
    let { token } = await this.props.stripe
      .createToken({
        name,
        address_city: city,
        address_line1: street,
        address_country: country
      })
      .catch(err => {
        console.log(err.response.data);
      });

    const data = {
      token: token.id,
      email,
      price,
      name,
      phone,
      city,
      street,
      country
    };

    let response = await fetch("/charge/pay", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(data)
    }).catch(err => {
      console.log(err.response.data);
    });
    console.log(response);
    if (response.ok)
      this.setState({
        complete: true
      });
  };

ありがとう

javascriptreactjsasynchronousfetch
4
Exc

Fetchはネットワークエラーのみを検出します。その他のエラー（401、400、500）は手動でキャッチして拒否する必要があります。

await fetch("/charge/pay", headers).then((response) => {
    if (response.status >= 400 && response.status < 600) {
      throw new Error("Bad response from server");
    }
    return response;
}).then((returnedResponse) => {
   // Your response to manipulate
   this.setState({
     complete: true
   });
}).catch((error) => {
  // Your error is here!
  console.log(error)
});

このフェッチの制限に満足できない場合は、axiosを使用してみてください。

8
Avanthika

トライキャッチであなたの待ちを包みます。

try {
    let response = await fetch("/charge/pay", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(data)
    });

    console.log(response);
} catch (error) {
    console.log(error);
}
0
Win

通常の命令型プログラミングと同じように、try/catchを使用できます。

_try {
    let response = await fetch("/charge/pay", {
      method: "POST",
      headers: {
          "Content-Type": "application/json"
      },
      body: JSON.stringify(data)
    });
} catch(error) {
    // Error handling here!
}
_

または、約束と同じように.catch()を組み合わせることができます。

_let response = await fetch("/charge/pay", {
    method: "POST",
    headers: {
       "Content-Type": "application/json"
    },
    body: JSON.stringify(data)
}).catch(function(error) {
    // Error handling here!
});
_
0
LiraNuna
 const data = {
        token: token.id,
        email,
        price,
        name,
        phone,
        city,
        street,
        country
      };
      axios
        .post("/charge/pay", data)
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err.response.data);
        });
0
Exc