Ajax通用请求方法，处理删除

Question

我有一个Ajax函数：

function ajaxRequest(url, data, success, method) {
    return fetch(url, {
        method: method,
        body: JSON.stringify(data),
        headers: new Headers({
            'Content-Type': 'application/json'
        })
    }).then(res => res.json())
        .then(response => {
            if (response.status !== success) {
                throw response.status;
            }
            return response;
        })
        .catch(error => console.error('Error:', error, 'if you see this message, please report this error.'))
}

我向它传递4个参数：

url：将请求发送到的API端点.

data：API消耗的数据。这可以是一个对象数组，或者在本例中是一个对象的ID。

succes：服务器在执行请求时应该返回的成功代码。在这种情况下，204。

method：Ajax应该使用的方法，在本例中是DELETE。

现在，当我使用这个函数发送DELETE请求时，它会抛出一个错误。这是因为服务器按照预期返回一个204，但除此之外，它是一个空响应。因此，它试图将其解析为JSON，但由于没有任何可解析的东西，所以失败了。我想先检查服务器是否返回204，如果返回，则将响应传递给前端。但如果没有，我仍然希望将其解析为JSON。

我试着用一些if语句来实现这一点，但是我最终使204工作起来，并打破了其他语句。我还考虑了仅仅为了删除请求而创建一个新的Ajax请求方法，但在我看来，你可以用一些方法来完成这个工作。我对Ajax并不熟悉，我也不太明白我应该使用的语法。如果有人能告诉我如何做到这一点，我会很感激的。

发送删除请求时遇到的错误：

ajax.js:15 Error: SyntaxError: Unexpected end of JSON input
at fetch.then.res (ajax.js:8)
at <anonymous> if you see this message, please report this error.

Answer 1

在尝试解析响应之前，应该重构代码以检查204状态代码：

1. 我们首先使用fetch发出XHR请求。
2. 在“然后”块中，我们检查状态代码是204还是205。
3. 在无内容的情况下，我们返回一个空对象，因此下游代码可以正确地处理这种情况。
4. 然后，我们使用throw new Error()块来处理HTTP错误，而不是抛出Number对象，因为这给了我们一个堆栈跟踪。

return fetch(url, {
    method,
    body: JSON.stringify(data),
    headers: new Headers({
        'Content-Type': 'application/json'
    })
}).then((res) => {
    if (res.status === 204 || res.status === 205) {
        return {};
    } else if(res.status === 200 || res.status === 201){
        return res.json(); 
    } else {
        throw new Error('Problem making the request, server returned invalid status code: ' + res.status);
    }
});

代码中的其他一些值得注意的更改：

• 不再有对success变量的检查，因为根据HTTP，在200到299之间的任何事情都应该是成功的
• method一直在使用对象速记法在fetch对象中写入
• 错误处理代码已经从承诺链中删除，因为处理失败应该由调用方完成，因为它们能够知道该做什么(比如向用户显示错误，或者重新尝试)。