0

Estou com um problema ao chamar uma API, e esse problema só acontece em determinada situação, um exemplo:

// Situação que funciona perfeitamente

    const response = await axios.get('https://localhost:8080/api/appcompras/catalogues?scheme_url=company&page=${this.state.page}`)
    const catalogues = await response.data

    this.setState({
        result: [...this.state.result, ...catalogues.response.data],
        page: page + 1,
        loading: false,
    })

// Situação que não funciona
const options = {
            headers: {
                Authorization: 'Bearer ' + this.state.token
            }
        }

        const response = await axios.get(`https://localhost:8080/api/appcompras/catalogues?scheme_url=namine&page=${this.state.page}`, options)
        const catalogues = await response.data

        this.setState({
            result: [...this.state.result, ...catalogues.response.data],
            page: page + 1,
            loading: false,
        }) 

Então a questão é, sempre que coloco o headers, ele da o seguinte erro

Possible Unhandled Promise Rejection

E quando eu tiro, volta a funcionar naturalmente, lembrando que o this.state.token é chamado para ser populado no componentWillMount.

async componentWillMount(){
        const dados = JSON.parse(await AsyncStorage.getItem('@MySuperStore:dados')) 
        console.log(dados.token)
        this.setState({token: dados.token})
    }
0

1 Resposta 1

0

O mais provável é que a API esteja retornando algum erro (HTTP), e o axios gera uma exceção (que não está sendo tratada) nesse caso.

Ao usar async/await, o ideal é fazer as operações assíncronas em um try-catch:

try {
  const response = await axios.get('...')
} catch (error) {
  // Tratar o erro adequadamente
}

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .