0

The full extent of my code. I downsized it here Need guidance! Trying to learn about fetch() and Promises to try and be more concise with my question.

The code essentially works. It's just that I don't know why it doesn't like it when I add another fetch()

export const addPlace = (placeName, streetName, city, region, postCode, country, location, image, coverImage) => {
return dispatch => {
    let authToken;
    dispatch(uiStartLoading());
    dispatch(authGetToken())
        .catch(() => {
            alert("No valid token found!");
        })
        .then(token => {
            authToken = token;
            return image = fetch("myappURL/storeImage",
            {
                method: "POST",
                body: JSON.stringify({ image: image.base64 }),
                headers: {
                    Authorization: "Bearer " + authToken,
                }
            }
        );  
    })
    .catch(err => {
        console.log(err);
        alert("Oops! Something went wrong, please try again1")
        dispatch(uiStopLoading());
    })
    .then(res => {
        if (res.ok) {
            return res.json();
        } else {
            throw(new Error());
        }
    })
    .then(parsedRes => {console.log(parsedRes);
        const placeData = {
            name: placeName,
            fullAddress: [streetName, city, region, postCode, country],
            shortAddress: [city, region],
            location: location,
            image: parsedRes.imageUrl,
            imagePath: parsedRes.imagePath,
            coverImage: parsedRes.coverImageUrl, // what I want to add
            coverImagePath: parsedRes.coverImagePath // what I want to add
        }; // this is the output
        return fetch("myappURL/places.json?auth=" + authToken, {
            method: "POST",
            body: JSON.stringify(placeData)
        });
    })
    .then(res => {
        if (res.ok) {
            return res.json();
        } else {
            throw(new Error());
        }
    })
    .then(parsedRes => {
        console.log(parsedRes);
        dispatch(uiStopLoading());
        dispatch(placeAdded());
    })
    .catch(err => {
        console.log(err);
        alert("Oops! Something went wrong, please try again2")
        dispatch(uiStopLoading());
    });
};

};

misterhtmlcss
  • 363
  • 1
  • 16
Reuben
  • 141
  • 12
  • What do you mean, `it doesn't like it`? What's the error? – CertainPerformance Aug 20 '18 at 09:16
  • @CertainPerformance the way the code is written works, I get an object that returns the url and urlPath of an image I uploaded on the server. – Reuben Aug 20 '18 at 09:21
  • However, as shown here https://stackoverflow.com/questions/51884204/need-guidance-trying-to-learn-about-fetch-and-promises?noredirect=1#comment90804250_51884204, when I modify the return to fetch() more than ONE image by using promise chaining, it throws an error back - i.e. 'it (the code) doesn't like it' – Reuben Aug 20 '18 at 09:22
  • ***what error*** and ***where*** are you adding another fetch – Jaromanda X Aug 20 '18 at 09:40
  • @JaromandaX the error is "Cannot read property 'ok' of undefined, and I want to add another fetch where it says return image = fetch(). I want to add another, coverImage = fetch() – Reuben Aug 20 '18 at 09:46
  • 1
    @Reuben, you should write `.then` before `.catch` always. Remove the `.catch` block before `.then(res => { if (res.ok) `. – Milan Kamilya Aug 20 '18 at 14:37
  • @Reuben as far as I understand it; not sure it's a rule or a guideline, but nesting of promises is frowned upon and you've done one step further and nested a fetch at the end of a nested promise after a .catch. It's really really hard to reason through due it's structure and lack of comments. I'd love to take a crack at it, but without comments I can't make the time. Also if you answered your own question as it's quite old; then add your solution and close it. – misterhtmlcss Nov 16 '18 at 16:44

0 Answers0