从 Reducer Giving Error 在服务文件中调用 Axios API

Question

在反应中，我试图通过 Axios 进行“Rest API 调用”。我制作了一个服务文件，然后当 reducer 尝试 console.log 服务的输出时。它给出了错误。请帮忙。someReducer.jsimport getItemsAPI from '../../services/service1';...case "GET_ITEM_LIST": {    let data = getItemsAPI.getItems();    console.log(data);    return {        ...state,        items: data    }}服务1.jsclass getItemsAPI {    getItems() {      return this.axiosInstance        .get('https://jsonplaceholder.typicode.com/users/')        .then((response) => response.data);    }  }export default getItemsAPI;错误：

Answer 1

如果使用 a 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

    }

}

您不需要使用 aclass来导出函数。您可以导出函数本身（在这种情况下，在对象内）：

const getItemsAPI = {

    getItems: () => {

      return axiosInstance

        .get('https://jsonplaceholder.typicode.com/users/')

        .then((response) => response.data);

    }

  }

export default getItemsAPI;

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

也只是一个注释。 getItems将返回一个Promise. 为了得到数据，你必须await或者在reducePromise之前解决。