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

使用 Fetch API 发送 PUT 请求是一种常见的前端操作，用于更新服务器上的资源。本章将详细介绍如何使用 Fetch API 发送 PUT 请求，并涵盖相关的配置选项和处理响应的方法。

使用 Fetch 发送 PUT 请求的基本步骤

发送一个 PUT 请求通常涉及以下几个基本步骤：

准备请求的 URL 和数据：你需要知道你要更新的资源的 URL，并准备好要发送的数据。
创建请求对象：使用 Request 对象或者通过 fetch 函数的第二个参数来设置请求配置。
发送请求：调用 fetch 函数并传入请求 URL 和配置。
处理响应：根据服务器返回的状态码和数据进行相应的处理。

示例代码

以下是一个简单的示例，展示如何使用 Fetch API 发送 PUT 请求：

// www.javascriptcn.com code example
// 准备要发送的数据
const data = {
    title: '新的文章标题',
    content: '这是文章的新内容'
};

// 将数据转换为 JSON 字符串
const jsonData = JSON.stringify(data);

// 发送 PUT 请求
fetch('https://api.example.com/articles/1', {
    method: 'PUT', // 指定请求方法
    headers: {
        'Content-Type': 'application/json' // 设置请求头
    },
    body: jsonData // 请求体
})
.then(response => {
    if (response.ok) {
        return response.json(); // 如果响应成功，解析 JSON 数据
    } else {
        throw new Error('网络请求失败');
    }
})
.then(data => {
    console.log('更新成功:', data);
})
.catch(error => {
    console.error('更新失败:', error);
});

设置请求头

在发送 PUT 请求时，通常需要设置请求头来告诉服务器发送的数据类型。常用的请求头包括：

Content-Type: 指定请求体的内容类型。例如，如果你发送的是 JSON 数据，则应该设置为 application/json。
Authorization: 如果需要认证，可以在这里添加认证信息，如 Bearer token 或者 Basic Auth。

示例代码

下面的代码展示了如何设置请求头：

// www.javascriptcn.com code example
fetch('https://api.example.com/articles/1', {
    method: 'PUT',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer your-token-here'
    },
    body: JSON.stringify({
        title: '更新后的文章标题',
        content: '更新后的内容'
    })
})
.then(response => {
    return response.json();
})
.then(data => {
    console.log('更新成功:', data);
})
.catch(error => {
    console.error('更新失败:', error);
});

处理错误

在发送 PUT 请求时，可能会遇到各种错误，例如网络问题、服务器返回错误状态码等。因此，处理这些错误非常重要。

网络错误

如果请求过程中发生网络错误，Fetch API 会抛出一个异常。你可以通过捕获这个异常来进行处理。

// www.javascriptcn.com code example
fetch('https://api.example.com/articles/1', {
    method: 'PUT',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        title: '更新后的文章标题',
        content: '更新后的内容'
    })
})
.then(response => {
    if (!response.ok) {
        throw new Error('服务器返回了错误状态码');
    }
    return response.json();
})
.then(data => {
    console.log('更新成功:', data);
})
.catch(error => {
    console.error('更新失败:', error);
});

服务器错误状态码

服务器可能返回一些错误状态码，比如 400（请求无效）、401（未授权）、500（服务器内部错误）等。你可以通过检查 response.ok 属性或具体的 status 属性来判断请求是否成功。

// www.javascriptcn.com code example
fetch('https://api.example.com/articles/1', {
    method: 'PUT',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        title: '更新后的文章标题',
        content: '更新后的内容'
    })
})
.then(response => {
    if (!response.ok) {
        throw new Error(`服务器返回了错误状态码 ${response.status}`);
    }
    return response.json();
})
.then(data => {
    console.log('更新成功:', data);
})
.catch(error => {
    console.error('更新失败:', error);
});

使用 async/await 语法

为了使代码更简洁易读，你可以使用 async/await 语法来发送 PUT 请求。这种方式可以避免回调地狱，使得错误处理更加直观。

示例代码

// www.javascriptcn.com code example
async function updateArticle() {
    const data = {
        title: '更新后的文章标题',
        content: '更新后的内容'
    };

    try {
        const response = await fetch('https://api.example.com/articles/1', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        });

        if (!response.ok) {
            throw new Error(`服务器返回了错误状态码 ${response.status}`);
        }

        const responseData = await response.json();
        console.log('更新成功:', responseData);
    } catch (error) {
        console.error('更新失败:', error);
    }
}

updateArticle();

总结

本章节详细介绍了如何使用 Fetch API 发送 PUT 请求，涵盖了基本步骤、请求头的设置、错误处理以及使用 async/await 语法等内容。通过这些内容，你可以更好地掌握 Fetch API 的使用方法，并在实际项目中灵活应用。