Await / axios总是返回redux工具包的挂起操作

vfh0ocws  于 2023-10-18  发布在  iOS
关注(0)|答案(2)|浏览(123)

我正在从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);
    }
  },
);

编辑:我做了一些改变,现在我得到undefinedfulfilled行动。

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;
  },
);

感谢您的评分!

j5fpnvbx

j5fpnvbx1#

你混合了try / catchthen / catch大多数时候,你不会同时做这两件事。大多数时候你只能选择其中一个。
下面是一个try / catch的例子:

'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}`,
        )
        console.log('results: ', movies);
      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);
    }
  },
);

或者这里有一个then / catch的例子:

'movies/searchByTitle',
  async (values, thunkAPI) => {
    const API_KEY = '';
    return 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);
          return thunkAPI.rejectWithValue(error);
        });
  },
);
0md85ypi

0md85ypi2#

在更新的代码中,您仍然直接从Axios响应返回data,而无需等待。在调用axios.get(url)时,应该使用await关键字,以确保异步操作完成,并且在返回响应数据之前获得响应数据。下面是更正的代码:

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}`;
  try {
    const response = await axios.get(url);
    return response.data;
  } catch (error) {
    throw error; // Re-throw the error to be caught by the async thunk
  }
};

export const searchByTitle = createAsyncThunk(
  'movies/searchByTitle',
  async (values, thunkAPI) => {
    let { movieTitle } = values;
    let page = 1;

    try {
      let data = await fetchMoviesByTitle(movieTitle, page);
      console.log(data);
      return data;
    } catch (error) {
      return thunkAPI.rejectWithValue(error.message);
    }
  },
);

在这段代码中:
1.我们在调用axios.get(url)时使用await,以确保在继续之前完全接收到响应。
1.我们使用try...catch块来捕获Axios请求期间可能发生的任何错误。如果发生错误,我们重新抛出错误,让createAsyncThunk函数捕获,这将导致一个带有错误消息的拒绝操作。
通过这些更改,您的searchByTitle形实转换程序现在应该在请求成功时正确返回响应数据,或者在发生错误时使用错误消息拒绝。

相关问题