Почему я не могу использовать обещание в моем базовом приложении реакции?

Question

Я довольно новичок, чтобы реагировать, и я экспериментировал с запросами на получение axios. Итак, я пытаюсь сделать, чтобы у меня был файл json в моей общей папке, и я делаю запрос get axios на местоположение этого файла, а затем я печатаю результат в массиве.

Первый метод работал довольно гладко. Демонстрация функции приведена ниже

Выходные данные приведены ниже:

И, как видно, этот подход работал довольно хорошо.

Однако я также создал класс с именем Fetch внутри файла service.js. В этом классе был метод fetch, который использовал axios для выполнения запроса get.

Демонстрация этого класса приведена ниже:

import React from 'react';
import axios from "axios";

class Fetch extends React.Component
{
    constructor()
    {
        super();
    }
    fetch()
    {
        console.log("Hi i am in fetch of service....");
        axios.get('./config.json').then(response=>{
            var x=response.data;
            console.log("----------------------------------------->"+JSON.stringify(x));
            
            return x;
        },(err)=>{
            return err;

        })
        
    }
}

export default Fetch;

Я импортировал этот класс в другой файл js и создал объект этого класса для вызова метода fetch. Демонстрация моего использования приведена ниже:

Однако, когда я попытался сделать это, я получил следующую ошибку:

Что я делаю не так? Если это сработало в первый раз, то почему это не работает сейчас?

Answer 1

Вы получаете эту ошибку, потому что ничего не возвращается из Fetch.fetch(), не говоря уже об обещании.

Вы пытаетесь вызвать .then() для функции void, поэтому вы не сможете получить доступ к ответу.

В вашем классе Fetch верните запрос axios из функции fetch():

fetch() {
    return axios.get('/config.json').then(response => {
        // your code
    })
}