代码之家 › 专栏 › 技术社区 › PC.

Javascript Fetch API with Promises-传递HTTP响应代码

fetch-api async-await javascript

PC. · 技术社区 · 6 月前

我正在使用以下代码向我的API发出HTTP请求:

fetch('api/register', {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(jsonObj)
})
    .then(response => {
        responseClone = response.clone();
        if (!response.ok) {
            console.log(`HTTP ERROR STATUS CODE: ${response.status}`);
        }
        return response.json();
    })
    .then(function (data) {
        processDataFromServer(data);
    }, function (rejectionReason) {
        console.log('JSON Parsing Error:', rejectionReason, responseClone);
        responseClone.text()
            .then(function (bodyText) {
                console.log('Cannot parse as JSON:', bodyText);
            });
    })
    .catch(error => {
        console.log("Error: " + error)
        deplayError(error);
    });

代码有效!我唯一想做的改变就是通过 response.status 到我的 processDataFromServer(data) 作用有点像 processDataFromServer(data, response.status) . 自从 response.json() 是一个承诺,我不能将承诺和属性同时返回给我的下一个方法。知道怎么做吗?

1 回复 | 直到 6 月前

trincot 6 月前

如果您将代码重写为 async 功能和用途 await 。大概是这样的:

async function retrieve() {
    try {
        const response = await fetch('api/register', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(jsonObj)
        });
        const responseClone = response.clone();
        if (!response.ok) {
            console.log(`HTTP ERROR STATUS CODE: ${response.status}`);
        }
        try {
            const data = await response.json();
            processDataFromServer(data, response.status);
        } catch (rejectionReason) {
            console.log('JSON Parsing Error:', rejectionReason, responseClone);
            const bodyText = await responseClone.text();
            console.log('Cannot parse as JSON:', bodyText);
        }
    } catch (error) {
        console.log("Error: " + error)
        deplayError(error);
    }
}

retrieve();

没有 `异步`

正如你在评论中提到的,你想坚持 .then 链,这里有一个替代方案:

你可以结合承诺 response.json() 与 response.status 在数组中,并将其传递给 Promise.all 。这将解析为数据和状态。

所以改变一下:

return response.json();

到

return Promise.all([response.json(), response.status]);

并在下一个中接收解析的值 then 回调,通过更改以下内容:

.then(function (data) {

到

.then(function ([data, status]) {

…现在您可以访问 status 请拨打 processDataFromServer .

Javascript Fetch API with Promises-传递HTTP响应代码

没有 异步

没有 `异步`