[React] Handle HTTP Errors with React
2021-03-29 04:26
标签：which null why fetch cte format tac less UNC Unfortunately, sometimes a server request fails and we need to display a helpful error message to the user. In this lesson we’ll handle a promise rejection so we can collect that error information, and we’ll also learn how we can best display manage the state of our request so we have a deterministic render method to ensure we always show the user the proper information based on the current state of our React component. A common mistake people make is to create a state variable called [React] Handle HTTP Errors with React 标签：which null why fetch cte format tac less UNC 原文地址：https://www.cnblogs.com/Answer1215/p/12610062.htmlisLoading and set that to true or false. Instead, we’ll be using a status variable which can be set to idle, pending, resolved, or rejected. You can learn more about why this is important from Stop using isLoading booleans.body>
div id="root">div>
script src="https://unpkg.com/react@16.12.0/umd/react.development.js">script>
script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js">script>
script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js">script>
script type="text/babel">
function PokemonInfo({pokemonName}) {
const [status, setStatus] = React.useState(‘idle‘)
const [pokemon, setPokemon] = React.useState(null)
const [error, setError] = React.useState(null)
React.useEffect(() => {
if (!pokemonName) {
return
}
setStatus(‘pending‘)
fetchPokemon(pokemonName).then(
pokemonData => {
setStatus(‘resolved‘)
setPokemon(pokemonData)
},
errorData => {
setStatus(‘rejected‘)
setError(errorData)
},
)
}, [pokemonName])
if (status === ‘idle‘) {
return ‘Submit a pokemon‘
}
if (status === ‘rejected‘) {
return ‘Oh no...‘
}
if (status === ‘pending‘) {
return ‘...‘
}
if (status === ‘resolved‘) {
return pre>{JSON.stringify(pokemon, null, 2)}/pre>
}
}
function App() {
const [pokemonName, setPokemonName] = React.useState(‘‘)
function handleSubmit(event) {
event.preventDefault()
setPokemonName(event.target.elements.pokemonName.value)
}
return (
div>
form onSubmit={handleSubmit}>
label htmlFor="pokemonName">Pokemon Name/label>
div>
input id="pokemonName" />
button type="submit">Submit/button>
/div>
/form>
hr />
PokemonInfo pokemonName={pokemonName} />
/div>
)
}
function fetchPokemon(name) {
const pokemonQuery = `
query ($name: String) {
pokemon(name: $name) {
id
number
name
attacks {
special {
name
type
damage
}
}
}
}
`
return window
.fetch(‘https://graphql-pokemon.now.sh‘, {
// learn more about this API here: https://graphql-pokemon.now.sh/
method: ‘POST‘,
headers: {
‘content-type‘: ‘application/json;charset=UTF-8‘,
},
body: JSON.stringify({
query: pokemonQuery,
variables: {name},
}),
})
.then(r => r.json())
.then(response => response.data.pokemon)
}
ReactDOM.render(App />, document.getElementById(‘root‘))
script>
body>
上一篇：Netty
下一篇：计算机网络之HTTPS
文章标题：[React] Handle HTTP Errors with React
文章链接：http://soscw.com/essay/69359.html