React useEffect中调用axios获取token后二次接口请求失败如何解决

问题根因 #

• setToken 是React的异步状态更新方法，调用后不会立刻修改当前渲染周期的token变量值。你提前声明的headers2在组件首次渲染时就已经生成，内部的Authorization取值是初始空字符串，后续setToken触发重渲染才会生成新的headers2，但你两次代码里发起get请求时都用的是初始生成的旧headers2，所以请求头带的token是空值。
• 第一段代码中你没有等待登录请求完成就直接发起了拉取数据的请求，登录接口还没返回token，get请求就已经发出去了，必然拿不到正确的token。

修复方案 #

方案一（推荐，无需依赖state） #

拿到登录接口返回的token后直接拼入get请求的请求头，不需要走state存储，避免异步更新的问题，代码示例：

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

useEffect(() => {  
  const fetchData = async () => {
    // 先等登录请求完成拿到token
    const authRes = await axios.post(urlAuth, bodyData, postConfig)
    const token = authRes.data.token
    // 直接把拿到的token拼入get请求头
    const getConfig = {
      headers: {
        'Authorization': `Token ${token}`,
        'Content-Type': 'application/json'
      }
    }
    const dataRes = await axios.get(dataListUrl, getConfig)
    console.log(dataRes)
  }
  fetchData()
}, [])

方案二（需要把token存state的场景） #

拆分两个useEffect，第一个负责登录拿token存state，第二个监听token变化，token有值后再发起拉取数据的请求：

const [token, setToken] = useState('')
const urlAuth = 'http://localhost:8624/login'
const bodyData = {
  username: 'training',
  password: 'traiOA9876'
}
const postConfig = {
  headers: {
    'Content-Type': 'application/json'
  }
}
const dataListUrl = 'http://localhost:8624/locations'

// 第一个useEffect：登录获取token并存入state
useEffect(() => {
  const login = async () => {
    const res = await axios.post(urlAuth, bodyData, postConfig)
    setToken(res.data.token)
  }
  login()
}, [])

// 第二个useEffect：token变化后，如果有值就拉取业务数据
useEffect(() => {
  // 避免token为空时发无效请求
  if (!token) return
  const getBusinessData = async () => {
    const getConfig = {
      headers: {
        'Authorization': `Token ${token}`,
        'Content-Type': 'application/json'
      }
    }
    const res = await axios.get(dataListUrl, getConfig)
    console.log(res)
  }
  getBusinessData()
}, [token])

内容的提问来源于stack exchange，提问作者ddaudiosolutions