join method inside axios call

Question

• I am doing a join in the axios call.
• since doing two different api calls.
• for performance is this the good way.
• or do I need to use async await and then do join.
• providing code snippet below

export function getSearch(value) {
    console.log('-- getSearch value', value);
    return dispatch => {
        if (value.length) {
            if (typeof this._source !== 'undefined') {
                this._source.cancel('Operation canceled due to new request');
            }
            this._source = axios.CancelToken.source();
            return axios
                .get(
                    `http://localhost:787878/hold/search?mode=Smart&value=${value}`,
                    {
                        cancelToken: this._source.token,
                    }
                )
                .then(response => {

                    console.log('search response.data-->', response.data);
                    let values = response.data.map(filterSearch => {
                        if (filterSearch.playerIDs) {
                            console.log(
                                'search response.data playerIDs',
                                filterSearch.playerIDs[0]
                            );
                            return filterSearch.playerIDs[0].number + ',';
                        }

                    });
                    console.log(
                        'search response.data join--->',
                        values.join('')
                    );
                    axios
                        .get(
                            `http://localhost:787878/hold/animalworldCardList/?playerID=${values.join(
                                ''
                            )}&isHistory=false`,
                            //localhost:787878/hold/ce-affiliation/?animalPimsId=${animalPimsId}&isHistory=${isHistory}`,
                            {
                                cancelToken: this._source.token,
                            }
                        )
                        .then(responseplayerIDs => {
                            console.log(
                                'search response.data -->',
                                responseplayerIDs
                            );
                            dispatch({
                                type: ANIMAL_SEARCH_DATA,
                                payload: {
                                    animalSearch: response.data,
                                    playerIDs:
                                        responseplayerIDs.data.animalsInfo,
                                },
                            });
                            //  callBack(response);
                        })
                        .catch(error => {
                            if (axios.isCancel(error)) {
                                console.log(
                                    '-- Request canceled',
                                    error.message
                                );
                            } else {
                                console.log('-- Error', error.message);
                            }
                        });
                })
                .catch(error => {
                    if (axios.isCancel(error)) {
                        console.log('-- Request canceled', error.message);
                    } else {
                        console.log('-- Error', error.message);
                    }
                });
        } else {
            dispatch({
                type: ANIMAL_SEARCH_DATA,
                payload: [],
            });
        }
    };
}

Answer 1

Using Array.join is unrelated to usage of async and await. Also note that the time it takes to call Array.join is insignificant in comparison to the time it takes to make the two API calls.

You can consider call1().then(data => call2(data)) roughly equivalent to const data = await call1(); call2(data). There's no (obvious) performance gain to be made here by using async/await over then. You would have a slight readability gain though. Note that your second call is dependent on your first call. When this is not the case you can get a performance improvement by making both calls simultaneously like so Promise.All([call1(), call2()]). That is not applicable here, but maybe this was what you had in mind?

The vast majority of the time here is spent waiting for the API calls. If you have ownership of the back end and want to improve performance, then I would suggest you consider creating a new endpoint that better fits your need so you only need to make one API call.

Also I prefer this._source !== undefined over typeof this._source !== 'undefined', but that's only if you're sure that this._source is declared.

In general I think this code looks fine.