如何在函数中包装JavaScript提取-未处理的承诺拒绝

时间:2019-01-07 12:22:01

标签: javascript promise fetch

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

我从https://docs.oracle.com/javase/7/docs/api/java/lang/Object.html#hashCode()中获取了示例代码:

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提取是可以的。但是,如果出现错误,我会看到未处理的拒绝(错误):错误消息。

为什么拒收物即使在捕获块中也没有得到处理?这里的秘诀是什么?

1 个答案:

答案 0 :(得分:2)

避免未处理的承诺被拒绝的方法是处理它:

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