后端开发入门之Axios二次封装，让你轻松发送请求

2023-09-03 03:06:16

前言

Axios是一个非常强大的JavaScript库，用于发送HTTP请求。它简单易用，并且支持多种特性，如并行请求、超时、重试等。但是，在实际项目中，我们经常会遇到一些重复性的请求，例如获取用户信息、更新用户信息等。为了避免重复编写这些请求代码，我们可以对Axios进行二次封装，以便更轻松地发送请求。

Axios二次封装

Axios二次封装是指在Axios的基础上，添加一些我们自己的代码，使其更符合我们的需求。例如，我们可以添加一个函数来发送GET请求，一个函数来发送POST请求，等等。这样，我们就可以在项目中直接使用这些函数来发送请求，而不用每次都去写重复的代码。

创建api文件夹

为了更好的管理请求，我们可以创建一个api文件夹，并将所有的请求函数都放在这个文件夹中。这样，当我们想要发送请求时，就可以直接到这个文件夹中找到相应的函数，而不用去翻遍整个项目代码。

采用async/await处理异步操作

Axios是一个异步库，这意味着它的请求函数都是异步的。为了处理异步操作，我们可以使用async/await语法。Async/await语法可以使我们的代码看起来更同步，更容易理解。

示例

以下是一个使用Axios二次封装和async/await发送请求的示例：

// api/user.js
import axios from 'axios';

export async function getUserInfo() {
  const response = await axios.get('/user/info');
  return response.data;
}

export async function updateUserInfo(data) {
  const response = await axios.put('/user/info', data);
  return response.data;
}

// main.js
import { getUserInfo, updateUserInfo } from './api/user';

async function main() {
  // 获取用户信息
  const userInfo = await getUserInfo();
  console.log(userInfo);

  // 更新用户信息
  const updatedUserInfo = await updateUserInfo({ name: 'John Doe' });
  console.log(updatedUserInfo);
}

main();