如何 return 从 .then 语句中获取 api 数据接收到的数组？

Question

我试图在 .then 语句中导出一个数组，但它不起作用。我不知道如何让它工作。实际上，我只是想将我在 redux 中的初始状态设置为我从电影数据库 api.

接收到的静态数据

import { API_URL, API_KEY } from '../Config/config';

const urls = [
`${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`,
`${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=2`,
]

Promise.all(urls.map(items => {
return fetch(items).then(response => response.json())
}))

.then(arrayOfObjects => {
var arr1 = arrayOfObjects[0].results;
var arr2 = arrayOfObjects[1].results;
export var movieData = arr1.concat(arr2);   
}
)

Answer 1

你可以用函数试试。像这样：

import { API_URL, API_KEY } from '../Config/config';

export const getMovies = () => {
   const urls = [
   `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`,
   `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=2`,
  ]

  const promises = urls.map(url => {
    return new Promise((reject, resolve) => {
     fetch(url).then(res => res.json())
      .then(res => resolve(res.results))
    })
  })

  return Promise.all(promises)
}

// 其他文件

import {getMovies} from 'YOUR_API_FILE.js';

getMovies().then(moviesArr => {
   // your business logics here
})

Answer 2

您可以修改如下代码：

import { API_URL, API_KEY } from '../Config/config';
let movieData='';

exports.movieData = await (async function(){

const urls = [
`${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`,
`${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=2`,
];

const arrayOfObjects = await Promise.all(urls.map(items => {
return fetch(items).then(response => response.json())
}));

 return arrayOfObjects[0].results.concat(arrayOfObjects[1].results);
 })();

Answer 3

尚不清楚此代码与您的 state/reducer 相关的位置，但理想情况下，您应该使用动作创建者来处理任何 API 调用和调度状态更新，并且这些动作创建者可以从组件中调用。

所以，用一个空数组初始化你的状态：

const initialState = {
  movies: []
};

设置你的reducer来更新状态 MOVIES_UPDATE:

function reducer(state = initialState, action) {
  const { type, payload } = action;
  switch (type) {
    case 'MOVIES_UPDATE': {
      return { ...state, movies: payload };
    }
  }
}

您仍然可以使用您的函数来获取数据：

function fetchData() {
  return Promise.all(urls.map(items => {
    return fetch(items).then(response => response.json());
  }));
}

..但它是用一个动作创建者调用的（它 returns 一个带有调度参数的函数），这个动作创建者 1) 获取数据，2) 合并数据，3) 并调度数据到商店。

export function getMovies() {
  return (dispatch) => {
    fetchData().then(data => {
      const movieData = data.flatMap(({ results }) => results);
      dispatch({ type: 'MOVIES_UPDATE', payload: movieData });
    });
  }
}

它是从您的组件中调用的，如下所示：

componentDidMount () {
  this.props.dispatch(getMovies());
}

如何 return 从 .then 语句中获取 api 数据接收到的数组？

How to return an array received from fetching api data in a .then statement?

javascript

es6-promise