如何在同步等待的同一函数中使用 fetch 和 fetch 的结果

Question

promise 创建一个像这样的数组，取自控制台：

(6) [Promise, Promise, Promise, Promise, Promise, Promise]
0: Promise {<fulfilled>: undefined}
1: Promise {<fulfilled>: undefined}
2: Promise {<fulfilled>: undefined}
3: Promise {<fulfilled>: undefined}
4: Promise {<rejected>: SyntaxError: Unexpected token < in JSON at position 0}
5: Promise {<fulfilled>: undefined}
length: 6

无法使用。

代码是这样的：

export default async function getData() {
  let response = await request('http://localhost:2000/api/ves.json').then((data) => fetch(data));
  
  let store = await response.json();
  let list = await  store.map(async (input, index)=>{
    let details = await request(`http://localhost:2000/api/${input.id}.json`).then((data) => fetch(data));
   let foo = await details.json();
   console.log(foo);
    input = await {...input, ...foo};
  });
  
  return  list;
}

此时，返回列表（使用 useData 函数时）映射似乎还没有完成。所以它返回“promise”而不是它应该返回的列表。

目的是组合对象。这不是通过使用来自第一个对象（在对象数组中）的信息来从第二个对象获取信息。然后将第二个对象推入第一个对象，在数组中的同一点检索信息以获得第二个对象。

如果我也这样做，也会出现同样的问题

    input = await {...input, ...foo};
  }});
  await Promise.all(list)
  return  list;

或

   console.log(foo);
    input = await {...input, ...foo};
  }});
  let fish = await Promise.all(list)
  return  fish;

给出控制台错误

(6) [undefined, undefined, undefined, undefined, undefined, undefined]

这个useData函数是通过这个在react页面中调用的。

  const [ves] = useData();

      useEffect(()=>{
    
        console.log(ves);
      },[ves])

Answer 1

您没有在 .map 函数中返回任何内容。您还需要在.map 将返回的承诺数组上使用Promise.all()（因为您传递给它的函数是async，这意味着它将始终将返回包装在Promise 中。

另外，input = await {...input, ...foo}; 对我来说真的没有意义。您等待承诺，而不是同步的值分配。

export default async function getData() {
  let response = await request('http://localhost:2000/api/ves.json').then((data) => fetch(data));

  let store = await response.json();
  let list = store.map(async(input, index) => {
    let details = await request(`http://localhost:2000/api/${input.id}.json`).then((data) => fetch(data));
    let foo = await details.json();
    console.log(foo);
    // Have to return something within the .map
    return {
      ...input,
      ...foo
    };
  });
  
  // Have to wait for all the mapped promises to resolve
  const resolvedList = await Promise.all(list);

  return resolvedList;
}

还有一个问题是您没有.catch 任何可能在提取期间发生的错误。我明白了

Promise {<rejected>: SyntaxError: Unexpected token < in JSON at position 0}

这意味着其中一个 API 返回的是 HTML 而不是 JSON，这会导致 .json() 抛出。

---

Array.prototype.map() 是一种组合函数。它迭代一个数组，处理该数组的值，并返回一个与处理后的值相同大小的新数组。将其视为一种将值映射到另一个值的方式。

在您的示例中，您尝试将网络响应映射到其他网络请求。如果你不返回，则暗示“我不关心处理后的值”，此时你不妨使用.forEach。

您确实在意回复。因此，您应该在 map 函数中返回值（返回值是解析为数据的承诺），然后 Promise.all() 映射数组，以便它解包为实际数据数组。