Reactjs Axios嵌套请求函数返回

我正试图从一个API中获取图像数据。要做到这一点，我首先需要得到它的ID，然后使用它来获得图像。为了维护干净的代码，我使用了一个函数来实现这一点，当我试图将响应返回到调用该函数的组件时遇到了问题

getNextImageData

export const getNextImageData = () => {
  const apiToken = lscache.get('apiToken')
  return(
    axios({
      method: 'get',
      url: 'https://myapiurl/images/',
      params: {
        limit: '1',
        doc_cat: ''
      },
      responseType: 'json'
    })
      .then(response => {
        lscache.set('imageData', response, 30)
        axios({
          method: 'get',
          url: 'https://myapiurl/images/' + response.data[0].id + '/',
        })
          .then(response => {
            return(response.data)
          })
      })
  )
}

export const getNextImageData = () => {
  const apiToken = lscache.get('apiToken')
  return axios({
    method: 'get',
    url: 'https://myapiurl/images/',
    params: {
      limit: '1',
      doc_cat: ''
    },
    responseType: 'json'
  })
    .then(response => {
      lscache.set('imageData', response, 30)
      return axios({
        method: 'get',
        url: 'https://myapiurl/images/' + response.data[0].id + '/',
      })
    })
    .then(response => {
      return response.data
    })
}

MyClass

class MyClass extends Component {
  constructor(props){
    super(props);
    this.state = {
      image: undefined
    }
  }
  async componentDidMount() {
    const data = await getNextImageData()
    this.setState({
      image: data,
    })
  }
  render() {
  // something
  }
}

class MyClass extends Component {
  constructor(props){
    super(props);
    this.state = {
      image: undefined
    }
  }
  componentDidMount() {
    getNextImageData()
    .then(data => {
      this.setState({
        image: data,
      })
    })
  }
  render() {
  // something
  }
}

---

当我将代码直接粘贴到我的组件中时，我没有收到任何返回，它工作得很好，但我想在函数中使用它

一旦所有数据就绪，就必须设置状态

因此，您可以在最后一次axios调用中设置状态

您还可以使用callbackHandler或类似的东西来保持代码的整洁

class MyClass extends Component {
  constructor(props){
    super(props);
    this.state = {
      image: undefined
    }
  }
  async componentDidMount() {
    const nextImageResponse = await getNextImageData()
    // If your first response is success make the next call
    if( nextImageResponse.hasOwnProperty('data') ){
      lscache.set('imageData', response, 30)
        axios({
          method: 'get',
          url: 'https://myapiurl/images/' + nextImageResponse.data[0].id + '/',
        })
          .then(response => {
            if( response.hasOwnProperty('data'){
              this.setState({ image: response.data, nextImage: nextImageResponse.data });       
            }
        })
    }
  }
  render() {
  // something
  }
}

试试这个：

export const getNextImageData = async () => {
  const apiToken = lscache.get('apiToken')
   const data = await axios({
      method: 'get',
      url: 'https://myapiurl/images/',
      params: {
        limit: '1',
        doc_cat: ''
      },
      responseType: 'json'
    });
const firstResponse = await data; //
// set local storage 
lscache.set('imageData', firstResponse, 30)
const second = await axios({
          method: 'get',
          url: 'https://myapiurl/images/' + firstResponse.data[0].id + '/',
        });
const thirdResponse = await second.data;
return thirdResponse;
}

---

它起作用了吗

我把它套错了，你不用一个

然后
放在另一个
然后
里面，而是在同一个层次上使用它们。并且每个axios调用都遵循一个
return
语句。这样做，我甚至不需要使用async/await，而是使用了另一个
promise

getNextImageData

export const getNextImageData = () => {
  const apiToken = lscache.get('apiToken')
  return(
    axios({
      method: 'get',
      url: 'https://myapiurl/images/',
      params: {
        limit: '1',
        doc_cat: ''
      },
      responseType: 'json'
    })
      .then(response => {
        lscache.set('imageData', response, 30)
        axios({
          method: 'get',
          url: 'https://myapiurl/images/' + response.data[0].id + '/',
        })
          .then(response => {
            return(response.data)
          })
      })
  )
}

export const getNextImageData = () => {
  const apiToken = lscache.get('apiToken')
  return axios({
    method: 'get',
    url: 'https://myapiurl/images/',
    params: {
      limit: '1',
      doc_cat: ''
    },
    responseType: 'json'
  })
    .then(response => {
      lscache.set('imageData', response, 30)
      return axios({
        method: 'get',
        url: 'https://myapiurl/images/' + response.data[0].id + '/',
      })
    })
    .then(response => {
      return response.data
    })
}

MyClass

class MyClass extends Component {
  constructor(props){
    super(props);
    this.state = {
      image: undefined
    }
  }
  async componentDidMount() {
    const data = await getNextImageData()
    this.setState({
      image: data,
    })
  }
  render() {
  // something
  }
}

class MyClass extends Component {
  constructor(props){
    super(props);
    this.state = {
      image: undefined
    }
  }
  componentDidMount() {
    getNextImageData()
    .then(data => {
      this.setState({
        image: data,
      })
    })
  }
  render() {
  // something
  }
}

getNextImageData函数没有返回您试图从axios获得的承诺。。尝试在以下之前添加return语句：return axios（{method:'get'..@jure不幸的是，我已经尝试过了，我删除了它，因为我认为它会干扰函数返回。但是由于它可能会引起混乱，我将编辑我的问题，感谢这种方式它不起作用。相反，请从
getNextImageData（）返回
承诺
然后将该承诺解析到您的组件中。@code我可以解析我的组件中最后一个
承诺，好的。但是我有两个嵌套承诺，我该怎么做？解析组件中的两个嵌套请求？将这两个axios调用划分为两个不同的函数？谢谢您的回答。但是正如我所说的，如果我使用我的代码我想做的是使用一个函数调用，在组件代码之外使用axios逻辑，使代码尽可能干净