Fetch / Axios学习：新手入门教程

本文详细介绍了Fetch和Axios两个网络请求库的基本用法和高级特性，帮助读者了解它们的区别与联系。文章涵盖了Fetch与Axios的学习内容，包括发送GET和POST请求、配置请求头、处理超时和错误等。通过实际示例，展示了如何在项目中应用这些库，以实现有效的网络请求。Fetch / Axios学习过程中，读者可以掌握如何使用这些库来处理异步操作、发送表单数据以及解决常见的跨域问题。

Fetch API是现代Web开发中用于发起网络请求的一个标准API。它提供了一个简单的、基于Promise的接口，用于发起网络请求。Fetch API最初在浏览器中实现，但也可以在Node.js等环境中使用。由于其强大的功能和简洁的语法，Fetch API逐渐成为替代XMLHttpRequest的首选方式之一。
Fetch API提供了fetch()方法，该方法接收一个URL和一个可选的配置对象作为参数。fetch()返回一个Promise，该Promise在接收到服务器响应后解析为Response对象。通常，你可以在接收到Response对象后使用.json()或其他方法来解析响应数据。

Axios是一个基于Promise的HTTP库，可在浏览器和Node.js中使用。Axios提供了一个简单的API用于发起网络请求，同时支持多种数据格式，包括JSON、表单数据等。它可以在浏览器中通过<script>标签引入，也可以在Node.js中通过npm安装使用。
Axios的主要优势在于它支持取消请求、拦截请求和响应、自动处理跨域请求等特性。此外，Axios还支持自定义请求头、超时设置、请求重试等高级特性。

• 区别：
  • 实现方式：Fetch是浏览器内置的一个标准API，Axios是一个外部库，需要单独引入。
  • 使用场景：Fetch适用于需要在浏览器或Node.js中使用标准API的场景，Axios则适用于需要额外功能（如取消请求、拦截请求等）的场景。
  • 错误处理：Fetch使用catch方法来处理错误，Axios则使用catch或then中的错误处理逻辑。
  • 兼容性：Fetch在一些旧浏览器中可能需要polyfill（例如，polyfill为fetch提供了更好的兼容性支持），Axios通常兼容性较好。
• 联系：
  • 异步：Fetch和Axios都是基于Promise的异步库，可以方便地进行链式调用。
  • 请求方式：两者都支持GET、POST等多种HTTP请求方式。
  • 配置性：两者都可以配置请求头、超时时间等参数。

发送GET请求是Fetch API最基本的功能之一。下面是一个简单的示例，使用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函数用于发送一个GET请求到指定的URL。response.json()方法将响应体解析为JSON格式，然后返回一个Promise。如果请求成功，解析后的JSON数据将被传递给then方法的回调函数。如果请求过程中出现错误，catch方法的回调函数将被调用，以处理错误。

发送POST请求用于向服务器发送数据。例如，下面的代码演示了如何使用Fetch API发送包含JSON数据的POST请求。

const data = {
  key1: 'value1',
  key2: 'value2'
};

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

在这个示例中，fetch函数接收两个参数：URL和一个配置对象。配置对象中的method字段设置为POST，表示发送一个POST请求。headers字段设置了请求头，Content-Type设置为application/json，表示请求体为JSON格式。body字段设置为JSON格式的请求体数据。请求成功后，响应体将被解析为JSON格式并打印出来。如果请求过程中出现错误，将通过catch方法处理。

发送PUT请求用于更新服务器上的资源。例如，下面的代码展示了如何使用Fetch API发送包含JSON数据的PUT请求。

const data = {
  key1: 'value1',
  key2: 'value2'
};

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

在这个示例中，fetch函数用于发送一个PUT请求到指定的URL。配置对象中的method字段设置为PUT，表示发送一个PUT请求。请求头和请求体的设置与POST请求类似。请求成功后，响应体将被解析为JSON格式并打印出来。如果请求过程中出现错误，将通过catch方法处理。

发送DELETE请求用于删除服务器上的资源。例如，下面的代码展示了如何使用Fetch API发送DELETE请求。

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

在这个示例中，fetch函数用于发送一个DELETE请求到指定的URL。配置对象中的method字段设置为DELETE，表示发送一个DELETE请求。请求成功后，响应体将被解析为JSON格式并打印出来。如果请求过程中出现错误，将通过catch方法处理。

Fetch API提供了丰富的错误处理机制，包括catch方法用于捕获then方法中的错误。下面的示例展示了如何使用catch方法处理fetch请求中的错误。

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));

在这个示例中，fetch请求的响应首先被传递给第一个then方法。如果响应的状态码不是200，表示请求错误，抛出异常。catch方法的回调函数将捕获到这个异常，并打印错误信息。这样可以确保在请求过程中发生的任何错误都能被妥善处理。

要使用Axios，首先需要在项目中安装Axios。可以通过npm(Node包管理器)进行安装：

npm install axios

安装完成后，可以在项目中通过引入axios模块来使用它。例如，下面的代码演示了在JavaScript文件中引入Axios：

import axios from 'axios';

或在ES5中使用：

const axios = require('axios');

发送GET请求是使用Axios的基础。下面的代码演示了如何使用Axios发送GET请求并处理响应。

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

在这个示例中，axios.get方法用于发送一个GET请求到指定的URL。请求成功后，响应数据会被传递给then方法的回调函数中。如果请求过程中出现错误，catch方法的回调函数将被调用并处理错误。

发送POST请求用于向服务器发送数据。下面的代码演示了如何使用Axios发送包含JSON数据的POST请求。

axios.post('https://api.example.com/data', {
  key1: 'value1',
  key2: 'value2'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

在这个示例中，axios.post方法用于发送一个POST请求到指定的URL。第二个参数是请求体数据，格式为JSON对象。请求成功后，响应数据会被传递给then方法的回调函数中。如果请求过程中出现错误，catch方法的回调函数将被调用并处理错误。

发送PUT请求用于更新服务器上的资源。下面的代码展示了如何使用Axios发送包含JSON数据的PUT请求。

axios.put('https://api.example.com/data', {
  key1: 'value1',
  key2: 'value2'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

在这个示例中，axios.put方法用于发送一个PUT请求到指定的URL。第二个参数是请求体数据，格式为JSON对象。请求成功后，响应数据会被传递给then方法的回调函数中。如果请求过程中出现错误，catch方法的回调函数将被调用并处理错误。

发送DELETE请求用于删除服务器上的资源。下面的代码展示了如何使用Axios发送DELETE请求。

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

在这个示例中，axios.delete方法用于发送一个DELETE请求到指定的URL。请求成功后，响应数据会被传递给then方法的回调函数中。如果请求过程中出现错误，catch方法的回调函数将被调用并处理错误。

在某些情况下，你可能需要自定义请求头。下面的代码演示了如何使用Axios发送带有自定义请求头的GET请求。

axios.get('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer your-token',
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

在这个示例中，axios.get方法的第二个参数是一个配置对象，其中包含了headers字段。你可以在headers字段中设置需要的请求头信息，例如Authorization和Content-Type。请求成功后，响应数据会被传递给then方法的回调函数中。如果请求过程中出现错误，catch方法的回调函数将被调用并处理错误。

Fetch和Axios都基于Promise的异步操作。下面的示例展示了如何使用Promise链来处理多个异步操作。

fetch('https://api.example.com/data1')
  .then(response => response.json())
  .then(data1 => {
    return fetch('https://api.example.com/data2')
      .then(response => response.json())
      .then(data2 => {
        console.log(data1, data2);
      });
  })
  .catch(error => console.error('Error:', error));

// 使用Axios
axios.get('https://api.example.com/data1')
  .then(response1 => {
    return axios.get('https://api.example.com/data2');
  })
  .then(response2 => {
    console.log(response1.data, response2.data);
  })
  .catch(error => console.error('Error:', error));

如上代码，fetch和axios都使用了.then方法进行链式调用。第一个请求成功后，会触发第二个请求的调用，同时传递第一个请求的数据。如果任何一个请求失败，都会进入catch方法进行错误处理。

在某些情况下，你可能需要设置请求的超时时间。下面的示例展示了如何使用Fetch API设置超时时间。

fetch('https://api.example.com/data', {
  timeout: 3000 // 设置超时时间为3秒
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Fetch API本身并不直接支持超时设置。但你可以通过第三方库（如axios）来实现超时功能。

axios.get('https://api.example.com/data', {
  timeout: 3000 // 设置超时时间为3秒
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

在这个示例中，axios的配置对象中的timeout字段可以设置请求的超时时间，以毫秒为单位。如果请求在指定的时间内没有完成，axios会抛出一个超时错误，该错误可以在catch方法中进行捕获和处理。

在某些情况下，你需要发送带有查询参数的请求。下面的示例展示了如何使用Fetch API和Axios发送带有查询参数的GET请求。

// 使用Fetch API
const url = new URL('https://api.example.com/data');
url.searchParams.append('param1', 'value1');
url.searchParams.append('param2', 'value2');

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// 使用Axios
axios.get('https://api.example.com/data', {
  params: {
    param1: 'value1',
    param2: 'value2'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

在这个示例中，fetch使用URLSearchParams来构造带有查询参数的URL。而axios则通过配置对象中的params字段来传递查询参数。这样，你可以在请求URL中包含必要的参数，从而实现更复杂的请求逻辑。

许多网站提供了公开的API供开发者使用。下面的示例展示了如何使用Fetch API获取JSONPlaceholder API的数据。

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

在这个示例中，fetch请求指向JSONPlaceholder API的/posts路径。请求成功后，响应数据会被解析为JSON格式，并打印出来。如果请求过程中出现错误，将通过catch方法处理。

发送表单数据是网页开发中的常见任务。下面的示例展示了如何使用Axios发送表单数据。

<form id="myForm">
  <input type="text" name="username" value="user123">
  <input type="password" name="password" value="secret">
  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();

  const formData = new FormData(event.target);
  const data = {};
  for (let [name, value] of formData.entries()) {
    data[name] = value;
  }

  axios.post('https://api.example.com/login', data)
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error('Error:', error);
    });
});
</script>

在这个示例中，首先创建一个HTML表单。当表单提交时，阻止表单默认行为，然后将表单数据转换为JavaScript对象，并使用Axios发送POST请求。请求成功后，响应数据会被打印出来。如果请求过程中出现错误，将通过catch方法处理。

在获取响应数据后，你可能需要对数据进行处理。下面的示例展示了如何使用Fetch API获取响应数据并进行处理。

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => {
    const filteredData = data.filter(post => post.userId === 1);
    console.log(filteredData);
  })
  .catch(error => console.error('Error:', error));

在这个示例中，fetch请求获取JSONPlaceholder API的/posts路径的数据。请求成功后，响应数据会被解析为JSON格式，并过滤出userId为1的数据。如果请求过程中出现错误，将通过catch方法处理。

在实际开发中，经常会遇到跨域问题。Fetch API和Axios都提供了相应的解决方案。

• Fetch API：
  • 使用CORS（跨域资源共享）策略。
  • 配置服务器端允许跨域请求。
  • 使用代理服务器（如Nginx）转发请求。
• Axios：
  • 使用CORS（跨域资源共享）策略。
  • 配置服务器端允许跨域请求。
  • 使用proxy配置代理请求。

    // 使用Axios配置代理
    axios.post('https://api.example.com/data', {
    key1: 'value1',
    key2: 'value2'
    }, {
    headers: {
    'Content-Type': 'application/json'
    },
    proxy: {
    host: 'localhost',
    port: 3000,
    protocol: 'http'
    }
    })
    .then(response => {
    console.log(response.data);
    })
    .catch(error => {
    console.error('Error:', error);
    });

    在这个示例中，axios的配置对象中的proxy字段用于设置代理服务器的信息。这样，请求会首先发送到代理服务器，然后由代理服务器转发到目标服务器。这可以解决跨域问题。

在某些情况下，请求可能由于网络问题导致超时。可以使用Axios的超时配置来处理这种情况。

axios.get('https://api.example.com/data', {
  timeout: 3000 // 设置超时时间为3秒
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isAxiosError(error) && error.code === 'ECONNABORTED') {
      console.error('Request timed out');
    } else {
      console.error('Error:', error);
    }
  });

在这个示例中，axios的配置对象中的timeout字段设置请求的超时时间为3秒。如果请求超时，catch方法中的axios.isAxiosError用于判断错误是否为超时错误。如果是超时错误，将打印特定的超时信息。

在请求过程中可能会遇到各种错误。下面的技巧可以帮助你更好地调试和处理错误。

• 使用console.log打印错误信息：
  • console.log(error)可以打印出错误对象的详细信息，帮助你了解错误的来源。
• 检查网络请求：
  • 使用浏览器的开发者工具（如Chrome DevTools）查看网络请求的详细信息，包括请求头、响应头、请求体和响应体。

• 错误捕获和重新发送：

  • 在catch方法中捕获错误后，可以进行重试逻辑。例如：

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

  if (axios.isAxiosError(error) && error.code === 'ECONNABORTED') {
  console.error('Request timed out');
  } else {
  console.error('Error:', error);
  }

  // 重试逻辑
  setTimeout(() => {
  axios.get('https://api.example.com/data')
  .then(response => {
  console.log(response.data);
  })
  .catch(error => {
  console.error('Error:', error);
  });
  }, 1000); // 等待1秒后重试
  });

  在这个示例中，如果请求失败，将等待1秒后重新发送请求。