javascript - 从 Reducer Giving Error 调用服务文件中的 Axios API

Question

在 react 中，我正在尝试“通过 Axios 进行 Rest API 调用”。我制作了一个服务文件，然后当 reducer 尝试 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;

错误:

Answer 1

如果您使用类，则必须使用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
    }
}

您不需要使用类 来导出函数。您可以导出函数本身(在本例中，在对象内部):

const getItemsAPI = {

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

  }

export default getItemsAPI;

如果你使用上面的代码，你不需要创建一个实例。您可以简单地使用该对象(就像您在 OP 中所做的那样)。

也只是一个注释。 getItems 将返回一个 Promise。为了获取数据，您必须在减少之前等待或解决Promise。