封装一个axios请求

为了封装一个axios请求，我们需要先安装axios库。在命令行中执行以下命令进行安装：

npm install axios

接下来，我们可以创建一个名为“api.js”的文件，用于存储所有的请求。在这个文件中，我们可以引入axios库，并定义一个基础的axios实例，以便在每个请求中使用。代码如下：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://localhost:3000', // 设置默认的请求地址
  timeout: 10000, // 设置请求超时时间
});

export default instance;

在这里，我们创建了一个名为“instance”的axios实例，并设置了默认的请求地址为“http://localhost:3000”，超时时间为10秒钟。

接下来，我们可以定义一个“get”请求的方法，以便在需要时使用。

import instance from './api';

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

这个方法接受两个参数：URL和参数。它使用我们之前定义的“instance”实例来执行GET请求，并传递URL和参数。如果请求成功，它将返回一个Promise。

类似的，我们也可以定义POST、PUT和DELETE请求的方法，代码如下：

import instance from './api';

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

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请求封装，我们可以在其他组件中使用这些方法来执行HTTP请求。例如，在一个React组件中，我们可以这样使用：

import React, { useState, useEffect } from 'react';
import { get } from './api';

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // 执行GET请求
    get('/data').then((result) => {
      setData(result.data);
    });
  }, []);

  return (
    <div>
      {data.map((item) => (
        <p key={item.id}>{item.text}</p>
      ))}
    </div>
  );
};

export default MyComponent;

在这里，我们使用了我们之前定义的“get”方法来执行一个GET请求，并在组件挂载时获取数据。如果请求成功，我们将返回的数据存储在组件的状态中，并使用它来渲染页面。