我收到错误“无法读取未定义的属性‘然后’”答案

【问题标题】：i got error " Cannot read property 'then' of undefined"我收到错误“无法读取未定义的属性‘然后’”
【发布时间】：2021-03-03 15:00:52
【问题描述】：

我收到此错误：

TypeError: 无法读取控制器中未定义的属性“then”

[控制器]

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

[数据模型]

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

【问题讨论】：

标签： javascript promise fetch

【解决方案1】：

您应该在 getList() 函数中返回承诺。

否则没有返回的函数将返回 undefined。

这你会得到错误“...cant read then of undefined”

你的代码应该是：

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

}

【讨论】：

【解决方案2】：

错误实际上已经很清楚了。您的函数 getList() 不会返回任何将在 JavaScript 中成为 undefined 的内容。您应该在函数结束时返回“某物”。如果你想在函数的返回值上使用.then，你可能想返回一个"Promise"

fetch 函数无论如何都会返回一个Promise。所以可以简单地返回。你可以找到更多关于 fetch here https://javascript.info/fetch

所以一个更整洁的选择是

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

【讨论】：

【解决方案3】：

您收到该错误是因为 DataModel.getList() 没有返回 Promise，因此您可以访问 Promise then 链。您所要做的就是在fetch 函数之前的getList 中添加一个返回键，这样getList 方法就可以返回一个resolve Promise 而不是undefined

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

【讨论】：

【解决方案4】：

[服务]

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

[控制器]

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

【讨论】：

【解决方案5】：

您需要返回promise 才能执行.then

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

【讨论】：