Vue.js 3.0 中使用 Axios 库进行 POST 和 GET 请求的全面指南

2024-02-11 18:40:27

导言

在现代 Web 开发中，发起 HTTP 请求对于与服务器进行交互至关重要。Vue.js 3.0 中，Axios 库是一个受欢迎且功能强大的解决方案，它使开发人员能够轻松、灵活地发起 POST 和 GET 请求。本文将深入探讨使用 Axios 库在 Vue.js 3.0 中进行 POST 和 GET 请求的配置过程，并提供详细的示例和最佳实践。

配置 Axios 请求基类

为了简化 Axios 请求的管理，建议在 src 目录下创建一个 api 文件夹，并在其中创建 request.js 文件作为请求基类。此基类将包含发送 POST 和 GET 请求的通用配置。

import axios from 'axios';

const request = axios.create({
  baseURL: 'https://your-api-endpoint.com',
  headers: {
    'Content-Type': 'application/json',
  },
});

export default request;

在上面的配置中：

baseURL 定义了 API 端点的基本 URL，这是所有请求的根路径。
headers 对象指定发送请求时使用的默认标头，例如内容类型。

发起 POST 请求

要发起 POST 请求，请使用 post() 方法：

import request from './api/request';

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

在上面的示例中：

'/users' 是请求的端点 URL。
请求体 { name, email } 传递给服务器。
.then() 处理器用于处理成功的响应。
.catch() 处理器用于处理请求失败。

发起 GET 请求

要发起 GET 请求，请使用 get() 方法：

import request from './api/request';

request.get('/users')
.then((response) => {
  console.log(response.data);
})
.catch((error) => {
  console.error(error);
});