Axios嵌套请求函数返回

Question

我正在尝试从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)
          })
      })
  )
}

我的课

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

我从返回中得不到任何东西，当我将代码直接粘贴到我的组件中时，它工作正常，但我想在函数内部使用它

Answer 1

我错误地嵌套它，你没有在另一个then里面使用then，你在同一级别上使用它们。每个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)
      return axios({
        method: 'get',
        url: 'https://myapiurl/images/' + response.data[0].id + '/',
      })
    })
    .then(response => {
      return response.data
    })
}

我的课

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

Answer 2

准备好所有数据后，必须设置状态。

所以你在最后一个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
  }
}

Answer 3

试试这个：

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;
}

它有用吗？