使用 Javascript 承诺时出现未知错误答案

【问题标题】：Unknown Error while using Javascript promises使用 Javascript 承诺时出现未知错误
【发布时间】：2020-07-20 13:19:08
【问题描述】：

我是 Javascript 新手，并试图了解 Promise 是如何工作的。我编写了以下代码来调用 REST API 并解析响应。

const buyFlightTicket = () => {
    return new Promise( (resolve, reject) => {
        setTimeout( () => {
            let commentResponse = fetch('https://jsonplaceholder.typicode.com/comments/1'); 
            commentResponse
                .then(response => {
                    if (response.status == 200) {
                        resolve(response.json());
                    } else {
                        reject("Failed to fetch comment: " + response.statusText);
                    }
                })
                .reject("Failed to fetch comment");
        }, 3000);
    })
}

buyFlightTicket()
.then( (responseData) => console.log(responseData))
.catch( (error) => console.log(error));

我能够记录响应数据，但在将响应记录到控制台之前出现错误：未知错误。

是什么导致了这个错误？

另外，我如何在不使用 Promise 的情况下使用回调重写这段代码？

【问题讨论】：

我认为你必须使用 .catch("Failed to fetch comment") 而不是 .reject("Failed to fetch comment")。
@soltex 谢谢。我发帖后才发现。
避免使用Promise constructor antipattern!在setTimeout 之后立即resolve，并将其余部分放在then 回调中。
"如何在不使用 Promise 的情况下使用回调重写此代码？" - 为什么要这样做？此外，这是不可能的，因为 fetch 返回一个你必须使用的承诺。
@Bergi 如果没有反模式，你能告诉我如何重写这个吗？

标签： javascript ecmascript-6 es6-promise ecmascript-5

【解决方案1】：

您应该使用catch，而不是.reject

            commentResponse
                .then(response => {
                    if (response.status == 200) {
                        resolve(response.json());
                    } else {
                        reject("Failed to fetch comment: " + response.statusText);
                    }
                })
                .catch(() => "Failed to fetch comment");

【讨论】：

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
你能帮助我如何在不使用承诺的情况下重新编写同样的逻辑吗？我如何通过 ES5 中的回调来实现这一点？
是的，你可以使用 fetch，它也返回一个 promise。我在另一个答案中添加它

【解决方案2】：

你可以使用 fetch，它也返回一个 promise

const buyFlightTicket = () => {
    let commentResponse = fetch('https://jsonplaceholder.typicode.com/comments/1'); 
    return commentResponse
        .then(response => {
            if (response.status == 200) {
                return (response.json());
            } else {
                return new Error("Failed to fetch comment: " + response.statusText);
            }
        })
}

buyFlightTicket()
.then( (responseData) => console.log(responseData))
.catch( (error) => console.log(error));

如果浏览器不支持Promise，可以添加polyfill或者使用xhr

    var buyFlightTicket = function(cb, errorCb) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://jsonplaceholder.typicode.com/comments/', true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4){
                if (xhr.status === 200){
                  cb(xhr.responseText)
                } else {
                  errorCb(xhr.statusText);
                }
            }
        };


        xhr.send(null);
        xhr.onerror = function (e) {
            console.error(xhr.statusText);
        };
        console.log('end')
    }
    buyFlightTicket(successCb, errorCb)
    function successCb(res) {
        console.log(res);
    }
    function errorCb(err) { console.log(err) }

【讨论】：