Axios Handling Fouten

Ik probeer het JavaScript te begrijpen, belooft beter met Axios. Wat ik doe, is om alle fouten in Request.js aan te pakken en alleen de aanvraagfunctie van overal te bellen zonder catch()te gebruiken.

In dit voorbeeld is het antwoord op het verzoek 400 met een foutmelding in JSON.

Dit is de fout die ik krijg:

Uncaught (in promise) Error: Request failed with status code 400

De enige oplossing die ik vind, is het toevoegen .catch(() => {})in ergens.js, maar ik probeer te voorkomen dat u dat moet doen. Is het mogelijk?

Hier is de code:

aanvraag.js

export function request(method, uri, body, headers) {
  let config = {
    method: method.toLowerCase(),
    url: uri,
    baseURL: API_URL,
    headers: { 'Authorization': 'Bearer ' + getToken() },
    validateStatus: function (status) {
      return status >= 200 && status < 400
    }
  }
  ...
  return axios(config).then(
    function (response) {
      return response.data
    }
  ).catch(
    function (error) {
      console.log('Show error notification!')
      return Promise.reject(error)
    }
  )
}

ergens.js

export default class Somewhere extends React.Component {
  ...
  callSomeRequest() {
    request('DELETE', '/some/request').then(
      () => {
        console.log('Request successful!')
      }
    )
  }
  ...
}

Antwoord 1, Autoriteit 100%

Eigenlijk is het niet mogelijk met Axios vanaf nu. De statuscodes die in het bereik van 2xxalleen valt, kunnen worden betrapt in .then().

Een conventionele benadering is om fouten op te vangen in het catch()-blok zoals hieronder:

axios.get('/api/xyz/abcd')
  .catch(function (error) {
    if (error.response) {
      // Request made and server responded
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
  });

Een andere benadering kan het onderscheppen van verzoeken of reacties zijn voordat ze tegen die tijd zijn afgehandeld of worden opgevangen.

axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });
// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

Antwoord 2, autoriteit 23%

Als je toegang wilt krijgen tot de hele tekst van de fout, doe het dan zoals hieronder wordt getoond:

async function login(reqBody) {
  try {
    let res = await Axios({
      method: 'post',
      url: 'https://myApi.com/path/to/endpoint',
      data: reqBody
    });
    let data = res.data;
    return data;
  } catch (error) {
    console.log(error.response); // this is the main part. Use the response property from the error object
    return error.response;
  }
}

Antwoord 3, autoriteit 21%

Je kunt als volgt te werk gaan:
error.response.data
In mijn geval kreeg ik de eigenschap errorvan de backend. Dus gebruikte ik error.response.data.error

Mijn code:

axios
  .get(`${API_BASE_URL}/students`)
  .then(response => {
     return response.data
  })
  .then(data => {
     console.log(data)
  })
  .catch(error => {
     console.log(error.response.data.error)
  })

Antwoord 4, autoriteit 9%

als je async wilt gebruiken, wacht dan even

export const post = async ( link,data ) => {
const option = {
    method: 'post',
    url: `${URL}${link}`,
    validateStatus: function (status) {
        return status >= 200 && status < 300; // default
      },
    data
};
try {
    const response = await axios(option);
} catch (error) {
    const { response } = error;
    const { request, ...errorObject } = response; // take everything but 'request'
    console.log(errorObject);
}

Antwoord 5, autoriteit 2%

Ik heb geprobeerd de methode try{}catch{}te gebruiken, maar het werkte niet voor mij. Toen ik echter overschakelde naar het gebruik van .then(...).catch(...), wordt de AxiosError correct opgevangen waar ik mee kan spelen. Wanneer ik de eerste probeer bij het plaatsen van een breekpunt, kan ik de AxiosError niet zien en in plaats daarvan zegt het me dat de gevangen fout niet gedefinieerd is, wat ook is wat uiteindelijk wordt weergegeven in de gebruikersinterface.

Ik weet niet zeker waarom dit gebeurt vind ik het erg triviaal. Hoe dan ook hierdoor, stel ik met de gebruikelijke .then(...).catch(...)methode bovenvermelde vermijden gooien undefined fouten aan de gebruiker.

Antwoord 6

bellen met het verzoek de functie van overal zonder gebruik te vangen ().

In de eerste plaats tijdens het verwerken van de meeste fouten op één plek is een goed idee, het is niet zo makkelijk met aanvragen. Sommige fouten (bijv. 400 validatiefouten als: “gebruikersnaam genomen” of “ongeldig e-mail”). Moet worden doorgegeven

Dus hebben we nu een belofte op basis van functie te gebruiken:

const baseRequest = async (method: string, url: string, data: ?{}) =>
  new Promise<{ data: any }>((resolve, reject) => {
    const requestConfig: any = {
      method,
      data,
      timeout: 10000,
      url,
      headers: {},
    };
    try {
      const response = await axios(requestConfig);
      // Request Succeeded!
      resolve(response);
    } catch (error) {
      // Request Failed!
      if (error.response) {
        // Request made and server responded
        reject(response);
      } else if (error.request) {
        // The request was made but no response was received
        reject(response);
      } else {
        // Something happened in setting up the request that triggered an Error
        reject(response);
      }
    }
  };

U kunt dan gebruik maken van het verzoek zoals

try {
  response = await baseRequest('GET', 'https://myApi.com/path/to/endpoint')
} catch (error) {
  // either handle errors or don't
}

Antwoord 7

Als ik het goed begrijp, wil je dat thenvan de verzoekfunctie alleen wordt aangeroepen als het verzoek succesvol is, en je wilt fouten negeren. Om dat te doen, kunt u een nieuwe belofte maken, deze oplossen wanneer de axios-aanvraag succesvol is en deze nooit afwijzen in geval van een mislukking.

Bijgewerkte code ziet er ongeveer zo uit:

export function request(method, uri, body, headers) {
  let config = {
    method: method.toLowerCase(),
    url: uri,
    baseURL: API_URL,
    headers: { 'Authorization': 'Bearer ' + getToken() },
    validateStatus: function (status) {
      return status >= 200 && status < 400
    }
  }
  return new Promise(function(resolve, reject) {
    axios(config).then(
      function (response) {
        resolve(response.data)
      }
    ).catch(
      function (error) {
        console.log('Show error notification!')
      }
    )
  });
}