时间戳

首页 > 解决方案 > 多个axios里面的useEffect

reactjs - 多个axios里面的useEffect

问题描述

我需要做这样的事情。

  const [token, setToken] = useState('')

const urlAuth = 'http://localhost:8624/login'
const bodyData = {
  username: 'training',
  password: 'traiOA9876'
}
const data = {
  headers: {
    'Content-Type': 'application/json'
  }
}

console.log(token)

const dataListUrl = 'http://localhost:8624/locations'
const headers2 = {
  headers :{
    'Authorization': `Token ${token}`,
    'Content-Type': 'application/json'
  }
}

useEffect(() => {  
  //console.log(token)
  async function getPost() {
    const response = await axios.post(urlAuth, bodyData, data )  
      console.log(response.data.token)
      setToken(response.data.token); 

  } 
  async function GetData(){

    const response2 = await axios.get(dataListUrl, headers2)
    console.log (response2)
  }

    getPost();
    GetData();
  
}, [setToken])

我需要进行第一次 axios 调用，以从服务器获取令牌。（这部分有效！！！）但是我需要在第二个 axios 调用中使用这个令牌，从 API 获取数据。在我的邮递员作品中，但在这里我无法解决第二部分。

我也试过这个，但没有奏效：

const [token, setToken] = useState('')

const urlAuth = 'http://localhost:8624/login'
const bodyData = {
  username: 'training',
  password: 'traiOA9876'
}
const data = {
  headers: {
    'Content-Type': 'application/json'
  }
}



console.log(token)

const dataListUrl = 'http://localhost:8624/locations'
const headers2 = {
  headers :{
    'Authorization': `Token ${token}`,
    'Content-Type': 'application/json'
  }
}

useEffect(() => {  
  //console.log(token)
  axios.post(urlAuth, bodyData, data )    
      .then((response) => {
        //console.log(response)
        let tokenRes = response.data.token;
        setToken(tokenRes)
          console.log(tokenRes)  
          axios.get(dataListUrl, headers2)
          .then((res) => {
            console.log(res)}) 
        
        } 
      )
   
  
}, [setToken])

感谢您的时间和帮助！

标签： reactjsaxios

解决方案

ReactsetState是异步的，这意味着你不能期望令牌在你调用setToken(). 为了解决这个问题，您需要将您的第二个 api 调用包装在一个作为依赖项useEffect传递的钩子中。token

useEffect(() => {
 // your getData api call goes here
}, [token])

推荐阅读