使用react写一个Api封装的代码

下面是一个使用React封装API请求的示例代码，包含了请求拦截、响应处理、错误处理等功能，并提供了常用的GET、POST、PUT、DELETE方法。

import axios from 'axios';

// 创建axios实例 const api = axios.create({ baseURL: process.env.REACT_APP_API_BASE_URL || '​​https://api.example.com​​', timeout: 10000, // 请求超时时间 headers: { 'Content-Type': 'application/json', }, });

// 请求拦截器 api.interceptors.request.use( (config) => { // 在发送请求之前做些什么，例如添加token const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = ​​Bearer ${token}​​; } return config; }, (error) => { // 对请求错误做些什么 console.error('请求拦截器错误:', error); return Promise.reject(error); } );

// 响应拦截器 api.interceptors.response.use( (response) => { // 对响应数据做点什么 // 假设后端返回格式为 { code, data, message } const { code, data, message } = response.data;

// 根据实际业务逻辑处理
if (code === 200) {
  return data;
} else {
  // 非成功状态码处理
  console.error('API错误:', message);
  return Promise.reject(new Error(message || '请求失败'));
}

}, (error) => { // 对响应错误做点什么 console.error('响应拦截器错误:', error);

// 处理网络错误
if (!error.response) {
  return Promise.reject(new Error('网络错误，请检查网络连接'));
}

const { status, data } = error.response;

// 根据状态码处理不同错误
switch (status) {
  case 401:
    // 未授权，可能需要重新登录
    localStorage.removeItem('token');
    window.location.href = '/login';
    return Promise.reject(new Error('身份验证失败，请重新登录'));
  case 403:
    return Promise.reject(new Error('没有权限执行此操作'));
  case 404:
    return Promise.reject(new Error('请求的资源不存在'));
  case 500:
    return Promise.reject(new Error('服务器内部错误，请稍后再试'));
  default:
    return Promise.reject(new Error(data?.message || `请求错误: ${status}`));
}

} );

// 封装请求方法 const apiService = { /**

• GET请求
• @param {string} url 请求地址
• @param {object} params 查询参数
• @param {object} config 额外配置
• @returns {Promise} */ get: (url, params = {}, config = {}) => { return api.get(url, { params, ...config }); },

/**

• POST请求
• @param {string} url 请求地址
• @param {object} data 请求体数据
• @param {object} config 额外配置
• @returns {Promise} */ post: (url, data = {}, config = {}) => { return api.post(url, data, config); },

/**

• PUT请求
• @param {string} url 请求地址
• @param {object} data 请求体数据
• @param {object} config 额外配置
• @returns {Promise} */ put: (url, data = {}, config = {}) => { return api.put(url, data, config); },

/**

• DELETE请求
• @param {string} url 请求地址
• @param {object} config 额外配置
• @returns {Promise} */ delete: (url, config = {}) => { return api.delete(url, config); },

/**

• 上传文件
• @param {string} url 请求地址
• @param {File} file 要上传的文件
• @param {object} data 额外数据
• @param {function} onProgress 进度回调函数
• @returns {Promise} */ upload: (url, file, data = {}, onProgress) => { const formData = new FormData(); formData.append('file', file);

// 添加额外数据
Object.keys(data).forEach(key => {
  formData.append(key, data[key]);
});

return api.post(url, formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  onUploadProgress: (progressEvent) => {
    if (onProgress) {
      const percent = Math.round(
        (progressEvent.loaded / progressEvent.total) * 100
      );
      onProgress(percent);
    }
  },
});

}, };

export default apiService;

上面的代码实现了一个完整的React API请求封装，主要特点包括：

1. 使用axios创建实例，统一配置基础URL和超时时间
2. 实现请求拦截器，自动添加认证token
3. 实现响应拦截器，统一处理不同状态码和错误
4. 封装了常用的GET、POST、PUT、DELETE方法
5. 提供了文件上传功能，支持进度回调

使用方法示例：

// 在组件中使用
import apiService from '../services/api';

// GET请求
const fetchData = async () => {
  try {
    const data = await apiService.get('/users', { page: 1, limit: 10 });
    console.log('获取数据成功:', data);
  } catch (error) {
    console.error('获取数据失败:', error.message);
  }
};

// POST请求
const createData = async () => {
  try {
    const newItem = { name: '测试', description: '测试描述' };
    const result = await apiService.post('/items', newItem);
    console.log('创建成功:', result);
  } catch (error) {
    console.error('创建失败:', error.message);
  }
};

你可以根据实际项目需求调整错误处理逻辑、请求头配置和响应数据格式处理。