javascript - JS - 如果 fetch 是一个 post，则在 fetch-then promise 情况下不会调用函数

Question

我还在学习ES6。我有两个类。

FetcherClass:

static getModalRequest() {
    return fetch(FetcherClass.getNewLink, {
        method: 'GET'
    });

}

static postModalRequest() {
    return fetch(FetcherClass.getPostLink, {
        method: 'POST',
        body: FetcherClass.getFormData('rating-request-form')
    });

}

第一个函数是 Get 方法，第二个函数是 Post 方法，用于从服务器端获取数据。

这是模态类的一部分:

addMainTemplate() {
    FetcherClass.getModalRequest().then(html => {
           // This is fired here always.
        this.renderHTMLTemplate(html.text());
    });
   }

sendRequest() {
        FetcherClass.postModalRequest().then(html =>
            // This function is never fired in the postModalRequest
            this.renderHTMLTemplate(html.text())
        );
   }

当我调用 addMainTemplate 函数时，它总是触发 renderHTMLTemplate 函数!因此，当Fetch Promise 是 GET 时，它就可以工作。

但是如果 Fetch Promise 是 POST，那么它就不起作用。 SendREquest 函数 - 在“then”情况下 - 永远不会触发 renderHTMLTemplate。

但我不知道真正的原因，也许是因为 GET 和 POST HTTP 方法？

是的，在这两种情况下我都从服务器得到了结果，因为在 Firefox 的开发者模式我看到响应状态等于 200 并且我看到 HTML 模板(它们不是相同的 html，所以我可以看到)。 在 Firefox 的控制台选项卡中我没有看到任何错误!

更新:

sendRequest() {
        FetcherClass.postModalRequest().then(html =>

            console.log("before"); 
            // there is a console.log("inside"); but it never called.
            this.renderHTMLTemplate(html.text())
            console.log("after");
        );
   }
renderHTMLTemplate(html) {
    console.log("inside");
}

在这种情况下，我可以看到“之前”和“之后”。但“内部”不在控制台中。

Answer 1

代码调用 Body.text()但不使用async/await。 Body.text() 返回一个 Promise。

renderHTMLTemplate 中的

html 是一个 Promise 对象，而不是纯文本。

static getModalRequest() {
    return fetch(FetcherClass.getNewLink, {
        method: 'GET'
    })
    .then(response => response.text())
    .catch(e => { throw e })    
}

static postModalRequest() {
    return fetch(FetcherClass.getPostLink, {
        method: 'POST',
        body: FetcherClass.getFormData('rating-request-form')
    })
    .then(response => response.text())
    .catch(e => { throw e })
}

处理抛出n个错误

FetcherClass.postModalRequest()
.then(html =>
   console.log(html); 
   this.renderHTMLTemplate(html)
)
.catch(e => console.error(e))