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

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函数时）映射似乎还没有完成。所以它returns“承诺”而不是它应该的列表。

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

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

    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 函数中 returning 任何东西。您还需要在 .map 将 return 的承诺数组上使用 Promise.all() （因为您传递给它的函数是 async 这意味着它将始终包装 return 在承诺中。

此外，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 之一是 returning HTML 而不是 JSON 导致 .json() 抛出。

Array.prototype.map() 是一种组合函数。它迭代一个数组，处理该数组的值，然后 returns 一个具有处理值的相同大小的新数组。从字面上看，它是一种将映射值到另一个值的方法。

在您的示例中，您试图将网络响应映射到其他网络请求。如果不return，言外之意就是“我不关心处理后的值”，此时你还不如用.forEach.

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

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

How do i use fetch with a result from a fetch in the same function with sync await

javascript

asynchronous

reactjs

fetch-api