react如何封装axios

封装axios的基本步骤

在React项目中封装axios可以提高代码复用性、统一处理错误和请求配置。以下是一个常见的封装方法：

创建axios实例

import axios from 'axios';

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

添加请求拦截器

instance.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

添加响应拦截器

instance.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 处理未授权
          break;
        case 404:
          // 处理未找到
          break;
        default:
          console.error('请求错误:', error);
      }
    }
    return Promise.reject(error);
  }
);

封装常用请求方法

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);
};

使用封装的请求

import { get, post } from './api';

// 获取数据
const fetchData = async () => {
  try {
    const response = await get('/users');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
};

// 提交数据
const submitData = async data => {
  try {
    const response = await post('/users', data);
    console.log(response);
  } catch (error) {
    console.error(error);
  }
};

高级封装选项

可以进一步封装为自定义hook：

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

const useApi = (url, params) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const result = await get(url, params);
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url, params]);

  return { data, loading, error };
};

export default useApi;

使用时：

const { data, loading, error } = useApi('/users');