javascript - i got error " Cannot read property 'then' of undefined" - Stack Overflow

admin管理员组

文章数量:1316023

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);
        })
    }
}

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);
        })
    }
}

• javascript
• promise
• fetch

Share Improve this question Follow edited Nov 20, 2020 at 7:26 Yoshi 54.7k1414 gold badges9191 silver badges107107 bronze badges asked Nov 20, 2020 at 7:21 JAE SEOP YOOJAE SEOP YOO 3911 silver badge44 bronze badges 0

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

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);
        })
    }
}

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);
        });
    });
  },
};

[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);
  })
}

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);
            });
       }
}

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);
    })
}

}

本文标签： javascripti got error quot Cannot read property 39then39 of undefinedquotStack Overflow