react的axios封装

React中使用axios进行网络请求的封装可以提供统一的错误处理、拦截器配置等功能。

下面是一个简单的axios封装示例：

首先，安装axios依赖：

npm install axios

然后，创建一个api.js文件用于封装axios请求函数：

import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  baseURL: 'http://api.example.com' // 设置请求的baseURL
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 可以在这里进行请求前的处理，如添加token等

    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 可以在这里进行统一的成功响应处理

    return response;
  },
  error => {
    // 可以在这里进行统一的错误处理

    return Promise.reject(error);
  }
);

// 封装get请求
export const get = (url, params) => {
  return instance.get(url, { params });
};

// 封装post请求
export const post = (url, data) => {
  return instance.post(url, data);
};

// 封装其他请求方式，如put、delete等

export default instance;

然后，在组件中引入api.js，并使用封装好的函数进行请求：

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

const ExampleComponent = () => {
  useEffect(() => {
    // 发起get请求
    get('/example')
      .then(response => {
        // 处理成功响应
      })
      .catch(error => {
        // 处理错误
      });

    // 发起post请求
    post('/example', { data: 'exampleData' })
      .then(response => {
        // 处理成功响应
      })
      .catch(error => {
        // 处理错误
      });
  }, []);

  return (
    // 组件内容
  );
};

export default ExampleComponent;

这样，你就可以在React中使用封装好的axios进行网络请求，并在拦截器中实现统一的错误处理、拦截器配置等功能。请根据你的实际需求进行相应的修改和扩展。