Question

我有一个调用服务的模块

let getData =  () => fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => response.json())
  .then(json => (getData = json));

export {getData };

我尝试登录来像这样控制台结果（并将其放在HTML页面上）

import { getData } from "./api";


 const app = document.querySelector("#target");
    let data = getData()
      .then(res => res.map(r => r.title).join("\n"))
      .then(res => (data = res));
      console.log(data);
      app.innerHTML = data;

但是，我得到了一个无法解决的承诺，例如[object Promise]

我尝试了一些也不起作用的变体

// none of these work don't work

// .then(async res => data = await res);
// .then(res => (data = Promise.resolve(res)));

关于我在做什么错的任何建议？

Answer 1

首先，您不应该在then中使用第二个getData-这就是结果，它会重新分配变量。然后更改代码中的其他内容-主要是语法错误和错误的方法：

let getData = () => fetch("https://jsonplaceholder.typicode.com/posts").then(response => response.json());

const app = document.querySelector("#target");
getData()
  .then(res => res.map(r => r.title).join("<br>"))
  .then(res => app.innerHTML = res);

<p id="target"></p>

Answer 2

我认为您必须“返回” response.json（），然后执行另一个then（）并且最好包含cathc以查看问题

阅读发出提取请求 https://developer.mozilla.org/it/docs/Web/API/Fetch_API/Using_Fetch

    let getData = () => fetch("https://jsonplaceholder.typicode.com/posts")
.then(function (response) {
    return response.json();
    })
    .catch(function (err) {
        console.log(err);
    });
const app = document.querySelector("#target");
getData()
 .then(res => res.map(r => app.innerHTML += r.title));

如何在返回承诺的api调用后检索结果

2 个答案: