如何使用 axios 发出请求 - Javascript

Axios 是一个基于 Promise 的 HTTP 请求库，可以用于浏览器和 Node.js。它具有简单易用的 API 和强大的功能，如拦截请求和响应、取消请求、自动转换 JSON 数据等。在本文中，我将向你介绍如何使用 Axios 发出请求。

安装 Axios

在使用 Axios 之前，你需要先安装它。你可以使用 npm 或 yarn 安装 Axios。

# 使用 npm 安装
npm install axios

# 使用 yarn 安装
yarn add axios

发出 GET 请求

发出 GET 请求是最基本的用例。以下是一个发出 GET 请求的示例代码：

import axios from 'axios';

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

这段代码将向 https://api.example.com/data 发出 GET 请求。当响应成功返回时，它将打印响应数据。如果请求失败，则打印错误信息。

发出 POST 请求

与发出 GET 请求类似，你可以使用 Axios 发出 POST 请求。以下是一个发出 POST 请求的示例代码：

import axios from 'axios';

axios.post('https://api.example.com/data', {
  name: 'John Doe',
  email: 'johndoe@example.com',
})
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

这段代码将向 https://api.example.com/data 发出 POST 请求，并且提交一个包含姓名和电子邮件的 JSON 负载。当响应成功返回时，它将打印响应数据。如果请求失败，则打印错误信息。

发出 PUT 请求

发出 PUT 请求与发出 POST 请求类似。以下是一个发出 PUT 请求的示例代码：

import axios from 'axios';

axios.put('https://api.example.com/data/1', {
  name: 'John Doe',
  email: 'johndoe@example.com',
})
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

这段代码将向 https://api.example.com/data/1 发出 PUT 请求，并且更新 ID 为 1 的数据，将其姓名和电子邮件属性分别更新为 John Doe 和 johndoe@example.com。当响应成功返回时，它将打印响应数据。如果请求失败，则打印错误信息。

发出 DELETE 请求

发出 DELETE 请求是删除数据的最常用方法之一。以下是一个发出 DELETE 请求的示例代码：

import axios from 'axios';

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

这段代码将向 https://api.example.com/data/1 发出 DELETE 请求，并且删除 ID 为 1 的数据。当响应成功返回时，它将打印响应数据。如果请求失败，则打印错误信息。

总结

现在你已经知道如何使用 Axios 发出请求了。无论是发出 GET 请求、POST 请求、PUT 请求还是 DELETE 请求，Axios 都提供了简单易用的 API，让你轻松地完成请求操作。当然，Axios 还提供了更多高级功能，如拦截请求和响应、取消请求、自动转换 JSON 数据等，你可以查看官方文档以了解更多信息。