Fetch ошибка 400

This way we can handle all types of status accordingly.

fetch(url, {
  method: 'POST',
  headers: headers,
  body: JSON.stringify({ user_email: email }),
}).then((response) => {
  return new Promise((resolve) => response.json()
    .then((json) => resolve({
      status: response.status,
      ok: response.ok,
      json,
    })));
}).then(({ status, json, ok }) => {
  const message = json.message;
  let color = 'black';
  switch (status) {
    case 400:
      color = 'red';
      break;
    case 201:
    case 200:
      color = 'grey';
      break;
    case 500:
    default:
      handleUnexpected({ status, json, ok });
  }
})

inspiration

answered Feb 22, 2020 at 1:53

Incorporating it into your HTTP abstraction is probably a good idea. Perhaps with some sort of options argument:

const myFetch = (method, path, {headers, strictErrors, whatever}) => {
  // fetch here, if strictErrors is true, reject on error.
  // return a Promise.
}

myFetch('GET', 'somepath', {strictErrors: true})
  .then(response => {})
  .catch(err => { /* maybe 400 */ });

A wrapper around fetch is generally a good idea, fetch is a relatively low level function. Just as it isn’t a good idea to directly create new XHR objects everywhere, I believe it isn’t a good idea to directly call fetch() in various parts of your application. It’s akin to a global variable, in some ways.

answered Oct 25, 2016 at 21:12

The best approach I’ve found for this is to wrap it in a new Promise, and if response.ok is false, reject the Promise with the error context.

/**
 * Parses the JSON returned by a network request
 *
 * @param  {object} response A response from a network request
 *
 * @return {object}          The parsed JSON, status from the response
 */
function parseJSON(response) {
  return new Promise((resolve) => response.json()
    .then((json) => resolve({
      status: response.status,
      ok: response.ok,
      json,
    })));
}

/**
 * Requests a URL, returning a promise
 *
 * @param  {string} url       The URL we want to request
 * @param  {object} [options] The options we want to pass to "fetch"
 *
 * @return {Promise}           The request promise
 */
export default function request(url, options) {
  return new Promise((resolve, reject) => {
    fetch(endpoint  + url, options)
      .then(parseJSON)
      .then((response) => {
        if (response.ok) {
          return resolve(response.json);
        }
        // extract the error from the server's json
        return reject(response.json.meta.error);
      })
      .catch((error) => reject({
        networkError: error.message,
      }));
  });
}

(Top comment on https://github.com/github/fetch/issues/203)

answered Dec 23, 2020 at 1:09

class OfferSite extends Component {
        state = {
                siteId: 1,
                offerId: 4,
                offerDetails: "",

        };

        componentDidMount = () => {

                const data = {
                        "siteId" : this.state.siteId,
                        "offerId" : this.state.offerId,
                };



                fetch('/v1/offers/details', {
                        method: "POST",
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify({"siteId" : 1, "offerId": 4}),
                })

                    .then((response) => response.json())
                    .then((data) => {
                            this.setState({offerDetails: data});
                            console.log(data);
                            })
        };

        render() {

                return (
                    <div>
                            <OfferCover />
                            <OfferMenu />
                            <OfferHighlights />
                            <OfferMovie />
                            <OfferResort />
                            <OfferAccomodation />
                            <OfferAttractions />
                            <OfferSchedule />
                            <OfferTransport />
                            <OfferCourses />
                            <OfferPrice />
                            <OfferAddons />
                            <OfferTrips />
                    </div>
                )


        }
}

export default OfferSite;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

asked Dec 16, 2020 at 13:20