如何确保Fetch API中填充了数组？

Question

const userfetched =[];
fetch('https://jsonplaceholder.typicode.com/users').then(response=> response.json()).then(user=>userfetched.push(user));
console.log(userfetched)

在这里它输出空数组。

但是如果我使用以下代码：

const userfetched =[];
fetch('https://jsonplaceholder.typicode.com/users').then(response=> response.json()).then(user=>console.log(user));
console.log('end')

它输出end然后是数组值。

我如何等待直到获取响应被填充并对其进行迭代？

Answer 1

只需在获取承诺解析并解析为json之后放入console.log(userfetched) ：

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(user => { 
      console.log(user) 
      // and do whatever you wanna do here
  });

Answer 2

featch完成后，调用callApi函数，并将响应推送到数组并控制结果

其工作异步更改以同步

const userfetched = [];
class App extends Component {

     async callApi() {
       var res = await fetch('https://jsonplaceholder.typicode.com/users')
       var result = await res.json()
       console.log(JSON.stringify(result))
     }

      componentDidMount() {
        this.callApi()
      }

   render{
        return( //do something.... )
   }
}