Вызов Axios API попал в служебный файл из-за ошибки редуктора - PullRequest
Новая
       30

Вызов Axios API попал в служебный файл из-за ошибки редуктора

1 голос
/ 01 октября 2019

В ответ я пытаюсь сделать "Rest API call через Axios". Я сделал файл службы, а затем, когда редуктор пытается console.log вывод службы. это дает ошибку. Пожалуйста, помогите.

someReducer.js 

import getItemsAPI from '../../services/service1';

...

case "GET_ITEM_LIST": {
    let data = getItemsAPI.getItems();
    console.log(data);
    return {
        ...state,
        items: data
    }
}

service1.js 

class getItemsAPI {

    getItems() {
      return this.axiosInstance
        .get('https://jsonplaceholder.typicode.com/users/')
        .then((response) => response.data);
    }

  }

export default getItemsAPI;

Ошибка:

enter image description here

1 Ответ

3 голосов
/ 01 октября 2019

Если вы используете class, вы должны использовать ключевое слово new для создания экземпляра. Затем вы можете использовать его методы: 

import getItemsAPI from '../../services/service1';
const getItemsInstance = new getItemsApi();

...

case "GET_ITEM_LIST": {
    let data = getItemsInstance.getItems();
    console.log(data);
    return {
        ...state,
        items: data
    }
}

Вам не нужно , чтобы использовать class для экспорта функции. Вы можете экспортировать саму функцию (в данном случае, внутри объекта): 

const getItemsAPI = {

    getItems: () => {
      return axiosInstance
        .get('https://jsonplaceholder.typicode.com/users/')
        .then((response) => response.data);
    }

  }

export default getItemsAPI;

Если вы используете приведенный выше код, вам не нужно создавать экземпляр. Вы можете просто использовать объект (как вы делаете в OP).

Просто заметка. getItems вернет Promise. Чтобы получить данные, вы должны await или разрешить Promise, прежде чем уменьшать.

...