如何将 Ajax 响应分配给 React 中另一个函数中的变量？

Question

我有一个 ajax 调用，它以电影列表进行响应，然后我有另一个函数和另一个返回流派名称的 ajax 调用，因为第一个调用只有流派的 id，然后我将流派 ID 与其相关联我在第一次 ajax 调用时将它分配给 JSON，有点像将它分配给一个变量。 我遇到的问题是，由于 ajax 是异步的，它总是以未定义结束。 我不想让它同步，因为它最终会导致糟糕的用户体验。

第一个ajax调用

$.ajax({
        url: urlString,
        success: (searchResults) => {
            const results = searchResults.results

            var movieRows = [];

            results.forEach(movie => {
                movie.genres = this.getMovieGenres(movie.media_type, movie.genre_ids);

                const movieRow = <MovieRow key={movie.id} movie={movie}/>;
                movieRows.push(movieRow)
            });

            this.setState({rows: movieRows})

        },
        error: (xhr, status, err) => {
            console.log("Failed to fetch data...")
        }
    })

我用第二个 ajax 调用调用的函数

getMovieGenres (mediaType ,movieGenreIds) {

    urlString = `https://api.themoviedb.org/3/genre/movie/list?api_key=${config.movieDBbApiKey}&language=en-US`ApiKey}&language=en-US`

    var genres = []

    $.ajax({
        url: urlString,
        async: true,
        crossDomain: true,
        method: "GET",
        success: searchResults => {
          for (let i = 0; i < movieGenreIds.length; i++) {
            for (let j = 0; j < searchResults.genres.length; i++){
              console.log(searchResults.genres[j].id)
              if (movieGenreIds[i] === searchResults.genres[j].id) {
                genres.push(searchResults.genres[j].name)
              }
            }
          }

        },
        error: (xhr, status, err) => {
            console.log("Failed to fetch data...")
        }
    })

  return genres

}

Answer 1

您的问题有多种解决方案。

最简单的就是在second ajax call的回调中进行first ajax call 。 在第二次调用中，您将获得第一个 ajax 调用和第二个. 然后在第二次调用中进行转换和设置状态。

其他选项（推荐的）是使用依赖Axios或Fetch 。 Promises 可以用 Promise.all 规避：

 var p1 = Promise.resolve(3); var p2 = 1337; var p3 = new Promise((resolve, reject) => { setTimeout(resolve, 100, "foo"); }); Promise.all([p1, p2, p3]).then(values => { console.log(values); // [3, 1337, "foo"] });

Answer 2

你可以试试这个：

var promise = new Promise((resolve,reject)=> {
    return $.ajax({
        url: urlString,
        success: (searchResults) => {
            return resolve(searchResults.results)

        },
        error: (xhr, status, err) => {
            return reject("Failed to fetch data...")
        }
    })
})

返回承诺的函数

getMovieGenres (mediaType ,movieGenreIds) {

    urlString = `https://api.themoviedb.org/3/genre/movie/list?api_key=${config.movieDBbApiKey}&language=en-US`ApiKey}&language=en-US`

    var genres = []

    return new Promise((resolve,reject)=> {
        $.ajax({
            url: urlString,
            async: true,
            crossDomain: true,
            method: "GET",
            success: searchResults => {
                for (let i = 0; i < movieGenreIds.length; i++) {
                    for (let j = 0; j < searchResults.genres.length; i++){
                        console.log(searchResults.genres[j].id)
                        if (movieGenreIds[i] === searchResults.genres[j].id) {
                            genres.push(searchResults.genres[j].name)
                        }
                    }
                }

                return resolve(genres)

            },
            error: (xhr, status, err) => {
                return reject("Failed to fetch data...")
            }
        })
    }) 
}

最后：

promise().then(results => {

    var movieRows = [];
    var tasks = []

    results.forEach(movie => {
        tasks.push(getMovieGenres(movie.media_type, movie.genre_ids))
    });

    Promise.all(tasks).then(output => {
        output.forEach(movie => {
            const movieRow = <MovieRow key={movie.id} movie={movie}/>;
            movieRows.push(movieRow)
        })

        this.setState({rows: movieRows})
    })
})

希望能帮到你！