CODEWITHSUNDEEP
javascriptpromisefetch
JAE SEOP YOO
JAE SEOP YOO

Reputation: 39

i got error " Cannot read property 'then' of undefined"

Im getting this error:

TypeError: Cannot read property 'then' of undefined in controller

[controller]

fetchGameData() {
  DataModel.getList().then(data => {
    console.log(data);
  })
}

[DataModel]

export default {
    getList() {
        fetch('URL')
        .then((res) => {
            return Promise.resolve(res.json());
        })
        .catch((err) => {
            console.log("Fetch Error!!!", err);
        })
    }
}

Upvotes: 3

Views: 4889

Answers (5)

habib chabbi
habib chabbi

Reputation: 98

You should return the promise inside your getList() function.

otherwise a function with no return will return undefined.

And this you will have the error "...cant read then of undefined"

your code should be :

export default {
getList() {
    return fetch('URL')
    .then((res) => {
        return Promise.resolve(res.json());
    })
    .catch((err) => {
        console.log("Fetch Error!!!", err);
    })
}

}

Upvotes: 0

canbax
canbax

Reputation: 3856

The error is already clear actually. Your function getList() does not return anything which is going to be undefined in JavaScript. You should return "something" at the end of your function. If you want to use .then on the return value of your function, you probably want to return a "Promise"

fetch function will return a Promise anyway. So can simply return that. You can find more info about fetch here https://javascript.info/fetch

So a neater alternative would be

export default {
    getList() {
        return fetch('URL')
        .then((res) => {
            return Promise.resolve(res.json());
        })
        .catch((err) => {
            console.log("Fetch Error!!!", err);
        })
    }
}

Upvotes: 6

Yves Kipondo
Yves Kipondo

Reputation: 5623

You are getting that error because the DataModel.getList() doesn't return a Promise so you can have access to Promise then chain. All you have to do is to add a return keywork in the getList before the fetch function so the getList method can return a resolve Promise instead of undefined

export default {
    getList() {
        return fetch('URL')
            .then((res) => {
                return Promise.resolve(res.json());
            })
            .catch((err) => {
               console.log("Fetch Error!!!", err);
            });
       }
}

Upvotes: 0

Khanh Le Tran
Khanh Le Tran

Reputation: 900

[Service]

async function getList() {
      const result = await fetch('URL')
        .then((res) => {
            return Promise.resolve(res.json());
        })
        .catch((err) => {
            console.log("Fetch Error!!!", err);
        })
      return result.json();
}

[controller]

fetchGameData() {
  DataModel.getList().then(data => {
    console.log(data);
  })
}

Upvotes: 0

Aditya Menon
Aditya Menon

Reputation: 774

You need to return a promise to do .then

export default {
  getList() {
    return new Promise((resolve, reject) => {
        fetch("URL")
        .then((res) => {
          resolve(res.json());
        })
        .catch((err) => {
          console.log("Fetch Error!!!", err);
        });
    });
  },
};

Upvotes: 1

Related Questions