Promise.then is not a function - handling multiple API calls in React
javascript, promise, react-select, reactjs
Solution
Your problem is that `getAsync` does not always return a promise, so you could not chain `.then(…)` to every call. When there is no input, you were returning a plain object - instead you need to return a promise that is resolved with that object:
if (!input) {
return Promise.resolve({ options: [] });
}
Problem
I'm using react-select to auto-complete options in a search bar. The search bar displays the results in one of two categories, depending on which API endpoint it hits. Right now, it works with data from either one point or the other, but I'm having trouble returning data from both endpoints to react-select's `loadOptions` parameter. From this answer about multiple API calls, I decided to use promises to return all the data at once, but I get the error `Uncaught TypeError: promise.then is not a function at Async.loadOptions` Here's my code for `loadOptions`: ``` const getAsync = (tripId, destinationIndex, input) => { if (!input) { return { options: [] } } function getMusement(input) { return new Promise(function(resolve, reject) { TVApi.musement.autocomplete(input) .then((m) => { const musementOptions = m.map(musementToOption).slice(0, 4) return resolve(musementOptions) }) }) } function getFourSquare(tripId, destinationIndex, input) { return new Promise(function(resolve, reject) { TVApi.spot.autocomplete(tripId, destinationIndex, input) .then((fs) => { const fsOptions = fs.map(spotToOption).slice(0, 4) return resolve(fsOptions) }) }) } return Promise.all([getMusement(input), getFourSquare(tripId, destinationIndex, input)]) .then((allData) => { const merged = [].concat.apply([], allData) console.log(JSON.stringify(merged)) // logs out with correct data return {options: merged} }) } ```