在 Stripe API JS 中使用 Async/Await 进行错误处理

Question

I'm playing with the Stripe API. Everything works great, but I want to show possible configurations fails in the frontend. Those fails are handled as an 500.

So this is the condensed code

JS

async function initialize() {
    const { clientSecret } = await fetch("index.php?format=json", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id: myid, lang: mylang }),
    }).then((r) => {
        if (r.status >= 400 && r.status < 600) {
            // throw new Error(r.status);
        }
        return r.json()
    }

    ).catch((error) => {
        console.log(error)
    }
    );

    console.log(clientSecret);

}

PHP

header('Content-Type: application/json');
try {
    // code doing some stuff ...
    $output = [
        'secret' => 12345
    ];
    echo json_encode($output);
} catch (Error $e) {
    http_response_code(500);
    echo json_encode(['error' => $e->getMessage()]);
}    

When having a misconfiguration, this is (for example) what the fetch call outputs:

{
    "error": true,
    "code": 0,
    "message": "The payment method type provided: acss_debit is invalid. This payment method is available to Stripe accounts in CA and US and your Stripe account is in XX.",
}

So how can I catch that error message in JS and display it to the user? I tried all kind of stuff in the initialize function.

Answer 1

In your JavaScript code, you can catch the error in the catch block of the fetch function. You can then access the error message from the response object, which is passed as an argument to the catch block.

Here is an example of how you can catch the error and display the error message to the user:

async function initialize() {
    try {
        const { clientSecret } = await fetch("index.php?format=json", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ id: myid, lang: mylang }),
        }).then((r) => {
            if (r.status >= 400 && r.status < 600) {
                // throw new Error(r.status);
            }
            return r.json();
        });

        console.log(clientSecret);
    } catch (error) {
        console.error(error);
        // Access the error message from the response object
        const { message } = error.response;
        // Display the error message to the user
        alert(message);
    }
}

In this example, the catch block logs the error to the console and displays the error message to the user using an alert. You can adjust this code to display the error message in any way that you like, such as by displaying it in a div element or by adding it to the page using JavaScript.

I hope this helps. Let me know if you have any questions.

---

Updates:

It looks like you are using the then method to handle the response from the fetch call, and you are using an if statement to check the status code of the response. If the status code is in the range of 400-599, you are not throwing an error or rejecting the promise, so the error will not be caught by the catch block.

To catch the error, you will need to either throw an error or reject the promise in the then block if the status code is in the range of 400-599. Here is an example of how you could do this:

async function initialize() {
  try {
    const response = await fetch("index.php?format=json", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ id: myid, lang: mylang }),
    });
    if (response.status >= 400 && response.status < 600) {
      throw new Error(response.status);
    }
    const { clientSecret } = await response.json();
    console.log(clientSecret);
  } catch (error) {
    console.log(error);
  }
}

Alternatively, you could use the fetch call's reject function to reject the promise if the status code is in the range of 400-599:

async function initialize() {
  try {
    const response = await fetch("index.php?format=json", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ id: myid, lang: mylang }),
    }).then((response) => {
      if (response.status >= 400 && response.status < 600) {
        return Promise.reject(response.status);
      }
      return response.json();
    });
    const { clientSecret } = response;
    console.log(clientSecret);
  } catch (error) {
    console.log(error);
  }
}

Either of these approaches should allow you to catch the error and handle it appropriately in the catch block.

I hope this helps. Let me know if you have any other questions.

Answer 2

I managed to access the catched error message by doing this:

if (r.status >= 400 && r.status < 600) {

    return r.text()
        .then((text) => {
            throw (JSON.parse(text));
        });
}