как сделать несколько запросов API, используя Axios

Question

У меня есть существующий сервис для вызова API через Axios в моем приложении реагирования, которое, как мне кажется, ограничено одним запросом API за раз, я хотел сделать несколько запросов, используя axios.all , ноя не могу найти способ изменить службу, см. ниже код

Как и в Action.js, вы можете видеть, что я объединяю два запроса, что неправильно, я так думаю, пожалуйста, помогите мне, как объединить двазапросите использование axios.all и, пожалуйста, предложите правильную реализацию API-сервиса или что я могу сделать, чтобы улучшить его

APIService.js

import axios from 'axios';
import apiConfig from './apiConfig';
import UserSession from './userSession';
import history from '../utils/history/history';

const session = sessionStorage;

var axiosConfig = axios.create({
                  baseURL: apiConfig.baseUrl,
                  headers: {
                    Authorization: sessionStorage.getItem('token') != null ? 
                    `Bearer ${sessionStorage.getItem('token')}` : null,
                    Accept: 'application/json',
                   'Content-Type': 'application/json'
                  },
                timeout: 20000,
                responseType: 'json'
              });

 axiosConfig.interceptors.request.use((config) => {
    config.headers.Authorization =
        sessionStorage.getItem('token') != null ? `Bearer 
        ${sessionStorage.getItem('token')}` : null;
    return config;
 },(error) => Promise.reject(error));

const apiService = function(options) {
 const onSuccess = function(response) {
    if (response.status === 201) {
        return Promise.resolve(
            Object.assign(
                {},
                {
                    message: response.statusText
                }
            )
        );
    } else if (response.status === 200) {
        if ((response.data && response.data !== null) || response.data !== 
             undefined || response.data !== '') {
            return response.data;
        } else {
            return Promise.resolve(
                Object.assign(
                    {},
                    {
                        message: response.statusText
                    }
                )
            );
        }
    } else if (response.data.length < 1) {
        return Promise.reject(
            Object.assign(
                {},
                {
                    message: 'No Data'
                }
            )
        );
    } else {
        return response.data;
    }
};

const onError = function(error) {
    if (error.response) {
        if (error.response.status === 401) {
            sessionStorage.removeItem('token');
            window.location = '/login';
            return Promise.reject(error.response);
        } else if (error.response.status === 404) {
            return Promise.reject(
                Object.assign(
                    {},
                    {
                        message: error.response.statusText
                    }
                )
            );
        } else if (error.response.status === 500) {
            return Promise.reject(
                Object.assign(
                    {},
                    {
                        message: error.response.statusText
                    }
                )
            );
        } else {
            return Promise.reject(error.response.data);
        }
    } else if (error.request) {
        // The request was made but no response was received

        return Promise.reject(
            Object.assign(
                {},
                {
                    message: error.message
                }
            )
        );
        //return Promise.reject(error.message);
    } else {
        // Something else happened while setting up the request
        // triggered the error
        return Promise.reject(
            Object.assign(
                {},
                {
                    message: error.message
                }
            )
        );
    }
};

return axiosConfig(options).then(onSuccess).catch(onError);
};

export default apiService;

Запрос.js

import apiService from '../apiService';

export const FirstRequest = () => {
  return apiService({
    url: 'FirstURL',
    method: 'get',
  });
};


export const SecondRequest = () => {
  return apiService({
    url: 'SecondURL',
    method: 'get',
  });
};

Action.js

export const SomeHandler = () => (dispatch) => {
   dispatch({
    type: API_REQUEST
   });

 FirstRequest()
    .then((res) => {
        dispatch({
            type: API_SUCCESS
        });
         SecondRequest().then((res) => {
            dispatch({
              type: API_SUCCESS
            });
            dispatch({ type: VIEW1, payload: res });
          dispatch({ type: VIEW2, payload: res });
           }).catch((err) => {
           dispatch({
            type: API_FAILURE,
            payload: err
           });
        });


    })
    .catch((err) => {
        dispatch({
            type: API_FAILURE,
            payload: err
        });
    });
};

Answer 1

Прежде всего, не уверен, что вы хотите сделать это в вашем componentWillMount, потому что ваш компонент не будет отображаться, пока все это не будет сделано, лучше иметь его в componentDidMount и иметь некоторые состояния по умолчанию, которые будут обновляться после выполнения этих запросов.Во-вторых, вы хотите ограничить количество записываемых наборов состояний, поскольку они могут вызвать дополнительные повторные рендеры, вот решение с использованием async / await:

async componentDidMount() {
  const firstRequest = await axios.get(URL1);
  const secondRequest = await axios.get(URL2);
  const thirdRequest = await axios.get(URL3);

  this.setState({
    p1Location: firstRequest.data,
    p2Location: SecondRequest.data,
    p3Location: thirdRequest.data,
  });
}

Answer 2

Это никак не связано с axios.Вы можете объединить две асинхронные функции вместе в методе действия, используя библиотеку async:

async.parallel([
    getUsers,
    getComments
],
function(err, results) {
    // the results array will equal to [[], {'x': 'y'}] even though
    // the second function had a shorter timeout.
    // dispatch here
});

function getUsers(callback) {
    callback(null, [])
}

function getComments(callback) {
    callback(null, {'x': 'y'})
}