消除“axios”嵌套调用中的竞争条件

Question

在 axios 的 API 请求中消除竞争条件的好方法是什么？我有这个：

rest.outerCall(id).then(results => {
    let {data} = results;

    for (let i = 0; i < data.length; i++) {
        rest.innerCall(data[i].id).then(innerData => {
             data[i].name = innerData.name;
        });
    }
    this.setState({
        results: results.data
    });
});

outerCall 和 innerCall 都执行 axios.get(...)（在 rest 文件中）。 setState() 在 innerCall 执行之前执行。我怎样才能让 setState 在 innerCall 完成之前等待？

Answer 1

您很可能会想要使用类似于 Promise.all() 的东西。

请参阅下面的实际示例。

// Outer Call.
const outercall = (id) => {
  return new Promise((resolve, reject) => {
    return setTimeout(() => {
      console.log('outercall', time())
      return resolve({data: ['1', '2', '3', '4']})
    }, 1000)
  })
}

// Inner Call.
const innercall = (id) => {
  return new Promise((resolve, reject) => {
    return setTimeout(() => {
      console.log(`innercall: ${id}`, time())
      return resolve(`innercall: ${id}`)
    }, 5000)
  })
}

// Set State.
const setState = (state) => console.log('setState', state)

// Run.
const run = () => {
  
  // State.
  console.log('start', time())
  
  // Outer Call.
  outercall().then(({data}) => {
    
    // Inner Call Requests.
    const requests = data.map(innercall)
    
    // Execute each using Promise.all().
    Promise.all(requests).then((result) => {
    
      // Set State.
      setState({result})
    })
  })
}

// Time.
const time = () => new Date() * 1


// Run.
run()

消除“axios”嵌套调用中的竞争条件

Eliminate race condition in `axios` nested calls

reactjs

axios