axios 请求js

原创

mob649e8169ec5f 2024-08-02 04:33:45 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e8169ec5f的原创作品，请联系作者获取转载授权，否则将追究法律责任

Axios 请求 JS 的基础知识

在现代前端开发中，数据的获取和交互是构建应用程序的关键。Axios 是一个基于 Promise 的 HTTP 客户端，旨在为浏览器和 Node.js 提供简洁的 API。通过使用 Axios，我们可以轻松地向服务器发送请求，获取或发送数据。

Axios 的安装

首先，我们需要安装 Axios。我们可以通过 npm 或 yarn 进行安装，执行以下命令：

npm install axios

或者

yarn add axios

基本用法

Axios 支持多种请求方法，包括 GET、POST、PUT 和 DELETE。以下是一个简单的示例，展示如何使用 Axios 向一个 RESTful API 发送 GET 请求：

import axios from 'axios';

axios.get('
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

在这个例子中，我们使用 axios.get 方法向一个示例 API 发起请求，并在成功回调中处理数据。若发生错误，则在错误回调中进行处理。

发送数据

除了获取数据，Axios 还可以用来发送数据。以下是一个使用 POST 方法发送数据的示例：

const postData = {
  title: 'foo',
  body: 'bar',
  userId: 1
};

axios.post(' postData)
  .then(response => {
    console.log('Data posted successfully', response.data);
  })
  .catch(error => {
    console.error('Error posting data:', error);
  });

通过 axios.post 方法，我们可以轻松地将 JavaScript 对象发送到服务器。服务器返回的响应将在 .then 方法中处理。

错误处理

Axios 提供了多种方式来处理错误。可以在全局设置 Axios 拦截器，捕获所有请求的错误：

axios.interceptors.response.use(
  response => response,
  error => {
    console.error('Global Error Handler:', error);
    return Promise.reject(error);
  }
);

以上代码片段展示了如何将错误捕获并打印，以便进行调试。

数据可视化示例

在数据请求成功后，我们常常需要将数据可视化。下面是一个使用 Mermaid.js 创建饼状图的示例：

pie
    title 饼状图示例
    "数据A": 40
    "数据B": 30
    "数据C": 20
    "数据D": 10

通过上述代码，我们能够直观地绘制出数据的分布情况。Mermaid 语言简单易用，非常适合于快速展示数据。

关系图示例

如果我们在设计数据库时，利用 Mermaid 可以方便地表示实体关系图（ER图）。如下所示：

erDiagram
    USER {
        int id
        string name
        string email
    }
    POST {
        int id
        string title
        string body
    }
    USER ||--o{ POST : "writes"

该代码展示了 USER 和 POST 之间的关系，直观地反映了一个用户可以写多篇文章的关系。