如何将.ajax()转换为fetch()

要将jQuery的$.ajax转换为原生的fetch，你需要理解两者之间的差异，并相应地调整代码。以下是一个基本的转换示例：

jQuery $.ajax 示例

$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log('Success:', data);
    },
    error: function(xhr, status, error) {
        console.error('Error:', error);
    }
});

转换为 fetch

fetch('https://api.example.com/data', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
})
.then(data => {
    console.log('Success:', data);
})
.catch(error => {
    console.error('Error:', error);
});

关键点解释

URL和方法：
- $.ajax中的url和method直接对应于fetch的第一个参数和method选项。
数据类型：
- dataType: 'json'在fetch中通常不需要显式指定，因为fetch默认返回一个Response对象，你可以使用.json()方法来解析JSON数据。
成功和错误处理：
- $.ajax的success和error回调函数在fetch中通过.then()和.catch()来处理。
- fetch的响应对象有一个ok属性，用于检查HTTP状态码是否在200-299范围内。如果不是，你可以抛出一个错误。
请求头：
- 如果你需要设置请求头（如Content-Type），可以在fetch的第二个参数中通过headers选项来设置。

处理POST请求

如果你需要发送POST请求，可以这样转换：

jQuery $.ajax 示例

$.ajax({
    url: 'https://api.example.com/data',
    method: 'POST',
    data: JSON.stringify({ key: 'value' }),
    contentType: 'application/json',
    success: function(data) {
        console.log('Success:', data);
    },
    error: function(xhr, status, error) {
        console.error('Error:', error);
    }
});

转换为 fetch

fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => {
    console.log('Success:', data);
})
.catch(error => {
    console.error('Error:', error);
});