无法执行 .map whithin 函数

Question

背景

我正在构建一个 React-Redux 应用程序，除其他外，它必须处理一些对私有 API 的 axios 调用。说API不受我控制，我不能修改任何东西。其中一个 axios 请求是由一个函数执行的，我们称它为“getData”。这个请求使用 POST 作为它的方法并且需要一个参数“category”，它一次只接受一个值。事情是有时我需要一次执行三个请求，我打算以编程方式执行，而不是为每个可能的请求硬编码一个请求，因为可用类别的数量很多。

我打算构建什么

一个执行请求的函数，接受两个参数，一个是令牌，另一个是要作为“类别”参数传递的可能值的数组。该函数应该运行数组中的每个值一次，并且 return 一个包含从后端带来的所有“产品”的对象数组。

我已经构建了什么

export const getData = (tk, values) =>
  values
    .map(value =>
      apiInstance.request({
        url: ENDPOINTS.ENDPOINT,
        method: 'POST',
        data: qs.stringify({
         token: token,
         category: value,
        }),
      }),
    )
    .then(response => {
      return response.data;
    })
    .catch(error => {
      return Promise.reject(error.message);
    });

上面是实际请求，接下来是 redux 操作：

export const actionTypes = keyMirror({
  RETRIEVE_REQUEST: null,
  RETRIEVE_SUCCESS: null,
  RETRIEVE_FAILURE: null,
});

const actionCreators = {
  request: createAction(actionTypes.RETRIEVE_REQUEST),
  success: createAction(actionTypes.RETRIEVE_SUCCESS),
  failure: createAction(actionTypes.RETRIEVEO_FAILURE),
};

export const retrieveData = (tk, values) => dispatch => {
  dispatch(actionCreators.request());
  Promise.all(getData(tk, values))
    .then(data => dispatch(actionCreators.success(data)))
    .catch(error => dispatch(actionCreators.failure(error)));
};

和减速器：

export const initialState = {
  loading: false,
  data: [],
  error: null,
};

const actionsMap = {
  [actionTypes.RETRIEVE_REQUEST]: state => ({
    ...state,
    loading: true,
  }),

  [actionTypes.RETRIEVE_SUCCESS]: (state, action) => ({
    ...state,
    loading: false,
    data: action.payload,
  }),

  [actionTypes.RETRIEVE_FAILURE]: (state, action) => ({
    ...state,
    loadingPublic: false,
    error: action.payload,
  }),
};

export default (state = initialState, action) => {
  const actionHandler = actionsMap[action.type];
  if (!actionHandler) {
    return state;
  }
  return actionHandler(state, action);
};

Note that all of these are in separate files.

问题

我收到错误消息 undefined is not a function (near '...}).then(function (response)...')，它指向 values.map((value) =>

问题

据我了解，.map 可以接收这样的短箭头函数作为其第一个参数。 Values 是一个字符串数组，因此理论上它应该可以工作。我错过了什么？

Answer 1

问题是您将 values 映射到承诺列表。

但是，在您的情况下，.then() 在列表 ([Promise, Promise, ...]) 上是不可调用的。事实上，.then 将是 undefined，这正是错误消息告诉您的内容。

相反，尝试将 values.map(...) 包装在 Promise.all(...) 中。这将等待所有承诺在调用 .then(...).

之前解决

请记住，传递给 .then(...) 的 response 实际上也是一个列表！

所以你想做这样的事情：

Promise.all(
  values
    .map(value =>
      apiInstance.request({
        url: ENDPOINTS.ENDPOINT,
        method: 'POST',
        data: qs.stringify({
         token: token,
         category: value,
        }),
      }),
    )
)
.then(responses => {
  // responses is a list!
  return responses.map(response => response.data);
})
.catch(error => {
  return Promise.reject(error.message);
});

Answer 2

试试这个代码

export const getData = (tk, values) =>
  values
    .map(value =>
      apiInstance.request({
        url: ENDPOINTS.ENDPOINT,
        method: 'POST',
        data: qs.stringify({
         token: token,
         category: value,
        }),
      })
      .then(response => {
        return response.data;
      })
      .catch(error => {
        return Promise.reject(error.message);
      })
    );

无法执行 .map whithin 函数

Unable to perform .map whithin function

javascript

reactjs

redux

axios

array.prototype.map