Fetch 发送 DELETE 请求-JavaScript中文网-JavaScript教程资源分享门户

DELETE 请求用于删除服务器上的资源。这种请求通常用于删除指定的数据项或对象。DELETE 请求的目标是 URL，该 URL 指定了要删除的资源。与 GET、POST 等其他类型的 HTTP 请求不同，DELETE 请求通常不带有请求体（body），因为删除操作只需要知道要删除哪个资源。

创建 DELETE 请求

使用 Fetch API 发送 DELETE 请求非常简单。以下是一个基本示例：

// www.javascriptcn.com code example
fetch('https://api.example.com/resource/42', {
    method: 'DELETE',
})
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
})
.then(data => {
    console.log('Success:', data);
})
.catch(error => {
    console.error('Error:', error);
});

在这个例子中，我们向 https://api.example.com/resource/42 发送了一个 DELETE 请求。如果请求成功，我们将从响应中解析 JSON 数据并打印出来。如果请求失败，我们会捕获错误并输出错误信息。

设置请求头

有时，你需要向 DELETE 请求添加额外的头部信息。例如，你可能需要设置认证令牌或自定义头部来传递额外的元数据。你可以通过在配置对象中添加 headers 属性来实现这一点。

// www.javascriptcn.com code example
fetch('https://api.example.com/resource/42', {
    method: 'DELETE',
    headers: {
        'Authorization': 'Bearer your-token-here',
        'Content-Type': 'application/json'
    },
})
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
})
.then(data => {
    console.log('Success:', data);
})
.catch(error => {
    console.error('Error:', error);
});

在这个例子中，我们在请求头中添加了 Authorization 和 Content-Type 字段。注意，即使 DELETE 请求通常没有请求体，我们仍然可以设置 Content-Type 头部，这在某些情况下可能是有用的（例如，如果你的后端期望某种特定的格式）。

处理响应

处理 DELETE 请求的响应与处理其他类型的请求类似。你需要检查响应的状态码，确保请求成功，并根据需要处理响应体。

// www.javascriptcn.com code example
fetch('https://api.example.com/resource/42', {
    method: 'DELETE',
    headers: {
        'Authorization': 'Bearer your-token-here'
    },
})
.then(response => {
    if (response.status === 200 || response.status === 204) { // 204 表示无内容，但表示成功
        console.log('Resource deleted successfully');
    } else {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
})
.catch(error => {
    console.error('Error:', error);
});

在这个例子中，我们检查响应状态码是否为 200 或 204，这两种状态码都表示删除成功。如果响应状态码不是这两个之一，我们将抛出一个错误。

使用 async/await 语法

为了使代码更简洁和易读，我们可以使用 async/await 语法来发送 DELETE 请求。

// www.javascriptcn.com code example
async function deleteResource() {
    try {
        const response = await fetch('https://api.example.com/resource/42', {
            method: 'DELETE',
            headers: {
                'Authorization': 'Bearer your-token-here'
            },
        });

        if (response.ok) {
            const data = await response.json();
            console.log('Success:', data);
        } else {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
    } catch (error) {
        console.error('Error:', error);
    }
}

deleteResource();

在这个例子中，我们定义了一个名为 deleteResource 的异步函数，它使用 await 关键字等待 fetch 请求完成。这样可以使代码更清晰，更容易理解。

处理错误

在实际应用中，你需要考虑各种可能出现的错误情况，例如网络问题、服务器返回错误的状态码等。以下是处理这些错误的一个例子：

// www.javascriptcn.com code example
async function deleteResource() {
    try {
        const response = await fetch('https://api.example.com/resource/42', {
            method: 'DELETE',
            headers: {
                'Authorization': 'Bearer your-token-here'
            },
        });

        if (response.ok) {
            const data = await response.json();
            console.log('Success:', data);
        } else {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
    } catch (error) {
        if (error.name === 'TypeError') {
            console.error('A network error occurred.');
        } else {
            console.error('Error:', error.message);
        }
    }
}

deleteResource();

在这个例子中，我们不仅处理了服务器返回的错误状态码，还特别处理了网络错误。这样可以提供更详细的错误信息，帮助开发者更好地调试和解决问题。

总结

使用 Fetch API 发送 DELETE 请求相对简单。通过设置请求方法、请求头和处理响应，你可以轻松地从服务器上删除资源。同时，利用 async/await 语法可以使代码更加简洁和易读。记得始终处理可能出现的各种错误情况，以确保应用程序的健壮性。