在axios中转换获取

Question

我需要在React项目中使用fetch调用将此代码转换为axios调用和async/await。

我遵循的步骤是：

"npm安装axios"，

从"axios"导入axios，

之后呢？

有人能帮我吗？

import React, { useState } from "react";
import { ResultCard } from "../ResultCard";
export const SearchMovie = () => {
const [query, setQuery] = useState("");
const [results, setResults] = useState([]);
const onChange = (e) => {
e.preventDefault();
setQuery(e.target.value);

fetch(
`https://api.themoviedb.org/3/search/movie?api_key=${process.env.REACT_APP_TMDB_KEY}&language=en-US&page=1&include_adult=false&query=${e.target.value}`,
)
.then((res) => res.json())
.then((data) => {
if (!data.errors) {
setResults(data.results);
} else {
setResults([]);
}
});
};
return (
<div className="search-movie-page">
<div className="container">
<div className="search-movie-content">
<div className="input-wrapper">
<input type="text" placeholder="🔍 Search for a movie..." value={query} onChange={onChange} />
</div>
{results.length > 0 ? (
<ul className="results">
{results.map((movie) => (
<li key={movie.id}>
<ResultCard movie={movie} />
</li>
))}
</ul>
) : (<h2 className="no-movies-found">Search Something<br/>or<br/>Check what you searched for</h2>)} 
</div>
</div>
</div>
);
};

Answer 1

这个。。。

fetch(`https://api.themoviedb.org/3/search/movie?api_key=${
process.env.REACT_APP_TMDB_KEY
}&language=en-US&page=1&include_adult=false&query=${e.target.value}`)
.then((res) => res.json())
.then((data) => {
if (!data.errors) { setResults(data.results); } else { setResults([]); }
});

必须变成这样。。。

axios.get('https://api.themoviedb.org/3/search/movie', {
params: {
api_key: process.env.REACT_APP_TMDB_KEY,
language: 'en-US',
page: 1,
include_adult: false,
query: e.target.value,
}
})
.then((data) => {
if (!data.errors) { setResults(data.results); } else { setResults([]); }
});

您的原始代码对失败的请求没有任何错误处理。我建议添加一个catch来处理失败的请求。

.then((data) => { /* handle success */ })
.catch((error) => { /* handle failure */ });