javascript - 如何将 JavaScript fetch 包装在函数中 - 未处理的 promise 拒绝

Question

我正在尝试为 JavaScript fetch 命令编写一个包装函数。

我从 this post 获取了示例代码:

function fetchAPI(url, data, method = 'POST') {
const headers = {
    'Authorization': `Token ${getAuthToken()}`,
};

return fetch(url, { headers, 'method': method, 'body': data })
    .then(response => {
        if (response.ok) {
            const contentType = response.headers.get('Content-Type') || '';

            if (contentType.includes('application/json')) {
                return response.json().catch(error => {
                    return Promise.reject(new Error('Invalid JSON: ' + error.message));
                });
            }

            if (contentType.includes('text/html')) {
                return response.text().then(html => {
                    return {
                        'page_type': 'generic',
                        'html': html
                    };
                }).catch(error => {
                    return Promise.reject(new Error('HTML error: ' + error.message));
                });
            }

            return Promise.reject(new Error('Invalid content type: ' + contentType));
        }

        if (response.status === 404) {
            return Promise.reject(new Error('Page not found: ' + url));
        }

        return response.json().then(res => {
            // if the response is ok but the server rejected the request, e.g. because of a wrong password, we want to display the reason
            // the information is contained in the json()
            // there may be more than one error
            let errors = [];
            Object.keys(res).forEach((key) => {
                errors.push(`${key}: ${res[key]}`);
            });
            return Promise.reject(new Error(errors)
            );
        });
    }).catch(error => {
        return Promise.reject(new Error(error.message));
    });

};

我这样调用它:

fetchAPI('/api/v1/rest-auth/password/change/', formData).then(response => {
        console.log('response ', response);
    });

编辑:我修改了代码，以在请求正常但被拒绝(例如由于密码无效)时显示服务器返回的信息。如果 ok == false，则必须询问响应 json。

有效的 URL 获取就可以了。但如果出现错误，我会看到 Unhandled Rejection (Error): 错误消息。

为什么即使它们在 catch block 中，拒绝也未被处理？这里的秘诀是什么？

Answer 1

避免未处理的 promise 拒绝的方法是处理它:

fetchAPI('/api/v1/rest-auth/password/change/', formData).then(response => {
    console.log('response ', response);
}).catch(error => {
   // do something meaningful here.
});;