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())
        );
   }

当我调用addMainTemmplate函数时，它总是会触发renderHTMLTemplate函数！因此，当获取承诺是GET时，即可使用。

但是，如果Fetch Promise是POST，则它不起作用。 SendREquest函数-在“那么”的情况下-永远不会触发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。

html中的

renderHTMLTemplate是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 })
}

处理throw n错误

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

Answer 2

要查看发生的情况，请在错误情况下添加处理程序：

FetcherClass.postModalRequest().then(
    html => this.renderHTMLTemplate(html.text()),
    // the second handler is called if promise "fails" (is rejected)
    function() { console.log(arguments); }
)

Answer 3

在我的情况下，问题是从onSubmit处理程序调用了我的提取操作。这意味着fetch一旦发出请求，便提交了表单并重新加载了页面。要停止此操作，请添加event.preventDefault();。

submitForm(e) {

    fetch('/api/' + url, {
        method: "POST",
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body)
    })
    .then(response => response.json())
    .then(...)
    .catch(error => {
        throw new Error(error)
    });

    // Add this to stop the form submitting and the page reloading
    e.preventDefault();
}

Answer 4

将this.renderHTMLTemplate(html.text())替换为html.text().then(this.renderHTMLTemplate)

函数html.text()不会返回您的html文本，实际上它会返回一个promise，然后将其解析为您的html文本值。

JS-如果获取是发布，则函数不会在获取时调用，然后应允

4 个答案: