Fetch / Axios项目实战：新手必备教程-原创手记-慕课网

概述

本文详细介绍了Fetch与Axios项目实战的相关内容，包括Fetch和Axios的基本介绍、区别与联系，以及如何在项目中使用这两种库发送HTTP请求。此外，文章还通过一个简单的数据展示应用，演示了如何结合使用Fetch和Axios。Fetch / Axios项目实战涵盖了从环境搭建到请求处理的全过程。

Fetch与Axios简介

Fetch API介绍

Fetch API 是现代浏览器提供的一个用于进行网络请求的标准接口。它使用Promise来处理异步操作，使得代码更易于理解和维护。Fetch API 通过 fetch() 方法发起请求。该方法返回一个 Promise，该 Promise 会解析为所请求资源的 Response 对象。

Fetch API 的基本语法如下：

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

其中，url 是要请求的资源地址，options 是可选的配置对象，可以包含请求方法、请求头、请求体等信息。

Axios介绍

Axios 是一个基于 Promise 的 HTTP 库，可以在浏览器和 Node.js 中使用。它使得发起网络请求更加简单和方便，能够处理多种请求类型，并支持自定义请求头、超时设置和错误处理等高级功能。

Axios 的基本语法如下：

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

Fetch与Axios的区别与联系

区别

实现方式：Fetch API 是浏览器原生提供的，而 Axios 是一个第三方库。
错误处理：Fetch API 使用 catch() 方法来处理错误，而 Axios 使用 .catch() 方法。
跨域支持：Fetch API 和 Axios 都支持跨域请求，但是 Axios 提供了更多的默认配置，如全局错误处理、自定义请求头等。
兼容性：Fetch API 不支持所有旧版浏览器（如 Internet Explorer），而 Axios 可以通过 polyfill 来兼容旧版本浏览器。

联系

异步请求：Fetch API 和 Axios 都使用异步请求，基于 Promise 实现。
请求类型：两者都支持 GET、POST、PUT、DELETE 等多种请求类型。
插件扩展：Axios 提供了插件扩展功能，可以扩展其功能来适应不同的开发需求。

示例代码说明

Fetch API 示例

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

Axios 示例

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

环境搭建与准备工作

创建项目环境

创建一个基于 HTML 和 JavaScript 的项目环境，可以使用任何文本编辑器或 IDE（如 VS Code）。首先，创建一个项目文件夹，然后在其中创建以下文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Data Display App</title>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div id="data-container"></div>
</body>
</html>

创建 script.js 文件用于编写 Fetch 和 Axios 的代码：

import axios from 'axios';

安装Axios库

为了使用 Axios，需要在项目中安装 Axios 库。可以通过 npm 或 yarn 来安装 Axios。这里使用 npm 来安装 Axios：

npm install axios

安装完成后，可以在 script.js 文件中引入 Axios：

import axios from 'axios';

使用Fetch发送HTTP请求

发送GET请求

使用 Fetch 发送 GET 请求，可以按照以下示例代码操作：

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

示例代码解释

使用 fetch() 方法发起 GET 请求。
使用 then() 方法处理响应，将其解析为 JSON 格式。
再次使用 then() 方法来处理解析后的数据。
使用 catch() 方法来捕获并处理请求中的错误。

发送POST请求

使用 Fetch 发送 POST 请求，可以按照以下示例代码操作：

const options = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
};

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

示例代码解释

使用 fetch() 方法发起 POST 请求，需要传递一个配置对象 options，其中包含请求方法、请求头和请求体。
options 中的 body 为 JSON 格式的字符串，需要通过 JSON.stringify() 方法来转换。
使用 then() 方法处理响应，将其解析为 JSON 格式。
再次使用 then() 方法来处理解析后的数据。
使用 catch() 方法来捕获并处理请求中的错误。

发送PUT请求

使用 Fetch 发送 PUT 请求，可以按照以下示例代码操作：

const options = {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
};

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

示例代码解释

使用 fetch() 方法发起 PUT 请求，需要传递一个配置对象 options，其中包含请求方法、请求头和请求体。
options 中的 body 为 JSON 格式的字符串，需要通过 JSON.stringify() 方法来转换。
使用 then() 方法处理响应，将其解析为 JSON 格式。
再次使用 then() 方法来处理解析后的数据。
使用 catch() 方法来捕获并处理请求中的错误。

发送DELETE请求

使用 Fetch 发送 DELETE 请求，可以按照以下示例代码操作：

const options = {
  method: 'DELETE',
  headers: {
    'Content-Type': 'application/json'
  }
};

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

示例代码解释

使用 fetch() 方法发起 DELETE 请求，需要传递一个配置对象 options，其中包含请求方法、请求头。
使用 then() 方法处理响应，将其解析为 JSON 格式。
再次使用 then() 方法来处理解析后的数据。
使用 catch() 方法来捕获并处理请求中的错误。

处理错误与异常

处理 Fetch 请求中的错误，可以使用 catch() 方法来捕获异常。例如：

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

示例代码解释

在 then() 方法中检查响应是否成功（response.ok 返回布尔值）。
如果响应不成功，则抛出一个新的错误。
使用 catch() 方法来捕获并处理请求中的错误。

使用Axios进行HTTP请求

发送GET请求

使用 Axios 发送 GET 请求，可以按照以下示例代码操作：

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

示例代码解释

使用 axios.get() 方法发起 GET 请求。
使用 then() 方法处理响应，输出响应数据。
使用 catch() 方法来捕获并处理请求中的错误。

发送POST请求

使用 Axios 发送 POST 请求，可以按照以下示例代码操作：

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

示例代码解释

使用 axios.post() 方法发起 POST 请求，第二个参数是请求体。
使用 then() 方法处理响应，输出响应数据。
使用 catch() 方法来捕获并处理请求中的错误。

发送PUT请求

使用 Axios 发送 PUT 请求，可以按照以下示例代码操作：

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

示例代码解释

使用 axios.put() 方法发起 PUT 请求，第二个参数是请求体。
使用 then() 方法处理响应，输出响应数据。
使用 catch() 方法来捕获并处理请求中的错误。

发送DELETE请求

使用 Axios 发送 DELETE 请求，可以按照以下示例代码操作：

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

示例代码解释

使用 axios.delete() 方法发起 DELETE 请求，第二个参数是请求体。
使用 then() 方法处理响应，输出响应数据。
使用 catch() 方法来捕获并处理请求中的错误。

配置请求头和参数

使用 Axios 配置请求头和参数，可以按照以下示例代码操作：

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

示例代码解释

使用 axios.post() 方法发起 POST 请求，第二个参数是请求体，第三个参数是配置对象。
配置对象中的 headers 部分可以添加自定义的请求头。
使用 then() 方法处理响应，输出响应数据。
使用 catch() 方法来捕获并处理请求中的错误。

实战项目：Fetch与Axios结合使用

构建一个简单的数据展示应用

构建一个简单的数据展示应用，使用 Fetch 或 Axios 从 API 获取数据并展示。该应用将请求来自公开 API 的数据，并在浏览器中展示。

示例代码

首先，创建一个 HTML 文件 index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Data Display App</title>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div id="data-container"></div>
</body>
</html>

然后，在 script.js 文件中编写 JS 代码：

import axios from 'axios';

const fetchData = async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
    const data = response.data;
    displayData(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

const displayData = (data) => {
  const container = document.getElementById('data-container');
  container.innerHTML = `<p>User ID: ${data.userId}</p>
                         <p>ID: ${data.id}</p>
                         <p>Title: ${data.title}</p>
                         <p>Completed: ${data.completed ? 'Yes' : 'No'}</p>`;
};

fetchData();

示例代码解释

在 script.js 中，首先引入 Axios 库。
定义一个 fetchData 函数，使用 axios.get() 方法从 API 获取数据。
使用 try...catch 结构来捕获并处理请求中的错误。
定义一个 displayData 函数，用于将数据展示到页面上。该函数获取 DOM 元素 data-container，并根据获取的数据填充 HTML 标签。
最后调用 fetchData 函数来启动数据获取过程。

使用Fetch或Axios从API获取数据

在上述示例中，已经通过 Axios 从 API 获取数据。如果希望使用 Fetch 替代 Axios，可以将代码改为如下：

const fetchData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const data = await response.json();
    displayData(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

示例代码解释

使用 fetch() 方法从 API 获取数据，该方法返回一个 Promise。
使用 await 关键字等待 Promise 解析，并将响应解析为 JSON 格式。
将解析后的数据传递给 displayData 函数进行展示。

展示获取的数据

展示获取的数据已经在 displayData 函数中实现。该函数将数据中的各个字段填充到 HTML 元素中，如用户 ID、ID、标题等。这样可以在浏览器中看到从 API 获取的数据。

常见问题与解决方案

常见错误及解决方法

网络请求失败

错误描述：请求失败，通常是因为网络连接问题或服务器返回错误。
解决方法：
- 检查网络连接是否正常。
- 检查请求的 URL 是否正确。
- 检查服务器是否正常运行。

错误处理机制不完善

错误描述：捕获不到错误，或者错误信息难以理解。
解决方法：
- 使用 try...catch 结构来捕获所有可能的错误。
- 输出详细的错误信息，例如错误代码、错误消息等。

跨域请求问题

错误描述：在浏览器中发出的请求被限制，无法访问不同源的资源。
解决方法：
- 在服务器端配置 CORS（跨域资源共享），允许特定来源的请求。
- 使用代理服务器，将请求转发到目标服务器。

具体示例代码

配置请求头和处理跨域请求

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

处理跨域请求

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

通过上述方法，可以有效处理常见的网络请求问题，使得应用程序更加健壮和稳定。