如何讓 axios 在 React 中一個接一個地調用

Question

在執行一個事件后如何調用 axios 調用另一個 axios 以獲取最新狀態

onHandleDeactivate 我想從 UI 中停用特定 ID，在成功停用后，我必須獲取該 ID 的最新狀態，例如“停用”，以便我需要調用 /get API。

注意：我不想重新加載/刷新頁面以獲取該 ID 的狀態。 但我可以撥打 axios /get 電話以獲取最新狀態。

我們怎樣才能做到這一點？

1. 第一次調用/停用 Axios
2. 然后調用 /get 以獲取該 ID 的最新狀態

現在使用下面的代碼它並沒有停用它只是調用/get axios。 不是 /deactivate

onHandleDeactivate = () => {
    let payLoad = {
      "Id": this.state.Id,      
    };
    axios.post('/deactivate', payLoad).then((response) => {
      this.closeDeactivateModal()
      this.setState({ successMessage: `Deactivated successfully.` });    
    }).catch(error => {
      this.setState({ errorMessage: error.message })
    }),
    axios.get('/get').then((response) => {
       this.setState({ result: response });
    }).catch((error) => {
      this.setState({ message: error.message}) 
    })
  }

Answer 1

您可以為此使用異步等待，或者將您的第二個請求移至 then({...})

請閱讀異步等待參考

這是一個使用異步等待的例子

onHandleDeactivate = async () => {
  let payLoad = {
    Id: this.state.Id,
  }
  try {

    // first call
    let response = await axios.post('/deactivate', payLoad)
    this.closeDeactivateModal()
    this.setState({ successMessage: `Deactivated successfully.` })

    // second call
    try {
      let result = await axios.get('/get')
      this.setState({ result: result })
    } catch (error) {
      this.setState({ message: error.message })
    }

  } catch (error) {
    this.setState({ errorMessage: error.message })
  }
}

Answer 2

你可以讓你打電話給另一個.then以等待第一個電話。

   onHandleDeactivate = () => {
        let payLoad = {
          "Id": this.state.Id,      
        };
        axios.post('/deactivate', payLoad).then((response) => {
          this.closeDeactivateModal()
          this.setState({ successMessage: `Deactivated successfully.` });    
        })
        .then(() => {
           axios.get('/get').then((response) => {
             this.setState({ result: response });
           }).catch((error) => {
             this.setState({ message: error.message}) 
           })
        }).catch(error => {
          this.setState({ errorMessage: error.message })
        }),
      
     }