Fetch

什么是Fetch API

Fetch API是什么

Fetch API是一种用于Web浏览器和Node.js环境的现代网络数据获取API。它提供了一种简单而强大的方式来处理网络请求和响应。Fetch API的目的是为了取代XMLHttpRequest（XHR）对象，以更好地支持现代Web应用程序的需求，如异步操作、Promise、async/await等。

Fetch API是基于Promise设计的，这意味着它可以使用Promise的特性处理异步操作，如链式调用和错误处理。Fetch API还提供了一个Response对象，其中包含了响应的元数据和内容。可以使用它来检查响应状态、头信息和响应体等。

Fetch API支持各种HTTP请求方法，包括GET、POST、PUT、DELETE等。使用Fetch API时，可以设置请求头、请求体和其他参数来定制请求。Fetch API还提供了可用于取消请求的AbortController API，以及用于缓存响应的Cache API。

与传统的 AJAX 请求相比，Fetch API 有什么优点和缺点？

与传统的 AJAX 请求相比，Fetch API 有很多优点和一些缺点。以下是一些主要的优点和缺点：

优点：

更简洁的语法：Fetch API的语法更加简单，易于理解和使用。相比之下，传统的AJAX请求需要更多的代码来设置请求和处理响应。
基于Promise：Fetch API是基于Promise设计的，这意味着它可以更好地处理异步操作。可以使用Promise的特性来处理响应，如链式调用和错误处理。
更好的错误处理：Fetch API提供了更好的错误处理机制，包括处理网络错误、响应错误和超时错误等。这使得开发者更容易诊断和解决问题。
更好的可读性：Fetch API提供了更好的可读性。它使用了一种简洁的语法，可以更容易地理解和维护代码。
支持跨域请求：Fetch API支持跨域请求，这在现代Web应用程序中非常重要。可以使用Fetch API与其他域的API进行交互，而无需使用JSONP或其他跨域技术。

缺点：

兼容性问题：Fetch API在一些旧版浏览器中不被支持，需要使用polyfill或者其他技术来实现兼容性。
缺少一些功能：Fetch API缺少一些传统的AJAX请求所具有的功能，如设置请求超时时间、检查进度等。
不支持同步请求：Fetch API只支持异步请求，不支持同步请求。这意味着在某些情况下，它可能不适合使用。

Fetch API具有许多优点和一些缺点。尽管它在一些方面不如传统的AJAX请求，但由于它提供了更简洁、更易于使用和更好的错误处理机制，因此它已经成为现代Web应用程序中的首选API之一。

Fetch API 的基本用法和语法是什么？

发送请求

使用Fetch API发送请求非常简单，只需使用fetch()函数并传入URL即可。fetch()函数会返回一个Promise，它将在响应可用时解析。

fetch('https://example.com/data')
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

处理响应

Fetch API的响应是一个Response对象，包含了响应的元数据和内容。可以使用它来检查响应状态、头信息和响应体等。

fetch('https://example.com/data')
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('请求失败');
    }
  })
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    // 处理错误
  });

在上面的示例中，我们首先检查响应是否成功。如果响应成功，则返回响应的JSON数据。否则，抛出一个错误。

设置请求头和请求体

Fetch API还允许设置请求头和请求体，以定制请求。可以使用Headers对象来设置请求头信息，使用Body对象来设置请求体。

const headers = new Headers({
  'Content-Type': 'application/json'
});

const body = JSON.stringify({
  name: 'John Doe',
  email: 'johndoe@example.com'
});

fetch('https://example.com/data', {
  method: 'POST',
  headers: headers,
  body: body
})
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

在上面的示例中，我们首先创建了一个Headers对象，用于设置请求头信息。然后，我们将请求体转换为JSON字符串，并将其传递给fetch()函数。

其他参数

fetch('https://example.com/data', {
  method: 'POST',
  mode: 'cors',
  cache: 'no-cache',
  credentials: 'same-origin',
  headers: {
    'Content-Type': 'application/json'
  },
  redirect: 'follow',
  referrerPolicy: 'no-referrer',
  body: JSON.stringify({
    name: 'John Doe',
    email: 'johndoe@example.com'
  })
})
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

在上面的示例中，我们设置了请求方法为POST，请求模式为跨域资源共享（CORS），缓存模式为不使用缓存，凭证模式为同源请求，请求头为JSON格式，重定向跟踪为跟随，引用器策略为不透露，并将请求体设置为JSON格式数据。

Fetch API 的请求和响应

如何使用 Fetch API 发送 GET、POST、PUT、DELETE 等请求？

GET

发送GET请求时，只需要指定URL即可。

fetch('https://example.com/data')
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

POST

发送POST请求时，需要指定请求方法为POST，并设置请求头和请求体。

const headers = new Headers({
  'Content-Type': 'application/json'
});

const body = JSON.stringify({
  name: 'John Doe',
  email: 'johndoe@example.com'
});

fetch('https://example.com/data', {
  method: 'POST',
  headers: headers,
  body: body
})
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

PUT

发送PUT请求时，需要指定请求方法为PUT，并设置请求头和请求体。

const headers = new Headers({
  'Content-Type': 'application/json'
});

const body = JSON.stringify({
  name: 'John Doe',
  email: 'johndoe@example.com'
});

fetch('https://example.com/data/1', {
  method: 'PUT',
  headers: headers,
  body: body
})
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

DELETE

发送DELETE请求时，需要指定请求方法为DELETE，并设置请求头。

const headers = new Headers({
  'Content-Type': 'application/json'
});

fetch('https://example.com/data/1', {
  method: 'DELETE',
  headers: headers
})
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

在上面的示例中，我们使用了Headers对象来设置请求头信息，并使用JSON.stringify()方法将请求体转换为JSON字符串。然后，我们将这些参数传递给fetch()函数。

如何设置请求头和请求体？

Fetch API允许设置请求头和请求体，以定制请求。可以使用Headers对象来设置请求头信息，使用Body对象来设置请求体。以下是设置请求头和请求体的示例。

设置请求头

使用Headers对象可以设置请求头信息。Headers对象的构造函数可以接受一个可选的初始化对象，其中包含要设置的请求头信息。

const headers = new Headers({
  'Content-Type': 'application/json'
});

fetch('https://example.com/data', {
  headers: headers
})
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

在上面的示例中，我们使用Headers对象来设置Content-Type请求头信息。然后，我们将Headers对象传递给fetch()函数。

设置请求体

使用Body对象可以设置请求体。可以使用JSON.stringify()方法将JavaScript对象转换为JSON字符串，并将其设置为请求体。

const body = JSON.stringify({
  name: 'John Doe',
  email: 'johndoe@example.com'
});

fetch('https://example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: body
})
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

在上面的示例中，我们使用JSON.stringify()方法将JavaScript对象转换为JSON字符串，并将其设置为请求体。然后，我们将请求体传递给fetch()函数。

如何处理响应，并从响应中获取数据和元数据？

Fetch API的响应是一个Response对象，包含了响应的元数据和内容。可以使用它来检查响应状态、头信息和响应体等，并从中获取数据。

处理响应

可以使用then()方法来处理响应。then()方法接受一个回调函数，该函数将在响应可用时被调用。回调函数接受一个Response对象作为参数。

fetch('https://example.com/data')
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

在上面的示例中，我们使用then()方法来处理响应。在回调函数中，我们可以检查响应状态、头信息和响应体等。

查看响应状态

可以使用ok属性来检查响应状态。如果响应状态是200到299之间的数字，则ok属性为true。否则，它为false。

fetch('https://example.com/data')
  .then(response => {
    if (response.ok) {
      // 处理成功响应
    } else {
      // 处理失败响应
    }
  })
  .catch(error => {
    // 处理错误
  });

在上面的示例中，我们使用ok属性来检查响应状态。如果响应状态是200到299之间的数字，则处理成功响应。否则，处理失败响应。

获取响应头信息

可以使用headers属性来获取响应头信息。headers属性是一个Headers对象，包含响应头的所有信息。

fetch('https://example.com/data')
  .then(response => {
    const contentType = response.headers.get('Content-Type');
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

在上面的示例中，我们使用headers.get()方法来获取Content-Type头信息。然后，我们可以使用获取到的头信息处理响应

获取响应体

可以使用text()、json()和blob()等方法来获取响应体。这些方法返回一个Promise，该Promise将在响应体可用时解析。

fetch('https://example.com/data')
  .then(response => response.json())
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    // 处理错误
  });

在上面的示例中，我们使用response.json()方法来获取JSON格式的响应体。然后，我们将JSON数据传递给回调函数，并处理它。

如何处理响应中的错误和异常？

在使用Fetch API发送请求时，可能会出现各种错误和异常，例如网络错误、请求超时、响应状态码不是200到299之间的数字等。为了正确处理这些错误和异常，需要使用catch()方法来捕获它们。下面是一些例子：

网络错误

如果网络错误发生，fetch()函数将抛出一个异常。可以使用catch()方法来处理这个异常。

fetch('https://example.com/data')
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    console.error('Network error', error);
  });

在上面的示例中，我们使用catch()方法来捕获网络错误。如果发生网络错误，我们将在控制台上输出一个错误消息。

处理请求超时

由于网络问题或服务器繁忙等原因，请求可能需要花费更长的时间才能完成。可以使用AbortController和setTimeout()函数来实现请求超时机制。

const controller = new AbortController();
const timeout = setTimeout(() => {
  controller.abort();
  console.error('Request timed out');
}, 5000);

fetch('https://example.com/data', {
  signal: controller.signal
})
  .then(response => {
    clearTimeout(timeout);
    // 处理响应
  })
  .catch(error => {
    clearTimeout(timeout);
    console.error('Request error', error);
  });

在上面的示例中，我们使用AbortController来创建一个控制器，然后使用setTimeout()函数来设置请求超时时间。如果请求超时，我们将中止请求并输出一个错误消息。

处理响应状态错误

如果响应状态码不是200到299之间的数字，fetch()函数将返回一个成功状态的Promise，但响应的ok属性将为false。可以使用if语句来检查ok属性，并处理响应状态错误。

fetch('https://example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Response status error');
    }
    return response.json();
  })
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    console.error('Response error', error);
  });

在上面的示例中，我们使用if语句来检查响应的ok属性。如果ok属性为false，我们将抛出一个异常。然后，我们使用catch()方法来捕获异常，并输出一个错误消息。

Fetch初学笔记 | 前端学习记录

Fetch

什么是Fetch API

Fetch API是什么

与传统的 AJAX 请求相比，Fetch API 有什么优点和缺点？

Fetch API 的基本用法和语法是什么？

发送请求

处理响应

设置请求头和请求体

其他参数

Fetch API 的请求和响应

如何使用 Fetch API 发送 GET、POST、PUT、DELETE 等请求？

GET

POST

PUT

DELETE

如何设置请求头和请求体？

设置请求头

设置请求体

如何处理响应，并从响应中获取数据和元数据？

处理响应

查看响应状态

获取响应头信息

获取响应体

如何处理响应中的错误和异常？

网络错误

处理请求超时

处理响应状态错误