我正在从Duck转向Redux Toolkit。
现在我来解释一下这种行为= await axios
始终返回 * 挂起 * 操作。删除await
,API调用“工作”,但返回undefined
。
我错过了什么?
'movies/searchByTitle',
async (values, thunkAPI) => {
const API_KEY = '';
try {
let {movieTitle} = values;
let page = 1;
let movies = await axios
.get(
`//api.themoviedb.org/3/search/movie?query=${movieTitle}&api_key=${API_KEY}&include_adult=false&page=${page}`,
)
.then(response => {
console.log('results: ', response);
return response.data;
})
.catch(error => {
const message =
(error.response &&
error.response.data &&
error.response.data.message) ||
error.message ||
error.toString();
console.log(message);
thunkAPI.rejectWithValue(error);
});
return movies;
} catch (error) {
const message =
(error.response &&
error.response.data &&
error.response.data.message) ||
error.message ||
error.toString();
console.log(message);
return thunkAPI.rejectWithValue(message);
}
},
);
编辑:我做了一些改变,现在我得到undefined
与fulfilled
行动。
const API_KEY = '';
const fetchMoviesByTitle = async (title, page) => {
const url = `https://api.themoviedb.org/3/search/movie?query=${title}&api_key=${API_KEY}&include_adult=false&page=${page}`;
const {data} = axios.get(url);
return await data;
};
export const searchByTitle = createAsyncThunk(
'movies/searchByTitle',
async (values, thunkAPI) => {
let {movieTitle} = values;
let page = 1;
let data = await fetchMoviesByTitle(movieTitle, page)
.then(results => {
return results;
})
.catch(err => {
return thunkAPI.rejectWithValue(err.message);
});
console.log(data);
return data;
},
);
感谢您的评分!
2条答案
按热度按时间j5fpnvbx1#
你混合了
try / catch
和then / catch
大多数时候,你不会同时做这两件事。大多数时候你只能选择其中一个。下面是一个
try / catch
的例子:或者这里有一个
then / catch
的例子:0md85ypi2#
在更新的代码中,您仍然直接从Axios响应返回
data
,而无需等待。在调用axios.get(url)
时,应该使用await
关键字,以确保异步操作完成,并且在返回响应数据之前获得响应数据。下面是更正的代码:在这段代码中:
1.我们在调用
axios.get(url)
时使用await
,以确保在继续之前完全接收到响应。1.我们使用
try...catch
块来捕获Axios请求期间可能发生的任何错误。如果发生错误,我们重新抛出错误,让createAsyncThunk
函数捕获,这将导致一个带有错误消息的拒绝操作。通过这些更改,您的
searchByTitle
形实转换程序现在应该在请求成功时正确返回响应数据,或者在发生错误时使用错误消息拒绝。