如何从 api axios 获取数据 (1)

📌 相关文章

📜 如何从 api axios 获取数据 (1)

📅 最后修改于: 2023-12-03 15:23:46.292000 🧑 作者: Mango

如何从 api axios 获取数据

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它具有以下特点：

在浏览器端和 Node.js 中都能够使用。
支持 Promise API。
自动转换 JSON 数据。
支持防止 XSRF 攻击。

在此文档中，我们将会介绍如何使用 Axios 从 API 获取数据。

安装

在使用之前，您需要先安装 Axios。您可以使用 npm 或者 CDN 进行安装。

npm

npm install axios

CDN

您也可以使用 CDN 来引入 Axios。在 HTML 中添加以下代码即可：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

发送请求

使用 Axios 发送请求的基本语法如下：

axios({
    method: 'GET',
    url: '/api/data',
    params: {
        id: '123'
    }
})
.then(response => {
    console.log(response.data);
})
.catch(error => {
    console.error(error);
});

在这个例子中，我们使用 axios 方法发送一个 GET 请求，URL 为 /api/data，参数为 { id: '123' }。

.then() 方法用来处理响应数据，当请求成功后，将会打印响应数据到控制台中。

.catch() 方法用来处理错误，当遇到错误时，将会打印错误到控制台中。

其他请求方法

除了 GET 请求之外，Axios 还支持其他的请求方法，如 POST、PUT、DELETE 等。

下面是一个 POST 请求的例子：

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

在这个例子中，我们使用 axios.post() 方法发送一个 POST 请求，URL 为 /api/data，数据为 { name: 'John', age: 30 }。

拦截器

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

在这个例子中，我们使用 axios.interceptors.request.use() 方法来添加请求拦截器，使用 axios.interceptors.response.use() 方法来添加响应拦截器。在请求或响应被发出之前或之后，我们可以在拦截器中做一些额外的处理。

总结

以上是一个基本的 Axios 客户端的使用方法。Axios 提供了许多其他功能和配置，您可以参考官方文档进行更深入的学习和使用。

# 如何从 api axios 获取数据

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它具有以下特点：

- 在浏览器端和 Node.js 中都能够使用。
- 支持 Promise API。
- 自动转换 JSON 数据。
- 支持防止 XSRF 攻击。

在此文档中，我们将会介绍如何使用 Axios 从 API 获取数据。

## 安装

在使用之前，您需要先安装 Axios。您可以使用 npm 或者 CDN 进行安装。

### npm

```bash
npm install axios

CDN