返回

从准备工作开始，如何动手封装axios？

前端

1. 前期准备

在动手封装axios之前，我们需要先做一些准备工作：

  1. 确保已安装Node.js和npm： Node.js是运行axios的前提，npm是Node.js的包管理工具。如果没有安装，请先安装它们。
  2. 安装axios： 打开命令行，使用npm命令安装axios包：npm install axios。
  3. 创建项目文件夹： 创建一个新的文件夹作为项目文件夹，用于存放封装axios的代码。

2. axios的配置

准备好项目文件夹后，就可以开始配置axios了。首先，在项目文件夹中创建一个名为index.js的文件，并在其中添加以下代码：

import axios from "axios";

const instance = axios.create({
  baseURL: "https://example.com",
  timeout: 10000,
  headers: {
    "Content-Type": "application/json",
  },
});

这段代码创建了一个axios实例，并对该实例进行了配置，包括设置基础URL、超时时间和默认请求头。

3. axios的使用

配置好axios后，就可以开始使用了。以下是如何使用axios进行GET请求的示例：

instance.get("/users").then((response) => {
  console.log(response.data);
});

这段代码向"/users"路径发送了一个GET请求，并通过then方法处理了服务器的响应。

4. 封装axios

现在，我们已经了解了axios的基本使用，接下来就可以将其封装成一个易于使用的库了。

创建一个名为axios-wrapper.js的新文件，并在其中添加以下代码：

import axios from "axios";

const instance = axios.create({
  baseURL: "https://example.com",
  timeout: 10000,
  headers: {
    "Content-Type": "application/json",
  },
});

export const get = (url) => {
  return instance.get(url);
};

export const post = (url, data) => {
  return instance.post(url, data);
};

export const put = (url, data) => {
  return instance.put(url, data);
};

export const del = (url) => {
  return instance.delete(url);
};

这段代码封装了axios的GET、POST、PUT和DELETE方法，并将其导出，以便其他模块可以使用。

5. 使用封装后的axios

现在，我们可以使用封装后的axios来发送请求了。以下是如何使用封装后的axios进行GET请求的示例：

import { get } from "./axios-wrapper.js";

get("/users").then((response) => {
  console.log(response.data);
});

这段代码与之前使用axios进行GET请求的代码非常相似，但使用了封装后的axios库，更加简洁易用。

至此，我们已经完成了axios的封装，并了解了如何使用它来发送请求。