为什么我无法在我的基本React应用中使用Promise？

Question

我现在还很陌生，我正在尝试axios get请求。因此，我想做的是在公用文件夹中有一个json文件，并向该文件的位置发出了axios请求，然后将结果打印在数组中。

第一种方法工作非常顺利。下面是该功能的演示

输出如下：

很明显，这种方法效果很好。

但是，我还在service.js文件中创建了一个名为Fetch的类。此类有一个名为fetch的方法，该方法使用axios发出获取请求。

该类的演示如下：

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()并没有返回任何内容，更不用说诺言了。

您正试图在void函数上调用.then()，因此您将无法访问响应。

在您的Fetch类中，从fetch()函数返回axios请求：

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