Возврат вложенной функции запроса Axios - PullRequest
Новая
       21

Возврат вложенной функции запроса Axios

0 голосов
/ 30 апреля 2019

Я пытаюсь получить данные изображения из API и.Для этого мне сначала нужно получить его идентификатор, а затем использовать его для получения изображения.Чтобы поддерживать чистый код, я использую функцию для этого, у меня возникают проблемы, когда я пытаюсь вернуть ответ на компонент, который я вызываю функцию.

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

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

Я ничего не получаю от возврата, когда я вставил код прямо в свой компонент, он работал нормально, но я хочу использоватьэто внутри функции

Ответы [ 3 ]

1 голос
/ 30 апреля 2019

Я вложил это неправильно, вы не используете 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
    })
}

MyClass 

class MyClass extends Component {
  constructor(props){
    super(props);
    this.state = {
      image: undefined
    }
  }
  componentDidMount() {
    getNextImageData()
    .then(data => {
      this.setState({
        image: data,
      })
    })
  }
  render() {
  // something
  }
}
0 голосов
/ 30 апреля 2019

Попробуйте это: 

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

Это сработало?

0 голосов
/ 30 апреля 2019

Вы должны установить состояние, как только у вас будут все данные готовы.

чтобы вы установили состояние внутри последнего вызова 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
  }
}
...