Fetch / Axios教程：新手必读的前端网络请求指南

本文详细介绍了Fetch和Axios的使用方法，包括发送GET和POST请求、处理响应数据以及错误处理。文章还探讨了Fetch和Axios的高级特性，如自定义请求头和请求体的设置。通过多个实战演练示例，帮助读者更好地理解和应用Fetch/Axios教程中的知识点。

Fetch API 是现代浏览器提供的一个可访问的接口，用于从服务器获取资源。Fetch API 以 Promise 的形式返回结果，使得异步操作更加简单和易用。Fetch API 的核心是 fetch() 函数，它接受一个 URL 和（可选的）配置对象作为参数，返回一个 Promise，该 Promise 最终将解析为 Response 对象。

Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js。Axios 支持浏览器和 Node.js 的自动转换，提供了比原生的 XMLHttpRequest 更多的功能，例如拦截请求和响应、转换请求和响应数据等。Axios 的核心是 axios 函数，它接受 URL 和（可选的）配置对象作为参数。

1. 前端网络请求：在现代 Web 开发中，前端应用需要频繁地与服务器交换数据，因此掌握网络请求相关技术是非常重要的。
2. 更好的用户体验：通过异步加载，可以提升用户体验，让用户在等待数据加载时，页面仍然可以交互。
3. 跨浏览器兼容性：现代浏览器广泛支持 Fetch API，而 Axios 可以在浏览器和 Node.js 环境中使用，具有较高的兼容性。
4. 高级特性：Fetch API 和 Axios 提供了丰富的高级特性，例如身份验证、错误处理、拦截器等，使得开发更加灵活和强大。

例如，Fetch API 适用于需要简单异步请求的场景，而 Axios 则适用于需要更复杂功能的场景，如请求拦截和请求数据转换。

Fetch API 可以很容易地发送 GET 请求。以下是一个简单的示例：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

在这个示例中，首先通过 fetch 函数向指定的 URL 发送 GET 请求，然后通过 then 方法链处理响应，最后通过 catch 方法处理可能出现的错误。

POST 请求用于向服务器发送数据。以下是一个使用 Fetch API 发送 POST 请求的示例：

const requestOptions = {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John Doe', age: 30 })
};

fetch('https://api.example.com/data', requestOptions)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

在这个示例中，通过 options 参数配置了 HTTP 方法、请求头和请求体。请求体被序列化为 JSON 格式，并通过 JSON.stringify 方法进行编码。

Fetch API 返回的响应对象包含了很多有用的方法和属性，如 json()、text()、blob() 等，可以用于处理不同格式的响应数据。以下是一些常见的处理方式：

fetch('https://api.example.com/data')
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Network response was not ok');
    }
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

在这个示例中，首先检查响应的状态码，如果状态码不是 200，则抛出一个错误。如果状态码是 200，则将响应对象转换为 JSON 格式的数据。

Fetch API 允许我们自定义请求头和请求体。例如，可以通过设置不同的请求头来实现身份验证或数据格式的指定。

以下是一个使用 Fetch API 设置请求头和请求体的示例：

const headers = new Headers({
  'Content-Type': 'application/json',
  'Authorization': 'Bearer your-token'
});

const body = JSON.stringify({ name: 'John Doe', age: 30 });

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: headers,
  body: body
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

在这个示例中，使用 Headers 构造函数设置自定义的请求头，并通过 JSON.stringify 方法将请求体序列化为 JSON 格式。

Axios 也可以很容易地发送 GET 请求。以下是一个简单的示例：

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

在这个示例中，使用 axios.get 方法发送 GET 请求，并通过 then 方法链处理响应，最后通过 catch 方法处理可能出现的错误。

POST 请求用于向服务器发送数据。以下是一个使用 Axios 发送 POST 请求的示例：

axios.post('https://api.example.com/data', {
  name: 'John Doe',
  age: 30
})
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

在这个示例中，通过 axios.post 方法发送 POST 请求，并通过 then 方法链处理响应，最后通过 catch 方法处理可能出现的错误。

Axios 返回的响应对象包含了很多有用的方法和属性，如 data、status、headers 等，可以用于处理不同格式的响应数据。以下是一些常见的处理方式：

axios.get('https://api.example.com/data')
  .then(response => {
    if (response.status === 200) {
      console.log(response.data);
    } else {
      console.error('Request failed with status:', response.status);
    }
  })
  .catch(error => console.error('Error:', error));

在这个示例中，首先检查响应的状态码，如果状态码是 200，则输出响应数据。如果状态码不是 200，则输出错误信息。

Axios 允许我们通过配置对象来设置请求头和请求体。以下是一个使用 Axios 设置请求头和请求体的示例：

const config = {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your-token'
  }
};

axios.post('https://api.example.com/data', {
  name: 'John Doe',
  age: 30
}, config)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

在这个示例中，通过 config 对象设置自定义的请求头，并通过第二个参数设置请求体。

此外，Axios 还支持其他高级配置，如错误处理、请求拦截等。例如，可以通过配置拦截器来处理请求和响应的数据：

axios.interceptors.request.use(config => {
  // 在发送请求前做些什么，比如添加请求头
  return config;
}, error => {
  // 处理请求错误
  return Promise.reject(error);
});

axios.interceptors.response.use(response => {
  // 处理响应数据
  return response;
}, error => {
  // 处理响应错误
  return Promise.reject(error);
});

Fetch API 返回的 Promise 可以通过 catch 方法捕获错误。以下是一个错误处理的示例：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

在这个示例中，通过 catch 方法捕获任何在 then 方法链中可能抛出的错误。

Axios 返回的 Promise 也可以通过 catch 方法捕获错误。以下是一个错误处理的示例：

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

在这个示例中，通过 catch 方法捕获任何在 then 方法链中可能抛出的错误。

以下是一个使用 Fetch API 获取 API 数据的示例：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

以下是一个使用 Axios 获取 API 数据的示例：

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

假设 API 返回的数据是一个 JSON 对象，包含多个用户信息。例如，下面是一个返回的数据结构示例：

[
  { name: 'John Doe', age: 30 },
  { name: 'Jane Doe', age: 25 }
]

我们可以使用 JavaScript 对象来处理这些数据。以下是一个处理 API 返回的数据的示例：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(users => {
    users.forEach(user => {
      console.log(`Name: ${user.name}, Age: ${user.age}`);
    });
  })
  .catch(error => console.error('Error:', error));

在这个示例中，通过 forEach 方法遍历用户数组，并输出每个用户的姓名和年龄。

同样，使用 Axios 也可以实现类似的操作：

axios.get('https://api.example.com/data')
  .then(response => {
    const users = response.data;
    users.forEach(user => {
      console.log(`Name: ${user.name}, Age: ${user.age}`);
    });
  })
  .catch(error => console.error('Error:', error));

在这个示例中，通过 forEach 方法遍历用户数组，并输出每个用户的姓名和年龄。

通过上述示例，我们可以看到 Fetch API 和 Axios 都可以很方便地发送网络请求，并处理返回的数据。这些工具在现代 Web 开发中是不可或缺的一部分，掌握它们可以让你更轻松地构建复杂的前端应用。