fetch

fetch 是现代浏览器提供的一个强大的 JavaScript API，用于发送网络请求。它基于 Promise，支持异步操作，能够替代传统的 XMLHttpRequest，并且提供了更简洁和灵活的语法。

基本用法

fetch 的基本语法如下：

JavaScript复制

fetch(input[, init])
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

• input：必须的参数，表示要获取资源的路径（URL）或一个 Request 对象。
• init：可选参数，是一个配置对象，用于设置请求方法、头信息、请求体等。

常见的 fetch 示例

GET 请求

JavaScript复制

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json(); // 将响应解析为 JSON
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

在上面的代码中，fetch 发起一个 GET 请求，然后通过 .json() 方法将响应体解析为 JSON 格式。

POST 请求

JavaScript复制

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' }),
})
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

在 POST 请求中，需要设置请求方法、头信息和请求体。

错误处理

fetch 的 Promise 只会在网络错误或请求被阻止时被拒绝（reject），而不会因为 HTTP 状态码（如 404 或 500）而被拒绝。因此，需要通过检查 response.ok 或 response.status 来判断请求是否成功。

使用 async/await

fetch 也可以与 async/await 语法结合使用，使代码更加简洁易读：

JavaScript复制

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

这种方式避免了嵌套的 .then() 和 .catch()。

响应对象

fetch 返回的 Response 对象包含多个属性和方法，用于处理响应数据：

• response.ok：布尔值，表示请求是否成功（状态码在 200-299 之间）。
• response.status：HTTP 状态码。
• response.json()：将响应体解析为 JSON。
• response.text()：将响应体解析为文本。

优势

• 简洁的语法：基于 Promise 的设计使得代码更加简洁。
• 支持多种数据格式：可以轻松处理 JSON、文本、二进制数据等。
• 异步操作：不会阻塞 UI，提供流畅的用户体验。

总之，fetch 是一个强大且灵活的 API，适用于现代 Web 开发中的网络请求操作。

 

 

与传统数据请求方式的比较

在 Web 开发中，向服务器发送请求的传统方式有两种：XMLHttpRequest 和 axios。

XMLHttpRequest

使用 XMLHttpRequest 对象通过 Ajax 向服务器请求数据，虽然可以实现功能，但代码显得冗长繁琐。例如：

// 1. 创建一个 XMLHttpRequest 对象
let xhr = new XMLHttpRequest();
// 2. 设置请求方式和地址
xhr.open('get', 'https://api.example.com/data');
// 3. 发送请求
xhr.send();
// 4. 监听 load 事件，获取响应
xhr.addEventListener('load', function () {
    console.log(JSON.parse(xhr.response));
});

axios

axios 底层基于 XMLHttpRequest，但是做了 Promise 的封装，因此代码更简洁：

axios.get('https://api.example.com/data')
     .then(response => console.log(response.data))
     .catch(error => console.error(error));

fetch

fetch 是现代浏览器原生支持的 API，被称为“下一代 Ajax 技术”。它以 Promise 形式返回结果，语法简洁，易于使用。并且，通过 Stream（流）来分块读取数据，对大文件请求更为友好。fetch 的兼容性良好，现代浏览器大多支持（IE 除外）。