为何使用async/await、Promise.all与fetch时返回[object Promise]？

我帮你拆解下代码里的问题，以及对应的解决办法：

问题原因 #

1. requisicao方法没有返回请求结果
   你的requisicao是async函数，但里面执行完await Promise.all(...)后，没有把这个操作的结果return出去。async函数默认会返回一个Promise，如果没有显式return值，这个Promise最终会resolve为undefined。

2. map回调未返回fetch的Promise链
   在rotas.map(function(url) { ... })里，你执行了fetch(url)并处理了then回调，但没有把整个fetch的Promise链return出去。这导致map生成的数组里全是undefined，Promise.all实际上在等待一堆空值，而不是真正的请求Promise。

3. 直接打印Promise对象而非其结果
   conn.acessar()调用的是async函数，它的返回值本身就是一个Promise。你直接console.log(result_final)，自然会输出[object Promise]——因为Promise对象还没完成，你没等到它resolve出实际数据。

修复后的代码 #

class Conexao {
  constructor(loading) {
    this.loading = loading;
  }

  acessar(rota) {
    return this.requisicao(rota, 1);
  }

  async requisicao(rota, id) {
    let rotas = ['https://willianjusten.com.br/search.json'];
    rotas.push(rota);
    
    // 修复1：map回调返回fetch的Promise链
    const requests = rotas.map(function(url) {
      return fetch(url)
        .then(function(resp) {
          return resp.json();
        });
    });
    
    // 修复2：返回Promise.all的结果
    const results = await Promise.all(requests);
    return results;
  }
}

// 修复3：用await或.then处理Promise结果
async function getResult() {
  let conn = new Conexao(true);
  let result_final = await conn.acessar('https://jsonplaceholder.typicode.com/posts/');
  console.log(result_final);
}

getResult();

关键修复点说明 #

• 让map返回Promise：在map的回调里加上return，确保每个迭代项都是fetch请求的Promise，这样Promise.all才能正确等待所有请求完成并收集结果。
• 返回异步操作结果：在requisicao里，把await Promise.all(...)的结果赋值给变量并return，这样acessar返回的Promise最终会resolve为请求到的数据。
• 等待Promise完成：因为async函数返回的是Promise，必须用await（在async函数内部）或者.then()来获取最终结果，不能直接同步打印。比如：

  // 也可以用.then的方式
  let conn = new Conexao(true);
  conn.acessar('https://jsonplaceholder.typicode.com/posts/')
    .then(result_final => {
      console.log(result_final);
    });
  

内容的提问来源于stack exchange，提问作者Rafael Pelizza