我整理的一些关于【HTTP】的项目学习资料（附讲解～～）和大家一起分享、学习一下：

 https://d.51cto.com/bLN8S1

使用 Axios 进行 HTTP 请求的直接引入方式

在现代前端开发中，进行 HTTP 请求是一个非常常见的需求。无论是从服务器获取数据，还是将数据发送到服务器，我们都需要一个方便易用的库来处理这些请求。Axios 是一个流行的 HTTP 客户端库，它为我们提供了简洁的 API 和强大的功能。本文将介绍如何使用 Axios 进行直接引入，结合具体代码示例，以及相关概念的讲解。

1. 什么是 Axios？

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js。它可以用于发送 HTTP 请求并接收响应，为我们简化了处理请求的复杂度。

1.1 Axios 的特点
  • Promise 忘记：Axios 使用 Promise API，支持 .then() 和 .catch()，让我们能够方便地处理异步请求。
  • 拦截器：Axios 提供了请求和响应的拦截器功能，可以在请求发送前或收到响应后进行处理。
  • 自动转换 JSON：Axios 会自动将响应的数据转换为 JSON 格式。
  • 请求和响应的统一配置：可以通过设置全局配置来控制请求的超时、头信息等。

2. 在项目中引入 Axios

在项目中引入 Axios 的方式有很多种，其中最简单的方式是通过 CDN 链接直接引入。我们可以在 HTML 文件中加入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios Demo</title>
    <script src="
</head>
<body>
    Axios Demo
    <div id="app"></div>
    <script>
        axios.get('
            .then(response => {
                console.log(response.data);
                document.getElementById('app').innerText = JSON.stringify(response.data);
            })
            .catch(error => {
                console.error('Error fetching data:', error);
            });
    </script>
</body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
2.1 代码解析

在上面的代码中，我们使用 CDN 引入了 Axios，并在 DOM 加载完毕后发送了一个 GET 请求，获取 JSONPlaceholder 网站上的数据。如果请求成功，我们会将数据打印到控制台并显示在页面上；如果失败，控制台会输出错误信息。

3. 使用 Axios 发送不同类型的请求

3.1 GET 请求示例

我们已经在上一个例子中演示了 GET 请求，下面我们再来看一个更复杂的 GET 请求示例，带有请求参数。

axios.get(' {
    params: {
        userId: 1
    }
})
.then(response => {
    console.log('Posts by user 1:', response.data);
})
.catch(error => {
    console.error('Error fetching posts:', error);
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
3.2 POST 请求示例

发送 POST 请求的操作与 GET 请求类似，只是需要添加请求数据。

axios.post(' {
    title: 'foo',
    body: 'bar',
    userId: 1
})
.then(response => {
    console.log('Created Post:', response.data);
})
.catch(error => {
    console.error('Error creating post:', error);
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
3.3 表格展示数据

假如我们想把获取到的文章数据以表格的形式展示出来，可以使用以下代码：

<table border="1" id="postsTable">
    <tr>
        <th>User ID</th>
        <th>ID</th>
        <th>Title</th>
        <th>Body</th>
    </tr>
</table>
<script>
    axios.get('
        .then(response => {
            const posts = response.data;
            const table = document.getElementById('postsTable');

            posts.forEach(post => {
                const row = table.insertRow();
                row.insertCell(0).innerText = post.userId;
                row.insertCell(1).innerText = post.id;
                row.insertCell(2).innerText = post.title;
                row.insertCell(3).innerText = post.body;
            });
        })
        .catch(error => {
            console.error('Error fetching data:', error);
        });
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.

4. Axios 类图

在使用 Axios 时，我们可以将其视为一个简单的类，下面是使用 mermaid 语法绘制的类图：

Axios + interceptors: Interceptors +get(url, config) : Promise +post(url, data, config) : Promise +put(url, data, config) : Promise +delete(url, config) : Promise Interceptors + request: RequestInterceptor + response: ResponseInterceptor
4.1 类图解析

上图展示了 Axios 的基本结构。Axios 类包含了几个基本的 HTTP 请求方法以及一个拦截器对象。拦截器对象又包含了两个部分：请求拦截器和响应拦截器。

5. 总结

通过以上的介绍，我们了解了如何在项目中通过直接引入方式来使用 Axios 进行 HTTP 请求。Axios 提供了友好的 API，使得处理各种请求变得简单且高效。通过实例代码展示了 GET、POST 请求的使用方式，并通过表格形式展示了从服务器获取的数据。希望本文能为您在前端开发中使用 Axios 提供一定的帮助。今后，您可以在更复杂的应用场景中，利用 Axios 提供的功能处理 HTTP 请求。

整理的一些关于【HTTP】的项目学习资料（附讲解～～），需要自取：

 https://d.51cto.com/bLN8S1