Есть ли разница в данных / обещаниях, полученных от axios get и post?

Question

Я работаю над приложением React, которое использует импортированный объект с запросом get к API и запросом публикации к связанному API.

При создании нового экземпляра моей службы вИнтерфейс в React, я могу успешно использовать функции «.then» & «.catch» для доступа к возвращенным данным ТОЛЬКО из запроса get.

При использовании запроса post из того же объекта, при попыткечтобы получить доступ к объекту ответа, я получаю (перефразируя) '.then' не функцию от undefined.

Только когда я явно записываю запрос на публикацию в моей функции отправки формы (без использования службы) иобрабатывая объект, я могу проверить ответ и затем установить состояние.

Каков подходящий / лучший способ использования axios в React и почему я не могу получить доступ к объекту ответа при созданииновый экземпляр службы ?? Очень ценится!

Сервис:

import axios from 'axios';

class ProductServices {
  getAllProducts(){
    return axios.get('https://somecustomAPIURL')
  }

  postProduct(somePathConfig){
    axios.request({
      url: 'https://somecustomAPIURL' + somePathConfig,
      method: 'post',
      headers: {'some-custom-header': process.env.REACT_APP_API_POST_KEY}
    })
  }

}

export default ProductServices;

React Code instantiating and consuming the service (note, that getAllProducts works just fine, but trying to consume a response object in postProduct returns an '.then' is undefined)


  constructor(){
    super();
    this.state = {
      products: [],
      productID: null,
      showModal: false
    }
    this.ProductServices = new ProductServices();
  }

  getAllProducts = () => {
    this.ProductServices.getAllProducts()
    .then((response) => {
      let items = response.data.data.items;
      this.setState({
        products: items,
        productID: items[0].id
      });
      return response;
    })
    .catch((error) => {
      console.log('Error!', error);
      return error;
    })
  }

  handleFormSubmit = (e) => {
    e.preventDefault();
    let productID = this.state.productID;
this.ProductServices.postProduct(productID)
    .then((response) => {
      this.setState({showModal: true}, () => console.log('Success!'));
      return response;
    })
    .catch((err) => {
      console.log('Error!', err);
    })
  }

Answer 1

Вы пропустили return до axios.request.

import axios from 'axios';

class ProductServices {
...
  postProduct(somePathConfig){
    return axios.request({
      url: 'https://somecustomAPIURL' + somePathConfig,
      method: 'post',
      headers: {'some-custom-header': process.env.REACT_APP_API_POST_KEY}
    })
  }
...

Также вместо axios.request вы можете использовать axios.post как axios.get

return axios.post(url, body, { headers });
return axios.get(url, { headers });
return axios.put(url, body, { headers });
return axios.delete(url, { headers });
return axios.request(axiosConfigOptions);